Vue实现简单的音乐播放器

 

 

 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>

 

posted @ 2020-11-09 16:17  沐小侠  阅读(1026)  评论(0)    收藏  举报