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?

Continental

Where does the volume variable get defined? Since you just bind setVolume to the element, and nothing further, volume is probaly undefined inside the handler. – Superconductivity

@Shilly: that is all the code. – Continental

Hence I'm asking, where in the code is the part that determines what value 'volume' has? I'm expecting something like music.volume = this.val(); since nothing shown sets the value of volume to the value of the rngVolume slider. – Superconductivity

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/

Christa

Volume isn't even defined, Why is it a double? (Which isn't even used by that name in JS, since all numbers are 'doubles' since everythings a 64bit float in JS) – Superconductivity

Much better, but might have to parseFloat() it again. :) – Superconductivity

Hmm... this isn't working for me :-\ Getting same error on a specific VPAID: "Ad Error. spotx JS VPAID says Failed to set the ‘volume’ property on ‘HTMLMediaElement’: The provided double value is non-finite" – Insanitary

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

Disputable

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

Consolidate

This is the only solution that works for me. However it only works when I set it to a static number. When I try to set the variable dynamically I'm back to the error. – Glutathione

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

} 

Impasto

Answer 5

I have solved this issue actually when u read the error properly the problem is with the argument actually default value range of audio tag is [0,1] so when u set the value of the slider so if it's of range [0,1] then it's ok but if u take your min to max value from [0,100] then u need to convert which u can use this my error resolve after this :

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

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

Twoedged

Answer 6

I had a similar problem where I was using a variable as a volume in MediaElementJS player instead of using a concrete number.

I added a "defer" tag to my JS initialising phase in head which solved my problem.

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

Before this, the volume as looking for a variable inside body that wasnt yet setup. i.e. NaN or undefined would be logged in console. By adding defer tag, this force JS to be loaded after body or DOM is setup.

My error of NaN came because of my habit of using all script tag in head section for clean asthestic instead of using at the last part of body. 'Defer' acheives the same thing while still remaining inside head.

Mosera