使用uniapp开发微信小程序,怎么做到在所有页面播放音乐

511 阅读1分钟

要在 Uni-app 中实现在所有页面播放音乐,可以通过使用一个全局的音乐播放器,将其保存在状态管理器 Vuex 中,并在需要播放音乐的页面,从状态管理器中获取音乐播放器的实例进行操作。
具体实现步骤如下:

  1. 在 store 目录下创建一个 index.js 文件来管理全局的音乐播放器。
js
Copy code
const state = {
  musicPlayer: null,
}

const mutations = {
  setMusicPlayer: (state, musicPlayer) => {
    state.musicPlayer = musicPlayer
  },
}

const actions = {
  createMusicPlayer({ commit }) {
    const musicPlayer = uni.createInnerAudioContext()
    musicPlayer.autoplay = true
    musicPlayer.loop = true
    musicPlayer.src = 'http://example.com/music.mp3'
    commit('setMusicPlayer', musicPlayer)
  },
}

export default {
  state,
  mutations,
  actions,
}
  1. 在 App.vue 文件中,在 onLaunch 生命周期中调用 createMusicPlayer 方法来创建全局的音乐播放器对象,并在 onShow 生命周期中启动播放器。
html
Copy code
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['createMusicPlayer']),
  },
  onLaunch() {
    this.createMusicPlayer()
  },
  onShow() {
    if (this.$store.state.musicPlayer) {
      this.$store.state.musicPlayer.play()
    }
  },
}
</script>
  1. 在需要播放音乐的页面中从全局的音乐播放器中获取播放器实例进行操作,例如,在 home.vue 中播放音乐。
html
Copy code
<template>
  <div>
    Home Page
    <button @click="onPlay">Play music</button>
  </div>
</template>

<script>
export default {
  methods: {
    onPlay() {
      const musicPlayer = this.$store.state.musicPlayer
      musicPlayer.src = 'http://example.com/music.mp3'
      musicPlayer.play()
    },
  },
}
</script>

在上述代码中,我们从状态管理器中获取了全局的音乐播放器实例 musicPlayer,然后设置音频资源的 URL,并调用 play 方法来播放音乐。
通过上述步骤,我们就可以在所有页面中创建和管理一个全局的音乐播放器,实现在任意页面中播放音乐。