[已解决]实现页面跳转bgm连续播放

xillnote · 发表于 2020-2-13 15:46:18

您需要登录才可以下载或查看，没有账号？立即注册

x

额就像问题里面说的。。。请问怎么样才能实现，我的1.html跳转到2.html后，背景音乐能够不间断的连续播放？

最佳答案

sukiwhip

2020-2-14 21:23:57

本帖最后由 sukiwhip 于 2020-2-14 21:31 编辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cn.vuejs.org/js/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<title>test</title>
</head>
<body>
<div id="root">
<router-view></router-view>
<div id="music">
<span>模拟歌曲播放计时:</span>
<span v-text="musicTime"></span>
</div>
</div>
</body>
<template id="home">
<div>
<router-link to="/home/1">跳到页面1</router-link>
<br><br>
<router-link to="/home/2">跳到页面2</router-link>
<br><br>
<div>注意，点击后 url 很明显是有变化，路由跳转了，把这条线上面的内容自由选择咔嚓掉，就是两个单独的页面，里面路由再怎么跑自己喜欢就好了，下面的音乐计时在全局上，一点都不影响</div>
<hr>
<router-view></router-view>
</div>
</template>
<template id="one">
<div>
我是页面1
</div>
</template>
<template id="two">
<div>
我是页面2
</div>
</template>
<script>
const router = new VueRouter({
routes: [{
path: "/home",
component: {
template: "#home"
},
children: [{
path: "1",
component: {
template: "#one"
}
}, {
path: "2",
component: {
template: "#two"
}
}]
}, {
path: "*",
redirect: "/home/1"
}]
})
new Vue({
el: "#root",
router,
data() {
return {
musicTime: 0
}
},
methods: {
musicGo() {
let that = this;
setInterval(function () {
that.musicTime++
}, 1000)
}
},
mounted() {
this.musicGo()
}
})
</script>
<style>
#music {
position: fixed;
bottom: 100px;
color: #f00;
}
</style>
</html>

复制代码

直接给你个 demo，把最佳答案抱走

苏沫儿 · 发表于 2020-2-13 16:22:02

比如我在html1播放了一首歌转到html2页面接着刚刚的继续播放?

不二如是 · 发表于 2020-2-13 17:40:25

目前光是页面跳转无法实现连续播放

需要后台才可以

sukiwhip · 发表于 2020-2-14 20:03:08

用单页面刷新的框架开发前端，在框架内的路由跳转，最外层的音乐就不会被刷掉
比如用 vuejs

sukiwhip · 发表于 2020-2-14 21:23:57

本帖最后由 sukiwhip 于 2020-2-14 21:31 编辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cn.vuejs.org/js/vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<title>test</title>
</head>
<body>
<div id="root">
<router-view></router-view>
<div id="music">
<span>模拟歌曲播放计时:</span>
<span v-text="musicTime"></span>
</div>
</div>
</body>
<template id="home">
<div>
<router-link to="/home/1">跳到页面1</router-link>
<br><br>
<router-link to="/home/2">跳到页面2</router-link>
<br><br>
<div>注意，点击后 url 很明显是有变化，路由跳转了，把这条线上面的内容自由选择咔嚓掉，就是两个单独的页面，里面路由再怎么跑自己喜欢就好了，下面的音乐计时在全局上，一点都不影响</div>
<hr>
<router-view></router-view>
</div>
</template>
<template id="one">
<div>
我是页面1
</div>
</template>
<template id="two">
<div>
我是页面2
</div>
</template>
<script>
const router = new VueRouter({
routes: [{
path: "/home",
component: {
template: "#home"
},
children: [{
path: "1",
component: {
template: "#one"
}
}, {
path: "2",
component: {
template: "#two"
}
}]
}, {
path: "*",
redirect: "/home/1"
}]
})
new Vue({
el: "#root",
router,
data() {
return {
musicTime: 0
}
},
methods: {
musicGo() {
let that = this;
setInterval(function () {
that.musicTime++
}, 1000)
}
},
mounted() {
this.musicGo()
}
})
</script>
<style>
#music {
position: fixed;
bottom: 100px;
color: #f00;
}
</style>
</html>

复制代码

直接给你个 demo，把最佳答案抱走

账号		自动登录	找回密码
密码			立即注册