web-dev-qa-db-ja.com

HTML5オーディオプレーヤーエラー：「提供されたdouble値は非有限です」

[〜＃〜] this [〜＃〜]ページで、カスタムHTML5オーディオプレーヤー「ハンドラー」を作成しました：

<div class="default-player">
    <audio controls="" autoplay="" name="media" id="audio_player">
        <source src="http://stream.radio.co/sedf8bacc9/listen" type="audio/mpeg">
    </audio>
</div>

<div id="audioplayer">
    <button id="pButton" class="pause"></button>
    <div id="timeline">
        <div id="playhead"></div>
    </div>
    <div id="volume_control">
        <label id="rngVolume_label" for="rngVolume">Volume:</label>
        <input type="range" id="rngVolume" min="0" max="1" step="0.01" value="1">
    </div>
    <div class="current-piece">
        <div class="now-playing">Now playing:</div>
        <script src="https://public.radio.co/embed/sedf8bacc9/song.js"></script>
    </div>
</div>

実際のプレーヤーを「ハンドル」にバインドするために、この小さなスクリプトを作成しました。

function radioPlayer(){

    var music = document.getElementById('audio_player');

    function playAudio() {
      if (music.paused) {
        music.play();
        pButton.className = "";
        pButton.className = "pause";
      } else {
        music.pause();
        pButton.className = "";
        pButton.className = "play";
      }
    }

    function setVolume(volume) {
       music.volume = volume;
    }

    $('#pButton').on('click', playAudio);

    $('#rngVolume').on('change', setVolume);

}

radioPlayer();

volume range inputを使用すると、次のエラーが発生します： "Uncaught TypeError：Failed to set'volume 'property on'HTMLMediaElement'：提供されたdouble値は非有限です。」

その原因は何ですか？

javascriptaudiomedia-player
5
Razvan Zamfir

Html5 audio.volumeメソッドでは、値を100で割る必要があります。

function setVolume(e) {
   var volume = e.target.value / 100;
   music.volume = parseFloat(volume);
}
0
spice

ボリュームまたはcurrentTimeなどのプロパティをNANに設定しようとすると、この問題はparseFloatまたは提供された値とは関係がないため、同じエラーが発生するため、簡単な解決策は幅isNaN（）を確認することです。

function setVolume(volume) {
   if (isNaN(volume)) {
      volume= 0.1;
   }
   music.volume = parseFloat(volume);
}
0
M.Ali El-Sayed