Posted at

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

More than 1 year has passed since last update.

前回の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);
};
});