html中添加背景音乐自动播放

huaan011 / 2024-01-25 / 原文

参考： https://www.runoob.com/try/try.php?filename=tryhtml5_av_prop_autoplay

https://www.mchweb.net/mcbach/1650918861981130752.html

现在的浏览器对于 audio 、video标签的页面加载时都无法自动播放，各大官方给的意见是自动播放会吵人，只有在静音的模式 muted="true" 下才可以自动播放，

有些时候我们需要添加背景音乐自动播放，此时我们可以这么处理

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h1>embed 元素</h1>
    <!-- 在 iframe 中放置任何无声音频。 -->
    <iframe src="horse.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio autoplay loop>
    <source src="horse.mp3" type="audio/mp3">
</audio>
    <!-- 
    只需在音频元素前添加一个以 .mp3 作为源并允许 =“autoplay” 的不可见 iframe。
    结果，浏览器被诱骗启动任何后续音频文件。或者自动播放未静音的视频。
     -->
</body>
</html>

可以把上面的代码复制到： https://www.runoob.com/try/try.php?filename=tryhtml5_embed3 运行测试

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<h1>embed 元素</h1>
<video src="horse.mp3" autoplay loop>
</video>
</body>
</html>