前言

最近帮别人写一些小网站时候需要用到自动播放音乐，自动播放背景音乐能够给用户带来更加沉浸式的体验。但是，由于浏览器在不同设备上针对自动播放有各自的限制，就需要我们灵活地使用不同方法来实现自动播放。这里将介绍几种常见的自动播放音乐实现方法，并分析其适用场景和优缺点。

方法一：使用 <video> 标签播放音频（鸡肋）

借助 HTML5 的 <video> 标签，我们可以实现音频文件的自动播放。虽然 <video> 标签主要用于播放视频内容，但它同样支持纯音频播放。我们可以通过 controls="controls"、autoplay="true" 等属性实现自动播放，并设置 display: none 隐藏视频控件，让播放器不可见。

<video autoplay="true" id="myVideo" style="display: none;" name="media">
    <source src="你的音频文件路径.mp3" type="audio/mpeg">
</video>

• 优点：这种方法具有良好的兼容性，且可以直接使用 HTML5 的内置功能。
• 缺点：由于浏览器自动播放策略的限制，在某些情况下（尤其是移动端或无用户交互的页面加载），可能会被浏览器自动禁用。

方法二：使用 <audio> 标签播放背景音乐（鸡肋）

HTML5 提供的 <audio> 标签是专门用于音频播放的标签，相比 <video> 标签，代码更加简洁。设置 autoplay、preload 和 loop 属性后，可以实现自动播放、音频预加载和循环播放。

<audio id="bgmusic" src="你的音频文件路径.mp3" autoplay preload loop></audio>

• 优点：结构清晰，使用简单，适合大部分场景。
• 缺点：类似 <video> 标签，浏览器可能会在无用户操作的情况下禁止自动播放。为了确保兼容性，建议在初次用户交互（例如点击）时触发播放。

方法三：微信内嵌网页的自动播放（有点效果）

在微信中嵌入网页时，可以利用微信的 JavaScript SDK，实现自动播放背景音乐。使用 wx.config 配置微信环境，并在 wx.ready 回调中调用音频播放功能即可。

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
<script>
wx.config({
    debug: false,
    appId: '',       // 微信公众号的AppId
    timestamp: 1,    // 时间戳
    nonceStr: '',    // 随机字符串
    signature: '',   // 签名
    jsApiList: []
});

wx.ready(function () {
    document.getElementById("bgmusic").play();
});
</script>

• 适用场景：此方法专用于微信内嵌网页的音频自动播放，能够绕过微信的播放限制。
• 注意：仅在特定的微信场景中有效，其他平台（如浏览器直接访问）可能不支持。

方法四：使用 Web Audio API 进行自动播放控制（不要开IDM的拦截就无敌）

当需要更强的灵活性时，可以使用 Web Audio API 实现自动播放。通过 AudioContext 创建音频上下文，利用 XMLHttpRequest 请求音频文件并缓冲。这样不仅可以手动控制播放，还能实现更复杂的音频操作。

var context = new AudioContext();
var source = context.createBufferSource();
var xhr = new XMLHttpRequest();

xhr.open('GET', '你的音频文件路径.mp3', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function () {
    context.decodeAudioData(xhr.response, function (buffer) {
        source.buffer = buffer;
        source.connect(context.destination);
        source.start(0); // 从头开始播放
    });
};

xhr.send();

• 代码说明：

  • AudioContext：用于创建音频上下文，使我们能够控制音频的播放与暂停。
  • createBufferSource：创建音频缓冲区，用于存储和管理音频数据。
  • decodeAudioData：解码音频文件后，将其分配给缓冲区，以便进一步控制。
• 优点：适用于需要更高控制的场景，比如音量调整、播放暂停控制等。
• 缺点：在没有用户交互的情况下，部分设备和浏览器可能会阻止 AudioContext 的自动播放。建议在用户首次交互时触发。

其他

另外，在苹果的浏览器上上面几种方法总是失效，所以只能在用户首次交互时触发，但是也没关系，我们可以通过一个遮罩来解决用户体验感，比如设计一个爱心形状的遮罩，上面写上“开启”二字，可以看我另外一篇文章

然后触发本文的方法四，别的不知道可不可以，我用的方法四成功了，如果有问题欢迎评论沟通

版权属于：不冷

本文链接：https://www.buleng.xyz/archives/230/

转载时须注明出处及本声明