[已解决]实现页面跳转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 给出，感谢 sukiwhip 的回答。

单击隐藏图章

本帖最后由 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，把最佳答案抱走

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