erreur de lecteur audio HTML5: "La double valeur fournie est non finie"

Question

la page sur THIS a avoir fait un "gestionnaire" lecteur audio HTML personnalisé 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> 

J'ai écrit ce petit script lier le joueur réel à la « poignée »:

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

Lorsque j'utilise l'entrée de gamme de volume je reçois cette erreur: « Uncaught TypeError: Impossible de définir la propriété « volume » sur « HTMLMediaE lement ': La double valeur fournie est non-finie. "

Quelle est sa cause?

Answer 1

Votre argument volume a été en fait un événement:

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

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