YouTube動画の音量をMIDIコンで制御する

前回のMIDIコントローラの出力を取得したプログラムを応用して、埋め込みのYouTube動画の音量をMIDIで制御してみました。

MIDIイベント発生時に

player.setVolume(e.data[2] * 0.77);

を足しただけで、動画の埋め込みは公式サイトから引用しています。値が最大127なので100になるように調整しています。

html

<div id="player"></div>

javascript

//Youtubeプレイヤーの埋め込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: 'XXXXXXXXXX', //動画のID
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}
var done = false;

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 200000);
        done = true;
    }
}

function stopVideo() {
    player.stopVideo();
}

//MIDIにアクセス
navigator.requestMIDIAccess().then(function(midiAccess) {
    var inputs = [];
    var inputIterator = midiAccess.inputs.values();
    for (var i = inputIterator.next(); !i.done; i = inputIterator.next()) {
        inputs.push(i.value);
    }

    alert(inputs[0].manufacturer + inputs[0].name);
    inputs[0].onmidimessage = function(e) {
        player.setVolume(e.data[2] * 0.77);
    };
});