Несколько html5 аудио элементов Ошибка Jquery

Question

Я написал некоторый код Jquery, который воспроизводит звук при нажатии на div для нескольких аудиоэлементов. Код, кажется, работает (вероятно, не самым изощренным способом), но я получаю следующую ошибку в консоли.

"app.js: 152 Uncaught (в обещании) DOMException: запрос play() был прерван новым запросом загрузки."

Мне просто интересно, какие потенциальные проблемы это может вызвать и какие-либо указатели о том, как избавиться от этой ошибки?

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>

Answer 1

Вызов .pause() перед звонком .load() а также .play()см., что динамически изменяющееся видео дает запрос play(), прерванный новым запросом загрузки.