vue中播放音乐
第一种：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div >
<audio :src="currentSong" autoplay="" controls="" @ended="nextsong()"> </audio>
<ul>
<li v-for="(item,index) in songs" @click="clickHandle(index)">
<h3>歌手:{{item.name}}====
歌名:{{item.title}}</h3>
</li>
</ul>
</div>
<script>
var songs=[
{id:1,name:'杨烁 ',title:'走在乡间的小路上',src:'./audio/走在乡间的小路上.mp3'},
{id:2,name:'杨丽',title:'笑看风云',src:'./audio/笑看风云.mp3'},
{id:3,name:'金南玲',title:'逆流成河',src:'./audio/逆流成河.mp3'},
{id:4,name:'齐秦',title:'狼',src:'./audio/狼.mp3'}
]
new Vue({
el:'#okk',
data:{
songs:songs,
currentSong:'./audio/走在乡间的小路上.mp3',
currentIndex:0,
},
methods:{
clickHandle:function (index) {
console.log(this);
// console.log(this.songs[index])
this.currentSong = this.songs[index].src;
this.currentIndex = index; //参数为index时
// this.currentSong = item.src; //参数为item时
},
nextsong:function () {
// alert(111);
// alert(this.currentIndex);
console.log(this.songs.length);
console.log(this.currentIndex);
if(this.currentIndex==this.songs.length-1){
this.currentIndex=-1;
}
this.currentIndex++;
console.log(this.currentIndex);
this.currentSong = this.songs[this.currentIndex].src;
}
}
})
</script>
</body>
</html>
第二种：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div >
<audio :src="currentSrc" autoplay="" controls="" @ended="nextsong()"> </audio>
<ul>
<li v-for="(item,index) in songs" @click="clickHandle(index)">
<h3>歌手:{{item.name}}====
歌名:{{item.title}}</h3>
</li>
</ul>
</div>
<script>
var songs=[
{id:1,name:'杨烁 ',title:'走在乡间的小路上',src:'./audio/走在乡间的小路上.mp3'},
{id:2,name:'杨丽',title:'笑看风云',src:'./audio/笑看风云.mp3'},
{id:3,name:'金南玲',title:'逆流成河',src:'./audio/逆流成河.mp3'},
{id:4,name:'齐秦',title:'狼',src:'./audio/狼.mp3'}
]
new Vue({
el:'#okk',
data:{
songs:songs,
currentIndex:0,
},
methods:{
clickHandle:function (index) {
console.log(this);
// console.log(this.songs[index])
this.currentIndex=index; //参数为index时
// this.currentSong = item.src; //参数为item时
},
nextsong:function () {
// alert(111);
// alert(this.currentIndex);
console.log(this.songs.length);
console.log(this.currentIndex);
if(this.currentIndex==this.songs.length-1){
this.currentIndex=-1;
}
this.currentIndex++;
console.log(this.currentIndex);
// this.currentSong = this.songs[this.currentIndex].src;
}
},
computed:{
// 计算数据属性，就是data里面的数据
currentSrc(){
return this.songs[this.currentIndex].src;
}
},
created(){
}
})
</script>
</body>
</html>
