JavaEar 专注于收集分享传播有价值的技术资料

HTML5 audio player error: "The provided double value is non-finite"

On THIS page a have made a custom HTML 5 audio player "handler":

<div class="default-player">
    <audio controls="" autoplay="" name="media" id="audio_player">
        <source src="" type="audio/mpeg">

<div id="audioplayer">
    <button id="pButton" class="pause"></button>
    <div id="timeline">
        <div id="playhead"></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 class="current-piece">
        <div class="now-playing">Now playing:</div>
        <script src=""></script>

I have written this small script to bind the actual player to the "handle":

function radioPlayer(){

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

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

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

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

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



When I use the volume range input I get this error: "Uncaught TypeError: Failed to set the 'volume' property on 'HTMLMediaElement': The provided double value is non-finite."

What is its cause?


  1. Your volume argument was in fact an event:

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