移动端 h5 ios不能自动播放音乐的问题:

38次阅读

共计 633 个字符,预计需要花费 2 分钟才能阅读完成。

如果我们想要在一个页面自动播放背景音乐或是其他音频,在真机上往往需要使用一些其他方法才可以,比如 ios 是没办法调用 audio.play() 事件直接调用,非得添加手动点击事件才可以。接下来就说说我在项目里遇到的困难和解决办法. 情况 1、如是在单独的 h5 页面,无路由,这种情况就必须加个引导按钮点击它,或是在页面全局设置一个点击事件 one,当用户第一次且仅第一次碰到页面就播放,除此之外别无他法。情况 2、如果是当用户使用 hash 或者有路由跳转的情况,可以使用在跳转页添加全局 audio 对象的方式来控制。这里使用 vue 举例:首先可在 router/index.js 里设置 window.audio=null, 在跳转前的页面 new 一个 video 并将此对象赋予 window.audio,然后即可在下一个页面使用 audio 对象。代码:/router/index.js/window.bgMusic=null;
/ 跳转页面 跳转事件 /const audio = new Audio();audio.addEventListener(‘canplay’, () => {audio.play()});audio.loop = true;audio.src = mathBgVoice;audio.load();bgMusic = audio;this.$router.replace(‘math_graduation’)
这样处理以后,在跳转页面先寻找播放时机,等跳转到播放音乐的页面即可实现‘自动播放背景音乐’的功能。

正文完
 0