1 首先建一个文件夹 放几首歌曲
2 看代码
1）基本版本
<!DOCTYPE html> <html lang="zh-CN"> <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 id="app">
<!--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 lang="zh-CN"> <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 id="app"> <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>