addEventListenerで'volumechange'ができません。

Question

###前提・実現したいこと
HTML5のビデオプレーヤーのコントロールをjavascriptでしています。音量の変化をさせることができません。アドバイス頂けると助かります。よろしくお願いします。

###発生している問題・エラーメッセージ
ブラウザのコンソールにはエラーメッセージはありません。

エラーメッセージ

###該当のソースコード

<div class="video-box js-video-box">
        <video class="js-video" id="video">
            <source src="video.mp4" type="video/mp4" />
        </video>
        <div id="video-control">
            <button class="video-play js-video-play">&gt;</button>
            <input type="range" class="seekbar seekbar-time js-seekbar-time" value="0" min="0">
            <input type="range" class="seekbar seekbar-volume js-seekbar-volume" value="0.5" min="0" max="1" step="0.05">
        </div>
    </div>

<script>
const videoArray = document.getElementsByClassName('js-video-box');
for(let i = 0; i < videoArray.length; i++) {
    let videoBox = videoArray[i];
    let videoSource   = videoBox.getElementsByClassName('js-video')[0];
    let playButton    = videoBox.getElementsByClassName('js-video-play')[0];
    let timeSeekbar   = videoBox.getElementsByClassName('js-seekbar-time')[0];
    let volumeSeekbar = videoBox.getElementsByClassName('js-seekbar-volume')[0];

    playButton.addEventListener('click',function(){
        if (videoSource.paused) {
            videoSource.play();
            playButton.textContent = "||";
        } else {
            videoSource.pause();
            playButton.textContent = ">";
    }
    },
    false);

    if (videoSource.readyState > 0) {
        timeSeekbar.max = videoSource.duration;
    } else {
        videoSource.addEventListener('loadedmetadata',
            function() { timeSeekbar.max = videoSource.duration; }
        );
    }
    
    videoSource.addEventListener("timeupdate", 
    function() {
        timeSeekbar.value = videoSource.currentTime;
    }, false);
    

    volumeSeekbar.max = videoSource.volume;    
    videoSource.addEventListener('volumechange',
        function() { 
            videoSource.volume = volumeSeekbar.value;
        },false);
}
</script>

###試したこと
音量の調整の記述は、サンプルコードを参考にしました。元のコードでは音量調整のシークバーにaddEventListenerをしていましたが、videoタグの方に変えてみました。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Answer 1

volumeSeekbar を動かしたら音量が変わる、というのであれば volumeSeekbar のイベントを拾うべきでは。

    volumeSeekbar.addEventListener('input',/* 'change' かも */
        function() { 
            videoSource.volume = volumeSeekbar.value;
        },false);

動くサンプル (レンジ部分のみ)：https://jsfiddle.net/2L0cuyjb/

Comments

[show8don]

volumechangeで音量のイベントを取得することに囚われて、seekbarでのイベントの取得方法に気付くことができませんでした。本当にありがとうございます。