Search code examples
javascriptjqueryaudiohowler.js

Howler.js - pause method only Muting howls, not actually Pausing them


This is part of an ongoing question: triggering files from an array/for-loop

I'm having an issue with Howls not actually pausing, but in effect 'muting'. The howls, when click-paused do mute but continue running silently. I've tried using .stop() but am getting the same result.

I am using onend property which works and shows that .pause() method isn't working. When pause/play is clicked repeatedly it all gets pretty messy!

Before the howls and related control buttons were scripted from an array the pause worked perfectly. It's since the array was used that the pause method has stopped working properly.

Here's a: fiddle of the current pause issue (console logs are working there)

Here's the js:

var sounds = ['sound1', 'sound2'];
var howls = {};
sounds.forEach(function(sound){
    howls[sound] = new Howl({
        urls: ['http://powellian.com/assets/audio/' + sound + '.mp3', 'http://powellian.com/assets/audio/' + sound + '.ogg'],
        volume: 1,
        onplay: function() {
            console.log('PLAYING: ' + sound);
            $('#' + sound).removeClass('static').addClass('PLAYING');
            $('#' + sound + ' span.play').addClass('hide');
            $('#' + sound + ' span.pause').removeClass('hide');
        },
        onpause: function() {
            console.log('PAUSED: ' + sound);
            $('#' + sound).removeClass('PLAYING').addClass('PAUSED');
            $('#' + sound + ' span.play').removeClass('hide');
            $('#' + sound + ' span.pause').addClass('hide');
        },
        onend: function() {
            console.log('ENDED: ' + sound);
            $('#' + sound).removeClass().addClass('static');
            $('#' + sound + ' span.play').removeClass('hide');
            $('#' + sound + ' span.pause').addClass('hide');
        }
    });

    // PLAY btn
    $('#' + sound + ' span.play').click(function () {
        howls[sound].play();
    });
    // PAUSE btn
    $('#' + sound + ' span.pause').click(function () {
        howls[sound].pause();
    });
});  

For the record this is using Howler v1.1.29. Tried it with v2.0 but that won't work at all for various other reasons (e.g. won't load the array - I don't need 2.0 but would be willing to run tests with this issue if it helps at all).

Any help would be much appreciated and thanks in advance.


Solution

  • Fixed - my bad but with v2.0 I didn't realise urls needed to be changed to src so did that and it's all working fine.

    On local version I added another audio file to the array and pausing and onend all work perfectly. Thanks for your advice!

    Here's an updated fiddle using 2.0.0-beta14