如果我們想要在一個頁面自動播放背景音樂或是其他音訊,比如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);
這樣處理以後,在跳轉頁面先尋找播放時機,等跳轉到播放音樂的頁面即可實現‘自動播放背景音樂’的功能。