多個html5音頻元素jquery錯誤

我寫了一些jquery代碼，當單擊多個音頻元素的div時播放聲音。該代碼似乎工作（可能不是最複雜的方式），但我在控制檯中出現以下錯誤。多個html5音頻元素jquery錯誤

「app.js：152未捕獲（承諾）DOMException：play（）請求被新的加載請求中斷。」

我只是想知道這可能會導致什麼潛在的問題，以及如何擺脫這個錯誤的任何指針？

$('.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>

來源

2017-08-15 CalAlt

多個html5音頻元素jquery錯誤

回答

相關問題