最近遇到了這樣一個(gè)需求，就是h5不同頁(yè)面之間跳轉(zhuǎn)，要求bgm連續(xù)播放不間斷。 不知道大家是怎么處理的呢?
我之前想的是，在每個(gè)頁(yè)面都寫一個(gè)audio標(biāo)簽，然后切換頁(yè)面的時(shí)候存一下當(dāng)前音樂(lè)的播放進(jìn)度，到下一個(gè)頁(yè)面再給音樂(lè)寫入開(kāi)始時(shí)間。

<template><audio loop="loop" preload="preload" id="bgmusic" controls="controls" ref="MusicPlay" style="display: none;"><source src="xxx.mp3" type="audio/mpeg"></audio><span @click="goIndex"></span> </template><script> mounted(){this.soundBgm = document.getElementById("bgmusic");//判斷本地是否有存儲(chǔ)過(guò)音頻播放時(shí)間if(sessionStorage.bgmstart == 'true'){this.current = 'musicplay';if (sessionStorage.bgmTime == null) {//若沒(méi)有時(shí)，從頭自動(dòng)播放this.soundBgm.currentTime = 0;this.soundBgm.play();} else {//若有存儲(chǔ)的則，取出本地存儲(chǔ)的音頻播放的暫停時(shí)間var curTime = window.sessionStorage.getItem("bgmTime");sessionStorage.setItem('bgmPlay', this.soundBgm.bgmPlay);//從暫停時(shí)間開(kāi)始接著播放this.soundBgm.currentTime += curTime;this.soundBgm.play();}}},methods:{//頁(yè)面跳轉(zhuǎn)時(shí)將本頁(yè)面音頻最后截至?xí)r間存儲(chǔ)下來(lái)fun() {this.soundBgm.pause();sessionStorage.setItem('bgmPlay', this.soundBgm.bgmPlay);sessionStorage.setItem('bgmTime', this.soundBgm.bgmPlay ? this.soundBgm.currentTime + this.soundBgm.context.currentTime - this.soundBgm.startTime : this.soundBgm.currentTime);},// 跳轉(zhuǎn)goIndex() {this.fun();this.$router.push({path: `/xxx`,});}}</script>

但是這樣第一是不同頁(yè)面切換的時(shí)候，音樂(lè)有很明顯的卡頓。第二就是iOS設(shè)置currentTime沒(méi)反應(yīng)，不知道為什么一直是0。有木有大佬可以講一下這樣為什么iOS不能適配啊（其實(shí)大家也能看出來(lái) 我這里寫的非常混亂，原生夾雜vue…真的是很暈了）

后來(lái)請(qǐng)教了一個(gè)大佬指點(diǎn)了一下 ，正確的操作應(yīng)該是 在app.vue里設(shè)置全局audio

<template><div id="app"><router-view /><audioloop="loop"preload="preload"id="bgmusic"controls="controls"ref="MusicPlay"style="display: none;"><sourcesrc="xxx.mp3"type="audio/mpeg"/></audio></div> </template>

其他頁(yè)面直接用this.$parent去調(diào)用然后播放

this.$parent.$refs.MusicPlay.play(); this.$parent.$refs.MusicPlay.pause();

按照邏輯功能的不同,在合適的位置寫入即可

總結(jié)

以上是生活随笔為你收集整理的vue不同页面切换,背景音乐连续播放不间断的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。