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>