使用JavaScript更改音頻src時無法播放Chrome網絡音頻

Question

我有一個可以在鼠標移動時播放聲音的代碼。 現在，它只有一個聲音用於左，另一個聲音用於右。 但是當我每次鼠標移動時使用隨機方法從數組中使用不同的聲音時，音頻不會播放。 基本上我將音頻新的聲音文件索引設置為音頻src，但是Chrome無法播放音頻。

這是演示鏈接： http : //angeloplessas.com/flame/6/index5.html

這是鏈接，用於處理左右兩側的每種聲音http://angeloplessas.com/flame/6/index2.html

function getRandomSound() {
  var sounds = ["sound/New/new3.mp3", "sound/New/new4.mp3", "sound/New/new5.mp3", "sound/New/new6.mp3", "sound/New/new7.mp3", "sound/New/new8.mp3", "sound/New/new9.mp3", "sound/New/new10.mp3", "sound/left.mp3", "sound/right.mp3"];
  var indexLeft = Math.floor(Math.random() * (sounds.length));
  var indexRight = Math.floor(Math.random() * (sounds.length));
  var audioElementLeft = document.getElementById('left-audio');
  audioElementLeft.setAttribute('src', sounds[indexLeft]);
  var audioElementRight = document.getElementById('right-audio');
  audioElementRight.setAttribute('src', sounds[indexRight]);
}

我在鼠標移動功能中使用getRandomSound() 。

我收到一個Uncaught (in promise) DOMException錯誤

預期結果應為左右揚聲器播放音頻。

Answer 1

在不同情況下，您可能會遇到Uncaught (in promise) DOMException錯誤，通常是：

• 音頻文件在加載之前已播放（音頻數據異步加載）。 在這種情況下，您可以預加載音頻文件，並在完全加載后使用audio.oncanplaythrough事件播放該聲音（ https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ canplaythrough_event ）
• 音頻文件的播放沒有用戶交互（在頁面加載開始時您不能手動播放任何聲音）。 請參閱autoplay屬性（ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Attributes ）以自動開始播放聲音