1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <title>音乐播放器</title>
6 <style>
7 *{
8 margin-left: 0px;
9 padding-left: 0px;
10 }
11 ul li{
12 list-style: none;
13 line-height: 30px;
14 color:#999999;
15 }
16 ul li.active{
17 background-color: indianred;
18 color: #FFFFFF;
19 }
20 audio{
21 width: 100%;
22 }
23 </style>
24 </head>
25 <body>
26 <div id="music">
27 <!--@ended事件，当媒体播放完成 会自动调用该方法，执行该脚本，自动播放下一首-->
28 <audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = 'nextHanlder'></audio>
29 <ul>
30 <!-- 循环歌名，展示 -->
31 <li @click = 'songHandler(index)' v-for = '(item,index) in musicData' :key="item.id" :class = '{active:index===currentIndex}'>
32 {{item.id}}.{{ item.author }}-{{ item.name }}
33 </li>
34 </ul>
35 </div>
36 <script src="js/vue.js"></script>
37 <script>
38 var musicData = [
39 {
40 id: 1,
41 name: '遇见',
42 author: '孙燕姿',
43 songSrc: 'static/孙燕姿 - 遇见.mp3'
44 },
45 {
46 id: 2,
47 name: '斑马，斑马',
48 author: '宋冬野',
49 songSrc: 'static/宋冬野 - 斑马，斑马.mp3'
50 },
51 {
52 id: 3,
53 name: '夜空中最亮的星',
54 author: '逃跑计划',
55 songSrc: 'static/逃跑计划 - 夜空中最亮的星.mp3'
56 },
57 {
58 id: 4,
59 name: '匆匆那年',
60 author: '王菲',
61 songSrc: 'static/王菲 - 匆匆那年.mp3'
62 }
63 ];
64 new Vue({
65 el: '#music',
66 data() {
67 return {
68 musicData:[],
69 currentIndex:0
70 }
71 },
72 methods:{
73 //点击那首歌播放哪一首
74 songHandler(i){
75 this.currentIndex = i;
76 },
77 //播放下一首
78 nextHanlder(){
79 this.currentIndex++;
80 }
81 },
82 created(){
83 //赋值变量
84 this.musicData = musicData
85 }
86 })
87 </script>
88 </body>
89 </html>
