多个 html5 音频元素 Jquery 错误

Question

我写了一些 Jquery 代码，当点击多个音频元素的 div 时播放声音。代码似乎有效（可能不是以最复杂的方式），但我在控制台中收到以下错误。

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

我只是想知道这可能会导致哪些潜在问题以及关于如何消除此错误的任何指示？

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()，见

多个 html5 音频元素 Jquery 错误

multiple html5 audio elements Jquery error

html

javascript

jquery

html5-audio