CODEWITHSUNDEEP
jqueryhtml5-audiohowler.js
ygnsl
ygnsl

Reputation: 31

Howler JS html5 enabled, can't refresh the browser window and also can't resume the audio

I'm building a audio playing function on a site i'm working on. I've decided to use howler library to simplify things and since the audio files are pretty large i'm using the howler's html5 option to stream the file. Everything works beside these two annoying problems.

  1. Whenever i play the audio i am unable to leave the site, the site just freezes once i click on a link or try to reload the page.

  2. The audio wont resume when it is unpaused, it plays from the beginning

I've tried with two browsers (chrome/chrome mobile, edge), both seem to have the same issue

Here's the code i'm using

let player = [];
$('.g-player').each(function(){

    let id = $(this).data('id');
    player[id] = new Howl({
        src: [g.ajaxurl+'?nonce='+g.nonce+'&action=g_audio&id='+id],
        preload: true,
        format: ['flac'],
        html5: true
    });

});

$(document).on('click', '.g-player:not(.playing)', function(){
    player[$(this).data('id')].play();
    $(this).addClass('playing');
});

$(document).on('click', '.g-player.playing', function(){
    player[$(this).data('id')].pause();
    $(this).toggleClass('playing paused');
});

Both issues are resolved once i remove the "html5: true" option from the configuration. Is there a way i can keep the html5 and not experience it like that?

I've tried stopping the audio before the user leaves with "beforeunload" event but it doesn't do anything

window.addEventListener('beforeunload', function(e) {
    $.each(player, function(i, p){
        if(typeof p != 'undefined' && p != null){
            p.stop();
        }
    });
    e.preventDefault();
});

I've tried googling for a solution obviously but there seems to be no information about that issue, or atleast i was unable to find any. I don't know how else to debug or assess the situation.

Upvotes: 0

Views: 547

Answers (1)

ygnsl
ygnsl

Reputation: 31

I've managed to fix both of the issues, here's the details:

Issue no 1: So the problem was related to PHP's session locking. I had no idea about that being a thing before that so i didn't thnink mentioning the server in the original post was necessary. The issue was resolved by adding session_write_close() before ajax functions in php. Keep in mind you won't be able to write into the session after that function unless you reopen the session.

Issue no 2 The audio problem was because of me not reading the docs properly. In the Howler's docs there is said that in order to resume the audio, the play method must have an ID parameter. https://github.com/goldfire/howler.js#playspriteid

Upvotes: 0

Related Questions