javascript Audio 對象與 HTML5 Audio 標簽

Question

最近在一個項目中，當我加載一個聲音時

var myAudio = new Audio("myAudio.mp3");
myAudio.play();

除非打開對話（即警報，確認），否則它播放得很好。 但是，當我嘗試在 html 中添加音頻標簽時

<audio id="audio1">
    <source src="alarm.mp3" type="audio/mpeg" />
</audio>

並使用

var myAudio1 = document.getElementById("audio1");
myAudio1.play()

打開對話后，它繼續播放。 有人知道為什么是這樣嗎？ 更一般地說，這兩種播放聲音的方式有什么區別？

Answer 1

根據 Mozilla 上的這個 wiki 條目<audio>和new Audio()應該是相同的，但在實踐中看起來並非如此。 每當我需要在 JavaScript 中創建音頻對象時，我實際上只是創建一個<audio>元素，如下所示：

var audio = document.createElement('audio');

這實際上創建了一個音頻元素，您可以像在頁面的 HTML 中聲明的<audio>元素一樣使用它。

要使用此技術重新創建示例，請執行以下操作：

var audio = document.createElement('audio');
audio.src = 'alarm.mp3'
audio.play();

Answer 2

JavaScript 在警報或確認框期間停止。

您不能同時運行代碼並顯示alert() 、 confirm()或prompt() ，它實際上等待用戶對此進行輸入，這是 JavaScript 的核心功能。

我假設這就是完全在 JavaScript 范圍內播放的音頻文件這樣做的原因。 相比之下，即使打開了 JavaScript 警報/確認/提示，Flash 視頻剪輯或 HTML5 音頻/視頻也會繼續播放。

至於哪種方法更好，那看你自己了。 使用內置於 alert/confirm/prompt 中的 JavaScript 做任何事情都非常過時，您可以使用 jQuery UI 等制作更好看的提示。

如果頁面上有很多動態內容，或者在需要觸發之前查看背景緩沖音頻等等，那么 JavaScript 可能是更明智的處理方式。

如果屏幕上實際上只有一個玩家，那么沒有理由不輸入 HTML 代碼。 雖然現在不太可能影響任何人，但在沒有理由的情況下嚴重依賴 JavaScript 仍然是不好的做法。

Answer 3

我從網上的幾個答案中提出了以下功能。

function playAudio(url){
  var audio = document.createElement('audio');
  audio.src = url;
  audio.style.display = "none"; //added to fix ios issue
  audio.autoplay = false; //avoid the user has not interacted with your page issue
  audio.onended = function(){
    audio.remove(); //remove after playing to clean the Dom
  };
  document.body.appendChild(audio);
}

Answer 4

如果您將創建 - 那么您將在 ios 上遇到問題，因為它甚至顯示您將設置 width:0px

Answer 5

var myAudio = new Audio("myAudio.mp3"); 更快，因為它不與 DOM 交互。

如果您使用多個音頻和/或不需要用戶與播放器控件交互，您應該明確選擇不涉及 DOM 的new Audio() 。

Answer 6

首先讓我回答一下它們之間的區別。 html 中的audio標簽和 js 中的new audio對象，如果有差異是微妙的和無關緊要的。 他們實際上做同樣的事情。 如果您只想在網頁中包含音頻，那么使用 html 標簽似乎是合適和推薦的。 如果您希望在用戶進行交互時播放音頻，那么 javascript Audio 對象似乎很合適並推薦使用。 例如; document.querySelector("button).onclick=()=>{let audio=new Audio(audio url); audio.play;

除此之外，這是 javascript 的主要目的。

現在，當您使用 html 音頻標簽時，對話框打開時音頻仍然播放的原因是因為瀏覽器首先加載您的 html 文件，執行文件的內容，直到遇到 html 文件中的script標簽，然后也加載 javascript 文件。 我想說的是，即使在腳本加載之前，瀏覽器也已經讀取了音頻標簽。 Javascript 在遇到alert() 、 prompt()或confirm時暫停。 因此“在打開警報后播放良好”。 (•‿•)。