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

    xiaoxiao2023-11-14  151

    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(); });
    最新回复(0)