connect volume slider to player

Question

Im running a player with howler.js and trying to connect a volume slider that i can't get to work. Any help appreciated

This is what i have

<script>
function createHowl() {
var number = Math.floor((Math.random() * 14) + 1);
return new Howl({
       src:      ['audio/' + number + '.wav'],
       autoplay: false,
       loop:     false,
       volume:   1.0,
       onend:    function() {createHowl().play()}
  });
}

createHowl().play();

</script>
<input type="range" min="0" max="1" value="0" step="0.1"       onchange="showValue(this.value)" />
<span id="range">0</span>
<script type="text/javascript">
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
createHowl.volume(newValue);
}
</script>

Thanks

score 0 · Accepted Answer · answered Sep 17 '16 at 19:44

You need to assign the Howl object return by your function to a variable if you want access to it.

i've never used Howl but I don't think you want to use that onend handler.

https://jsfiddle.net/denov/ct32a3fd/1/

<script>

function createHowl() {
    var number = Math.floor((Math.random() * 14) + 1);
    return new Howl({
       src:      ['audio/' + number + '.wav'],
       autoplay: false,
       loop:     false,
       volume:   1.0
  });
}

function showValue(newValue) {
    document.getElementById('range').innerHTML=newValue;
    howl.volume(newValue);
}

var howl = createHowl();
howl.play();

</script>
<input type="range" min="0" max="1" value="0" step="0.1" onchange="showValue(this.value)" oninput="showValue(this.value)"/>
<span id="range">0</span>

Thank you ! that works . The onend basically calls the play random file again so it continues working. — dee, Sep 17 '16 at 20:02

connect volume slider to player

1 Answers1