当前播放完成后可以使用啥功能继续播放音频

Posted 2023-03-16

【中文标题】当前播放完成后可以使用啥功能继续播放音频

【英文标题】：What function can be used to keep playing audio after current one is done当前播放完成后可以使用什么功能继续播放音频

【发布时间】：2022-01-16 08:36:18

【问题描述】：

我正在尝试在当前歌曲播放完毕后播放播放列表/专辑中的下一首歌曲。我能够播放一首歌曲，但在当前歌曲播放完毕后它不会移动到下一首歌曲。

这是我的代码：

<button class="controlButton play" title="Play" @click="play" v-if="!isPlaying">
   <img src="storage/icons/play.png" >
</button>
<button class="controlButton pause" title="Pause" @click="pause" v-else>
   <img src="storage/icons/pause.png" >
</button>

<script>
import  Link  from "@inertiajs/inertia-vue3";
export default 
    components: 
        Link
    ,
    data() 
        return 
            audio: new Audio(),
            currentSong: ,
            myWidth: 0,
            loop:,
            index: 0,
            songs: [
                
                    title: 'Song',
                    artist: 'Artis A',
                    src: '/storage/audio/song.mp3',
                    cover: '/storage/images/cover.jpeg',
                ,
                
                    title: 'Song 2',
                    artist: 'Artis B',
                    src: '/storage/audio/song2.mp3',
                    cover: '/storage/images/cover2.jpeg',
                ,
 mounted() 
        this.currentSong = this.songs[this.index];
,
methods: 
play(song) 
            if(typeof song.src != 'undefined') 
                this.currentSong = song;
                this.audio.src = this.currentSong.src

            
            this.audio.play();
            this.isPlaying = true
            this.activeItem = this.currentSong
        ,
 pause() 
            this.audio.pause();
            this.isPlaying = false;
        ,

如何在当前播放完毕后播放第二首歌曲，并在没有歌曲时将按钮更改回播放。

【参考方案1】：

Audio 对象（它是一个 htmlAudioElement，它继承自 HTMLMediaElement）公开了一个 ended 事件，您可以收听该事件。

mounted() 
    this.audio.addEventListener('ended', (event) => 
        // go to next song
    )

【讨论】：

你如何将播放按钮更改为没有下一首歌的暂停？

@Henry 添加另一个此ended 回调可以设置的变量，并更新播放按钮的v-if 以包含该变量。