CODEWITHSUNDEEP
vue.jsvuex
Tyoma Inagamov
Tyoma Inagamov

Reputation: 125

When I change the route a song stops playing. How to make dynamic audio?

I have an issue with dynamic audio player.

So, I have a page with music and by clicking on 'play' at any song it runs a function

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

As you can see it commits a mutation in store:

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

Then I want to play this song without stopping at every single page of my app. My 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>

Here you can see that I import component, which I will show later and I get state of playingSong:

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

After it, if there is a playing song I run my component 'musicPlayer.vue'

<script>
import {mapGetters} from 'vuex'

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

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

So if when I click on a song it plays, but if I change path, for example from 'localhost:8080/Music' to 'localhost:8080/Home' the song stops playing

Upvotes: 1

Views: 343

Answers (1)

inrate
inrate

Reputation: 365

We have to use

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

instead of

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

And that's all the problem :)

Learn more about router-link

Upvotes: 1

Related Questions