[英]Why does audio not play in javascript
我想在我的网站上添加背景音乐。 我试过这个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,但是当我打开网站时,声音没有播放。 你能帮我么?
您需要在 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>
有一个名为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
只需使用带有自动播放属性的 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 在另一个答案中使用的页面播放/暂停的其他位置设置一个按钮。
如果你已经这样做了:
var sound = new Audio('sounds/tom-3.mp3');
sound.play();
这在我的情况下不起作用,所以我这样做了:
var sound = new Audio('sounds\\\tom-3.mp3');
sound.play();
现代浏览器将拒绝在没有用户交互的情况下播放任何声音。 如果从用户事件(如 onclick)开始,您的代码应该可以正常工作。
JavaScript 代码中列出的所有音频文件必须命名为 HTTPS,而不是 HTTP。 显然,这意味着您链接到(包括您的)的网站必须是安全的。 也就是说,您需要拥有安全证书,并确保它已被激活。 这是 Chrome 的安全问题。 我希望这会有所帮助。 = -)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.