CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-audio
cal
cal

Reputation: 1873

multiple html5 audio elements Jquery error

I've written some Jquery code that plays a sound when a div is clicked for multiple audio elements. The code seems to work (probably not in the most sophisticated way) but I'm getting the following error in the console.

"app.js:152 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request."

I'm just wondering what potential problems this could cause and any pointers on how to get rid of this error?

JS

$('.speaker').on("click", function() {
    var speakertriggered = $(this);
    var speakerdata = speakertriggered.data('speaker');
    var audioelement = $('#' + speakerdata);
    var getaudio = $(audioelement)[0];

    $(speakertriggered).addClass('speakerplay');
    getaudio.load();
    getaudio.play();

    $(audioelement).on('ended', function() {
        $(speakertriggered).removeClass('speakerplay');
    });
});

HTML

<div class="speaker" data-speaker="left-player"></div>

<audio id="left-player">
    <source src="assets/sounds/left.mp3" type="audio/mp3" />
    <source src="assets/sounds/left.mp3" type="audio/ogg" />
</audio>



<div class="speaker" data-speaker="right-player"></div>

<audio id="right-player">
    <source src="assets/sounds/right.mp3" type="audio/mp3" />
    <source src="assets/sounds/right.mp3" type="audio/ogg" />
</audio>

Upvotes: 1

Views: 611

Answers (1)

guest271314
guest271314

Reputation: 1

Call .pause() before calling .load() and .play(), see dynamically changing video gives the play() request was interrupted by a new load request

Upvotes: 1

Related Questions