vue小练习--音乐播放器
1 首先建一个文件夹 放几首歌曲
2 看代码
1）基本版本
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>音乐播放器</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
ul li {
margin: 20px 20px;
padding: 10px 5px;
border-radius: 3px;
}
ul li.active {
background-color: gray;
}
</style>
</head>
<body>
<div >
<!--handerEnded这首歌播放完就波下一曲-->
<audio v-bind:src="currentSrc" controls autoplay @ended="handerEnded"></audio>
<ul>
<li :class="{active:index===currentIndex}" v-for="(item, index) in musicData" :key="item.id"
@click="handerClick(item.songSrc,index)">
<h2>{{item.id}}-歌名：{{item.name}}</h2>
<p>{{item.author}}</p>
</li>
</ul>
<button @click="nextSong">下一曲</button>
</div>
<script>
const musicData = [{
id: 1,
name: '数到五答应我 - 曹格',
author: '曹格',
songSrc: './static/数到五答应我 - 曹格.mp3'
},
{
id: 2,
name: '风吹着我向你跑来 - 焦迈奇',
author: '焦迈奇',
songSrc: './static/风吹着我向你跑来 - 焦迈奇.mp3'
}
];
let app = new Vue({
el: '#app',
data: {
musicData: musicData, // 可以写成 因为是一样的 musicData
currentSrc: './static/数到五答应我 - 曹格.mp3',
currentIndex: 0
},
methods: {
handerClick(src, index) {
// 更改src意味着 currentSrc = 你点的那个li标签里的歌曲的src
// 可以把songcrc传进去
this.currentSrc = src;
this.currentIndex = index
},
handerEnded() {
// 下一曲的播放 要用 ended
// 1. 索引 + 1
// this.currentIndex++;
// // 2. 找到索引的src赋值给原来的src
// if (this.currentIndex === this.musicData.length) {
// this.currentIndex = 0
// }
// this.currentSrc = this.musicData[this.currentIndex].songSrc;
this.nextSong();
},
nextSong(){
this.currentIndex++;
// 2. 找到索引的src赋值给原来的src
if (this.currentIndex === this.musicData.length) {
this.currentIndex = 0
}
this.currentSrc = this.musicData[this.currentIndex].songSrc;
}
}
});
</script>
</body>
</html>2）计算属性版本
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>音乐播放器</title>
<meta name="viewport" content="width=device-width ,initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
ul li {
margin: 20px 20px;
padding: 10px 5px;
border-radius: 3px;
}
ul li.active {
background-color: gray;
}
</style>
</head>
<body>
<div >
<audio v-bind:src="getCurrentSongSrc" controls autoplay @ended="handerEnded"></audio>
<ul>
<li :class="{active:index===currentIndex}" v-for="(item, index) in musicData" :key="item.id"
@click="handerClick(index)">
<h2>{{item.id}}-歌名：{{item.name}}</h2>
<p>{{item.author}}</p>
</li>
</ul>
<button @click="nextSong">下一曲</button>
</div>
<script>
const musicData = [{
id: 1,
name: '数到五答应我 - 曹格',
author: '曹格',
songSrc: './static/数到五答应我 - 曹格.mp3'
},
{
id: 2,
name: '风吹着我向你跑来 - 焦迈奇',
author: '焦迈奇',
songSrc: './static/风吹着我向你跑来 - 焦迈奇.mp3'
}
];
let app = new Vue({
el: '#app',
data: {
musicData: musicData, // 可以写成 因为是一样的 musicData
// currentSrc: './static/数到五答应我 - 曹格.mp3',
currentIndex: 0
},
// 变动1 不要写死的url了 就自己拿
computed:{
getCurrentSongSrc(){
return this.musicData[this.currentIndex].songSrc
}
},
methods: {
handerClick(index) {
// 就没有必要了 就不要传值了
// this.currentSrc = src;
this.currentIndex = index
},
handerEnded() {
this.nextSong();
},
nextSong(){
this.currentIndex++;
if (this.currentIndex === this.musicData.length) {
this.currentIndex = 0
}
// 这个就没有必要了
// this.currentSrc = this.musicData[this.currentIndex].songSrc;
}
}
});
</script>
</body>
</html>