最近遇到了這樣一個需求，就是h5不同頁面之間跳轉，要求bgm連續播放不間斷。 不知道大家是怎么處理的呢?
我之前想的是，在每個頁面都寫一個audio標簽，然后切換頁面的時候存一下當前音樂的播放進度，到下一個頁面再給音樂寫入開始時間。

<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");//判斷本地是否有存儲過音頻播放時間if(sessionStorage.bgmstart == 'true'){this.current = 'musicplay';if (sessionStorage.bgmTime == null) {//若沒有時，從頭自動播放this.soundBgm.currentTime = 0;this.soundBgm.play();} else {//若有存儲的則，取出本地存儲的音頻播放的暫停時間var curTime = window.sessionStorage.getItem("bgmTime");sessionStorage.setItem('bgmPlay', this.soundBgm.bgmPlay);//從暫停時間開始接著播放this.soundBgm.currentTime += curTime;this.soundBgm.play();}}},methods:{//頁面跳轉時將本頁面音頻最后截至時間存儲下來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);},// 跳轉goIndex() {this.fun();this.$router.push({path: `/xxx`,});}}</script>

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

后來請教了一個大佬指點了一下 ，正確的操作應該是 在app.vue里設置全局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>

其他頁面直接用this.$parent去調用然后播放

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。