루트를 바꾸면 노래가 안 나와요.다이내믹 오디오 만드는 법

루트를 바꾸면 노래가 안 나와요.다이내믹 오디오 만드는 법

다이내믹 오디오 플레이어에 문제가 있습니다.

그래서 음악이 있는 페이지가 있고 아무 노래나 '재생'을 클릭하면 기능이 실행됩니다.

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

보시는 바와 같이 스토어에서 변환을 커밋합니다.

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

그럼 이 노래를 앱의 모든 페이지를 멈추지 않고 재생하고 싶습니다.내 앱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>

여기서 컴포넌트를 Import하면 나중에 보여드리고 재생 상태를 확인할 수 있습니다.

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

그 후 연주곡이 있으면 컴포넌트 '뮤직플레이어'를 실행합니다.뷰'

<script>
import {mapGetters} from 'vuex'

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

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

따라서 곡을 클릭하면 재생이 중지되지만 예를 들어 'localhost:8080/Music'에서 'localhost:8080/Home'으로 경로를 변경하면 재생이 중지됩니다.

이용해야 합니다.

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

대신

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

그게 문제예요:)

라우터 링크 상세

언급URL : https://stackoverflow.com/questions/62062444/when-i-change-the-route-a-song-stops-playing-how-to-make-dynamic-audio