当我改变路线时，歌曲停止播放。如何制作动态音频？

Question

我对动态音频播放器有疑问。

所以，我有一个音乐页面，通过点击任何歌曲的“播放”，它会运行一个功能

playSong (song) {
    var payload = {
        name: song,
        audio: new Audio(require(`@/assets/audio/music/${this.genre}/${song}.mp3`))
    };
    this.$store.commit('playSong', payload);
}

如你所见，它在 store 中提交了一个突变：

mutations: {
    playSong (state, payload) {
        state.playingSong.name = payload.name;
        state.playingSong.audio = payload.audio;
    },
}

然后我想播放这首歌，而不是在我的应用程序的每个页面上停下来。 我的 App.vue：

<template>
    <div id="app">
        <router-view/>
        <musicPlayer v-if="playingSong.audio"/>
    </div>
</template>

<script>
import {mapGetters} from 'vuex'

// Components
import musicPlayer from '@/components/musicPlayer.vue'

export default {
    name: 'app',
    components: {
        musicPlayer
    },
    computed: {
        ...mapGetters({
            playingSong: 'getPlayingSong',
        })
    },
}
</script>

在这里你可以看到我导入了组件，我稍后会展示它，我会得到正在播放的歌曲状态：

state: {
    playingSong: {
        audio: null,
        name: null,
    },
}

之后，如果有一首正在播放的歌曲，我会运行我的组件“musicPlayer.vue”

<script>
import {mapGetters} from 'vuex'

export default {
    mounted () {
        this.playingSong.audio.play();
    },

    computed: {
        ...mapGetters({
            playingSong: 'getPlayingSong',
        })
    },
}
</script>

所以，如果我点击一首歌曲播放，但如果我更改路径，例如从“localhost:8080/Music”更改为“localhost:8080/Home”，歌曲将停止播放

Answer 1

我们必须使用

<router-link to="/Page"></router-link>

而不是

<a href="/Page"></a>

这就是问题所在 :)

Learn more about router-link