移动端 h5 ios不能自动播放音乐的问题:
如果我们想要在一个页面自动播放背景音乐或是其他音频,比如ios是没办法调用audio.play()事件直接调用,非得添加手动点击事件才可以。接下来就说说我在项目里遇到的困难和解决办法.
情况1、我们知道安卓是可以直接调用音频的play事件的,ios不行。如是在单独的h5页面,无路由,这种情况就必须加个引导按钮点击它,或是在页面全局设置一个点击事件one,当用户第一次且仅第一次碰到页面就播放。这里用vue距举例:
<template> <view v-on:touchstart.once="playBgMusic()"></view> </template> methods: { playBgMusic () { let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isiOS) this.bgMusic.play(); } } mounted(){ this.bgMusic = new Audio(); this.bgMusic.loop = true; this.bgMusic.src = require('xxx.mp3'); this.bgMusic.load(); this.bgMusic.play(); }
情况2、如果是当用户使用hash或者有路由跳转的情况,可以使用在跳转页添加全局audio对象的方式来控制。这里使用vue举例:首先可在router/index.js里设置window.audio=null,在跳转前的页面new一个video 并将此对象赋予window.audio,然后即可在下一个页面使用audio对象。代码:
/*router/index.js*/ window.bgMusic=null; /*跳转页面 router/beforeGo.js 跳转事件*/ <view @click="goTo()">跳转到自动播放音乐的页面</view> methods: { goTo () { const audio = new Audio(); audio.addEventListener('canplay', () => {audio.play()}); audio.loop = true; audio.src = mathBgVoice; audio.load(); bgMusic = audio; this.$router.replace('自动播放音乐的页面路由') } }
情况3:如果你的业务主要是在微信上,那么可以使用以下代码,可实现在微信浏览器中iOS和安卓设备中自动播放音频的效果:
var play = function() { document.removeEventListener("WeixinJSBridgeReady", play); document.removeEventListener("YixinJSBridgeReady", play); audioCtx.play(); }; document.addEventListener("WeixinJSBridgeReady",play, false); document.addEventListener('YixinJSBridgeReady', play, false);
这样处理以后,在跳转页面先寻找播放时机,等跳转到播放音乐的页面即可实现‘自动播放背景音乐’的功能。
相关推荐
郴州小程序 2020-06-13
nicepainkiller 2020-03-28
waterv 2020-03-07
owhile 2020-02-23
pythonclass 2020-01-23
knightwatch 2019-12-30
waterv 2020-01-08
VFCSDN 2019-12-30
cbao 2019-12-21
LazySleep 2019-12-09
MaureenChen 2019-12-09
simplehap 2019-12-05
颤抖吧腿子 2019-12-05
Bougie 2019-11-12
QCkiss 2019-11-08