Issue: the volume slider restarts playback after it's been started at least once. This is mostly working as intended except for the volume slider. After 'Play' is run and the audio plays, click 'Stop'. Now drag the volume slider. The audio starts to play again when it shouldn't. I'm a JS newbie and hopefully it's just a syntax issue. Thoughts? Thanks in advance!
var sound01 = new Howl({
src: ['https://viewescape.com/audio/3secLoop_n.wav'],
volume: 0.2,
loop: true,
});
function playAudio() {
if(play.innerHTML=="Play")
{
sound01.volume(0.2);
sound01.stop();
sound01.play();
sound01.fade(0, sound01.volume(), 500);
play.innerHTML="Stop";
}
else{
sound01.fade(sound01.volume(), 0, 500);
play.innerHTML="Play";
sound01.once('fade', function(){
sound01.stop;
});
}
}
function showValue(newValue) {
document.getElementById('rangeAudio').innerHTML=newValue;
sound01.volume(newValue);
}<script src="https://viewescape.com/test_howler/dist/howler.js"></script>
<html>
<head>
<title>Howler test drive</title>
<meta charset="UTF-8">
</head>
<body>
<button id="play" onclick="playAudio();">Play</button><br>
<input type="range" min="0" max="1" value="0.2" step="0.05" onchange="showValue(this.value)" oninput="showValue(this.value)"/>
<input type="hidden" id="rangeAudio" value="0.2"><br>
</body>
</html>