Vue實現簡單的音樂播放器

本文轉載自查看原文 2020-11-09 16:17 533 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 android快捷簡單的實現音樂播放器 Android 實現簡單音樂播放器（二） vue實現音樂播放器實戰筆記使用vue制作的音樂播放器(一) JS實現音樂播放器 Android音樂播放器的設計與實現用Vue來實現音樂播放器（二十三）：音樂列表 VUE練手項目實現音樂播放器(四)------- 播放控制組件 Android實現簡單音樂播放器（startService和bindService后台運行程序） Android開發6：Service的使用（簡單音樂播放器的實現）