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

Question

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="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>

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

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?

Answer 1

Your volume argument was in fact an event:

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

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

Answer 2

You have to divide the value by 100 for the html5 audio.volume method.

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

Answer 3

This problem is happen to be not related to parseFloat or the provided value if you try to set the volume or any property like currentTime,.. to NAN you will get the same error so the simple solution is to check width isNaN()

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

Answer 4

Taking a few responses here and showing what worked for me. In short you have to create some exceptions for out of bounds values that sometime get mysteriously set, and then convert it to a string to prepare final conversion into a float. I don't know why this works, but it does.

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

}