javascript实现网页背景音乐自动播放

最新推荐文章于 2025-05-24 09:52:57 发布

源代码大师

最新推荐文章于 2025-05-24 09:52:57 发布

阅读量5.7k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： JavaScript实战教程文章标签： javascript 开发语言 ecmascript

不予转载，严禁转载，违者必纠。

本文链接：https://blog.csdn.net/it_xiangqiang/article/details/134151729

JavaScript实战教程专栏收录该内容

949 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

这篇博客介绍了如何在HTML中添加音乐元素并利用JavaScript实现网页背景音乐的自动播放。尽管存在浏览器自动播放限制，但通过在网页加载后调用音频元素的play()方法，仍能实现这一功能。同时，为了防止页面加载延迟，建议将JavaScript代码置于底部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript实现网页背景音乐自动播放

可以使用HTML5的标签结合JavaScript代码实现网页背景音乐自动播放:

在HTML文档中添加一个标签，指定音乐文件路径和自动播放属性。

<audio src="music.mp3" autoplay></audio>

在JavaScript中获取该元素，设置其音量为0（静音）或一个合适的值。

var audio = document.getElementsByTagName("audio")[0];
audio.volume = 0.5; //设置音量为50%

在网页加载完毕后，调用元素的play()方法，开始播放音乐。

window.onload = function() {
  audio.play();
}

完整代码如下：

<audio src="music.mp3" autoplay></audio>

<script>
  var audio = document.getElementsByTagName("audio")[0];
  audio.volume = 0.5; //设置音量为50%
  window.onload = function() {
    audio.play();

了解本专栏

超级会员免费看