為什么在 javascript 中無法播放音頻

Question

我想在我的網站上添加背景音樂。 我試過這個JS代碼：

var sound;
function initialAudio() {
    'use strict';
    sound = new Audio();
    sound.src = '../audio/test.mp3';
    sound.loop = true;
    sound.play();
}
window.addEventListener("load", initialAudio);

我已經鏈接了JS和HTML，但是當我打開網站時，聲音沒有播放。 你能幫我么？

Answer 1

您需要在 html 中使用音頻元素，這是如何做到的。

<!DOCTYPE html>
<html>
<body>

<audio id="audioContainer">
  <source src="myMp3.mp3" type="audio/mpeg">
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playMp3()" type="button">Play Mp3</button>
<button onclick="pauseMp3()" type="button">Pause Mp3</button> 

<script>
const audioContainer = document.getElementById("audioContainer"); 

function playMp3() { 
  audioContainer.play(); 
} 

function pauseMp3() { 
  audioContainer.pause(); 
} 
</script>

</body>
</html>

Answer 2

有一個名為HOWLER.JS 的javascript 音頻庫，它非常易於使用。 包含此腳本文件：

<script src = "https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.js"></script>

將此代碼片段添加到您的 html：

 var sound = new Howl({ src: ['../audio/test.mp3'], autoplay: true, loop: true, volume: 0.5, }); sound.play();

更多信息請訪問： HOWLER.JS DOCS

Answer 3

只需使用帶有自動播放屬性的 HTML5 音頻元素即可。 正如評論中提到的，瀏覽器對autoplay支持很薄弱（有充分的理由），但它在 Firefox 中對我有用。

 <audio autoplay loop> <source src="http://soundbible.com/grab.php?id=464&type=wav"></source> </audio>

如果您希望用戶能夠暫停音頻，只需添加一個controls屬性：

 <audio autoplay controls loop> <source src="http://soundbible.com/grab.php?id=464&type=wav"></source> </audio>

您還可以使用 JS 在另一個答案中使用的頁面播放/暫停的其他位置設置一個按鈕。

Answer 4

如果你已經這樣做了：

var sound = new Audio('sounds/tom-3.mp3');

sound.play();

這在我的情況下不起作用，所以我這樣做了：

 var sound = new Audio('sounds\\\tom-3.mp3');

 sound.play();

Answer 5

現代瀏覽器將拒絕在沒有用戶交互的情況下播放任何聲音。 如果從用戶事件（如 onclick）開始，您的代碼應該可以正常工作。

Answer 6

JavaScript 代碼中列出的所有音頻文件必須命名為 HTTPS，而不是 HTTP。 顯然，這意味着您鏈接到（包括您的）的網站必須是安全的。 也就是說，您需要擁有安全證書，並確保它已被激活。 這是 Chrome 的安全問題。 我希望這會有所幫助。 = -)

為什么在 javascript 中無法播放音頻

問題描述

5 個解決方案

解決方案1
1 已采納 2018-12-31 14:13:06

解決方案2
1 2019-01-01 11:59:08

解決方案3
0 2018-12-31 17:07:18

解決方案4
0 2021-05-07 06:45:08

解決方案5
0 2021-12-02 14:38:54

解決方案6
0 2022-09-17 20:07:18

為什么在 javascript 中無法播放音頻

問題描述

5 個解決方案

解決方案1 1 已采納 2018-12-31 14:13:06

解決方案2 1 2019-01-01 11:59:08

解決方案3 0 2018-12-31 17:07:18

解決方案4 0 2021-05-07 06:45:08

解決方案5 0 2021-12-02 14:38:54

解決方案6 0 2022-09-17 20:07:18

解決方案1
1 已采納 2018-12-31 14:13:06

解決方案2
1 2019-01-01 11:59:08

解決方案3
0 2018-12-31 17:07:18

解決方案4
0 2021-05-07 06:45:08

解決方案5
0 2021-12-02 14:38:54

解決方案6
0 2022-09-17 20:07:18