HTML5 audio player error: "The provided double value is non-finite"
HTML5 audio player error: "The provided double value is non-finite"
在 THIS 页面上制作了自定义 HTML 5 音频播放器 "handler":
<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>
我写了这个小脚本来将实际播放器绑定到 "handle":
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();
当我使用 音量范围输入 时,出现此错误:"Uncaught TypeError: Failed to set the 'volume' property on 'HTMLMediaElement': The provided double value is non-finite."
它的原因是什么?
您的音量参数实际上是一个事件:
function setVolume(e) {
var volume = e.target.value;
music.volume = parseFloat(volume);
}
对于 html5 audio.volume 方法,您必须将值除以 100。
function setVolume(e) {
var volume = e.target.value / 100;
music.volume = parseFloat(volume);
}
这个问题恰好与parseFloat或提供的值无关
如果您尝试将音量或任何 属性(如 currentTime,..)设置为 NAN,您将遇到相同的错误,因此简单的解决方案是检查宽度 isNaN()
function setVolume(volume) {
if (isNaN(volume)) {
volume= 0.1;
}
music.volume = parseFloat(volume);
}
在此处进行一些回复并展示对我有用的内容。简而言之,您必须为有时神秘设置的越界值创建一些异常,然后将其转换为字符串以准备最终转换为浮点数。我不知道为什么会这样,但确实如此。
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());
}
在 THIS 页面上制作了自定义 HTML 5 音频播放器 "handler":
<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>
我写了这个小脚本来将实际播放器绑定到 "handle":
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();
当我使用 音量范围输入 时,出现此错误:"Uncaught TypeError: Failed to set the 'volume' property on 'HTMLMediaElement': The provided double value is non-finite."
它的原因是什么?
您的音量参数实际上是一个事件:
function setVolume(e) {
var volume = e.target.value;
music.volume = parseFloat(volume);
}
对于 html5 audio.volume 方法,您必须将值除以 100。
function setVolume(e) {
var volume = e.target.value / 100;
music.volume = parseFloat(volume);
}
这个问题恰好与parseFloat或提供的值无关 如果您尝试将音量或任何 属性(如 currentTime,..)设置为 NAN,您将遇到相同的错误,因此简单的解决方案是检查宽度 isNaN()
function setVolume(volume) {
if (isNaN(volume)) {
volume= 0.1;
}
music.volume = parseFloat(volume);
}
在此处进行一些回复并展示对我有用的内容。简而言之,您必须为有时神秘设置的越界值创建一些异常,然后将其转换为字符串以准备最终转换为浮点数。我不知道为什么会这样,但确实如此。
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());
}