Twitchのライブ配信をミュートで埋め込む方法

Twitchのライブ配信をミュートで埋め込む方法

 河童戦術:note:
Twitchのライブ配信をミュートで埋め込む方法

note:
やっぱりページを開いたときに音声が自動再生されると反射的にそのページを閉じてしまう人間も少なからずいるわけで、どこで止めればいいのかわからない音声が再生されるサイトってのは少なくとも日本では嫌われやすいと思います。

で、Twitchなんですがライブ配信をサイトに埋め込む場合、通常であればページにある「埋め込みコード」を使ってiframeで自分のゲーム配信をサイトに埋め込んでいると思います。


<iframe src="https://player.twitch.tv/?channel=jaguar300" frameborder="0" scrolling="no" height="378" width="620"></iframe><a href="https://www.twitch.tv/jaguar300?tt_medium=live_embed&tt_content=text_link" style="padding:2px 0px 4px; display:block; width:345px; font-weight:normal; font-size:10px;text-decoration:underline;">Watch live video from リベロの河童 on www.twitch.tv</a>


こんな感じ。これだと音声がデフォルトでオンになっていて、実はこの形だとどうやってもミュートにすることはできません。じゃあどうやって音声をゼロにするかというと


<script src= "http://player.twitch.tv/js/embed/v1.js"></script>
<div id="{PLAYER_DIV_ID}"></div>
<script type="text/javascript">
    var options = {
        width: 620,
        height: 378,
        channel: "{jaguar300}", 
        //video: "{VIDEO_ID}"       
    };
    var player = new Twitch.Player("{PLAYER_DIV_ID}", options);
    player.setVolume(0.0);
    player.addEventListener(Twitch.Player.PAUSE, () => { console.log('Player is paused!'); });
</script>


このような形にして表示したい場所へ埋め込むとボリュームの調整ができるようになります。player.setVolume(0.0);ってところですね。この数字を0.5などに変えると音量を変える事ができます。0.0でミュート状態になり1.0で音量最大です。

width: 620,←横幅
height: 378,←高さ
channel: jaguar300←自分のチャンネル名に変更してください

この埋め込み方だと再生品質(画質)なども指定できるようになりますがとりあえずミュートの方法をまとめました。

https://github.com/justintv/Twitch-API/blob/master/embed-video.mdTwitch-API/embed-video.md at master · justintv/Twitch-API · GitHub

©河童戦術 2014 | VeeThemes