HTML5 音频播放器错误：“提供的双精度值是非有限的”答案

【问题标题】：HTML5 audio player error: "The provided double value is non-finite"HTML5 音频播放器错误：“提供的双精度值是非有限的”
【发布时间】：2017-02-22 16:13:53
【问题描述】：

在 THIS 页面上制作了一个自定义的 HTML 5 音频播放器“处理程序”：

<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();

当我使用 音量范围输入时，我收到此错误：“未捕获的 TypeError：无法在 'HTMLMediaElement' 上设置 'volume' 属性：提供的双精度值是非有限的。”

这是什么原因？

【问题讨论】：

体积变量在哪里定义？由于您只是将 setVolume 绑定到元素，仅此而已，因此处理程序内部可能未定义音量。
@Shilly：这就是所有的代码。
因此我要问，代码中决定“volume”值的部分在哪里？我期待像music.volume = this.val(); 这样的东西，因为没有显示将音量值设置为 rngVolume 滑块的值。

标签： javascript audio media-player

【解决方案1】：

您的音量争论实际上是一个事件：

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

https://jsfiddle.net/08tgr254/1/

【讨论】：

Volume 甚至没有定义，为什么它是双倍的？（在 JS 中甚至没有使用该名称，因为所有数字都是“双打”，因为 JS 中的所有内容都是 64 位浮点数）
好多了，但可能必须再次 parseFloat() 。 :)
嗯...这对我不起作用 :-\ 在特定 VPAID 上出现相同错误：“广告错误。spotx JS VPAID 说无法在 'HTMLMediaElement' 上设置 'volume' 属性” : 提供的双精度值是无限的"

【解决方案2】：

对于 html5 audio.volume 方法，您必须将该值除以 100。

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

【讨论】：

【解决方案3】：

这个问题恰好与 parseFloat 或提供的值无关如果您尝试将音量或任何属性（如 currentTime,..）设置为 NAN，您将收到相同的错误，因此简单的解决方案是检查宽度 isNaN()

function setVolume(volume) {
   if (isNaN(volume)) {
      volume= 0.1;
   }
   music.volume = parseFloat(volume);
}

【讨论】：

这是唯一适合我的解决方案。但是，它仅在我将其设置为静态数字时才有效。当我尝试动态设置变量时，我又回到了错误。

【解决方案4】：

在这里回答一些问题并展示对我有用的方法。简而言之，您必须为有时神秘设置的越界值创建一些异常，然后将其转换为字符串以准备最终转换为浮点数。我不知道为什么会这样，但确实如此。

const setVolume = (x) => {

//cap max at 100 in case of glitches
let varx = x > 100 ? 100 : x 

let volume = varx / 100;

//reset min to 0 in case of glitches
if (isNaN(volume)) { 
  volume= 0.1;
}

//convert it to a string first, and then run parseFloat
music.volume = parseFloat(volume.toString());

}

【讨论】：