vue不同页面切换,背景音乐连续播放不间断

最近遇到了这样一个需求，就是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不同页面切换,背景音乐连续播放不间断相关推荐

白鹭引擎解决微信小游戏切换背景音乐无法播放的问题。
白鹭引擎版本:5.2.8 描述:白鹭引擎解决微信小游戏切换背景音乐无法播放的问题. main.ts文件中找到如下函数,增加上您的音频对象. egret.lifecycle.onResume = () ...
html音乐自动播放暂停js,JS实现html页面切换背景音乐不间断网页跳转背景音乐不停止播放...
我们做项目的时候可能会用到需要在整个网站中添加背景音乐. 但如果仅在页面中添加BGSOUND标签来播放音乐的话,当页面切换时,背景音乐就会重新加载,而达不到连贯播放的效果. 为了解决这个问题,我们最常 ...
ios微信下vue项目组件切换并自动播放音频的解决方案
最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页和结束页面 ,答题页关于每种 ...
html将div标签添加背景音乐,html页面加上背景音乐自动播放
0.基本配置图片 music.gif music_no.png music_off.png 1.css内容 #audio_btn { position: fixed; right: 8px; top ...
音乐在html中连续播放,怎么让PPT中背景音乐在多个页面中连续播放
使用PPT幻灯片,有时我们给幻灯片添加了背景音乐,使PPT的效果更好,更能渲染会场的气氛.以下是学习啦小编为您带来的关于PPT中背景音乐在多个页面中连续播放,希望对您有所帮助. PPT中背景音乐在多个 ...
HTML5中多页面实现背景音乐的连续播放
在单个页面中插入背景音乐,当跳转到其他页面时,背景音乐就没了,此时若在其他页面添加相同的audio控件,那么跳转后音乐会重新播放:因此想办法让他能够在跳转后能够继续播放此音乐: 新建一个music.h ...
前端页面 h5使用vue搭建带播放列表切换的音频播放器 audio
一个h5的音频播放器,播放列表与播放器上下首切换样式效果对应起来. 五秒后自动收缩形成挂件(不可移动).点击播放器图片即可展开.收起. audio.js audio.css 资源下载详细 ...
html 音乐能连续播放吗,音乐在不同HTML页面的连续播放问题
原则上不同的页面,资源重新加载,音乐的播放会被重置. 要实现音乐的连续播放,可以尝试使用如下的一些方法: 1. 主页面使用frame, 实际上是隐藏了music.html,只显示index.html, ...
音乐在不同HTML页面的连续播放问题
原则上不同的页面,资源重新加载,音乐的播放会被重置. 要实现音乐的连续播放,可以尝试使用如下的一些方法: 1. 主页面使用frame, <html> <frameset cols=& ...

vue不同页面切换,背景音乐连续播放不间断

vue不同页面切换,背景音乐连续播放不间断相关推荐

最新文章

热门文章