有时候某些浏览器会禁用我们的网页音乐,导致播放不了,在我们的网页中添加以下代码,用户只要触碰网页就可实现自动播放音乐效果。代码如下:
<!-- 添加自动播放音乐 -->
<!-- 这里的音乐需要引入第三方链接的音乐 -->
<bgsound src="https://hexo.51xcode.com/xiangce/yanhua02.mp3" loop="-1"/>
<audio src="https://hexo.51xcode.com/xiangce/yanhua02.mp3" controls autoplay='autoplay' loop="loop" id="bgmusic" style="display:none"></audio>
<script>
(function() {
function log(info) {
console.log(info);
// alert(info);
}
function forceSafariPlayAudio() {
audioEl.load(); // iOS 9 还需要额外的 load 一下, 否则直接 play 无效
audioEl.play(); // iOS 7/8 仅需要 play 一下
}
var audioEl = document.getElementById('bgmusic');
audioEl.addEventListener('loadstart', function() {
log('loadstart');
}, false);
audioEl.addEventListener('loadeddata', function() {
log('loadeddata');
}, false);
audioEl.addEventListener('loadedmetadata', function() {
log('loadedmetadata');
}, false);
audioEl.addEventListener('canplay', function() {
log('canplay');
}, false);
audioEl.addEventListener('play', function() {
log('play');
// 当 audio 能够播放后, 移除这个事件
window.removeEventListener('touchstart', forceSafariPlayAudio, false);
}, false);
audioEl.addEventListener('playing', function() {
log('playing');
}, false);
audioEl.addEventListener('pause', function() {
log('pause');
}, false);
// 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
// 因此我们通过一个用户交互事件来主动 play 一下 audio.
window.addEventListener('touchstart', forceSafariPlayAudio, false);
audioEl.src = "https://hexo.51xcode.com/xiangce/yanhua02.mp3";
})();
</script>
免责声明:
更多知识,请关注微信公众号“51学代码”
![](https://hexo.51xcode.com/year/07/13/a17/1.png)
![](https://img.51xcode.com/imgs/2023/04/b82b75934bf0a455.gif)
© 版权声明
THE END
- 最新
- 最热
查看全部没有评论内容