为什么音频无法在 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

只需使用具有自动播放属性的 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 在页面的其他地方设置按钮 play/pause，如另一个答案中所用。

Answer 3

有一个名为 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 4

如果你这样做过：

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

sound.play();

这对我来说不起作用，所以我这样做了：

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

 sound.play();

Answer 5

现代浏览器将拒绝在没有用户交互的情况下播放任何声音。如果从用户事件（如 onclick）开始，您的代码应该可以正常工作。

为什么音频无法在 javascript 中播放

Why does audio not play in javascript

html

javascript

audio

javascript-audio-api