html5关于ios微信audio标签不支持自动播放问题的解决

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43976602/article/details/90550803

html5关于ios微信audio标签不支持自动播放问题的解决

1.标签属性介绍
src:音频地址
autoplay:音频加载完毕后自动播放。
controls:显示播放控制条。
loop:播放完毕后会重复播放。
preload:1.auto 预加载音频视频。2.metadata 只预加载音频视频元数据。 有autoplay时此属性无效。

2.js控制介绍
play()播放
pause()暂停
load()重新加载

实现代码

.html里面代码

<script src="music.js"></script>                  //调用 music.js,此时的.js在根目录下

<audio autoplay loop preload="auto" id="audio">
		<source src="music/1.mp3" type="audio/mpeg">
</audio>

music.js里面的代码

document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});
//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
document.addEventListener('touchstart', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
    }
    audioAutoPlay();
});
展开阅读全文

没有更多推荐了,返回首页