javascript HTML5音频播放器错误:“提供的double值是非有限的”

hl0ma9xz  于 12个月前  发布在  Java
关注(0)|答案(6)|浏览(87)

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


当我使用volume range input时,我收到这个错误:“未拦截的TypeError:无法设定'HTMLMediaElement'的'volume'属性:提供的双精度浮点数值是非有限的。”
它的原因是什么?

b5buobof

b5buobof1#

你的体积论证实际上是一个事件:

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

字符串
https://jsfiddle.net/08tgr254/1/

dgiusagp

dgiusagp2#

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

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

字符串

nszi6y05

nszi6y053#

这个问题是碰巧是不相关的parseFloat或提供的值,如果你试图设置卷或任何属性,如currentTime,.. NAN你会得到同样的错误,所以简单的解决方案是检查宽度isNaN()

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

字符串

2j4z5cfb

2j4z5cfb4#

这里有几个响应,并展示了对我有效的方法。简而言之,你必须为有时会被神秘设置的越界值创建一些异常,然后将其转换为字符串,以准备最终转换为浮点数。我不知道为什么这有效,但它确实有效。

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

}

字符串

w8f9ii69

w8f9ii695#

我有一个类似的问题,我在MediaElementJS播放器中使用变量作为卷,而不是使用具体的数字。
我在我的JS初始化阶段添加了一个“defer”标签,解决了我的问题。

<script src="/JS/mejs.js" type="text/javascript" defer></script>

字符串
在此之前,卷在body中寻找尚未设置的变量。即NaN或undefined将记录在控制台中。通过添加defer标记,这将强制JS在body或DOM设置后加载。
我的NaN错误是因为我习惯在头部使用所有脚本标签来清洁asthestic,而不是在身体的最后一部分使用。

rn0zuynd

rn0zuynd6#

我已经解决了这个问题,实际上当你正确阅读错误的问题是与参数实际上默认值范围的音频标签是[0,1],所以当你设置滑块的值,所以如果它的范围[0,1],那么它的确定,但如果你把你的最小到最大值从[0,100],那么你需要转换,你可以使用这个我的错误解决后:

function volume_change() {
  var val = volumeslider.value;
  volumeshow.innerText = val;

  musicaudio.volume = val / 100;
  console.log(val / 100);
}

字符串

相关问题