vue - audio标签

audio 标签

 

<audio :src="current_music" autoplay controls autoloop  @end="next_song"></audio>

@ended = 'nextSong()

一首音乐播放结束后的时间是ended

autoplay 自动播放

controls 显示暂停，进度，音量下载等

 

<script>
    var songs = [
            {id:1,src:'./audios/1.mp3',name:"la la Land",author:'Ryan'},
            {id:2,src:'./audios/2.mp3',name:"The Best of",author:'Skillof'},
            {id:3,src:'./audios/3.mp3',name:"It My Life",author:'Bon'},
            {id:4,src:'./audios/4.mp3',name:"Tender",author:'Blur'}];

    var v1 = new Vue(
        {
            el:"#music",

            data:{
                 songs:songs,
                index:0,
                current_music:'./audios/1.mp3'
            },
            methods:{
                next_song:function(){
                this.index++;
                this.index= this.index===this.songs.length?0:this.index;
                this.current_music=this.songs[this.index].src
                },
                last_song:function(){
                    this.index--;
                    this.index = this.index<0? this.songs.length-1:this.index;
                this.current_music=this.songs[this.index].src
                },
                singing:function(i){
                    this.index=i;
                     this.current_music=this.songs[i].src
                }
            }
        }
    )
</script>