• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue.js实现音乐播放器

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了Vue.js实现音乐播放器的具体代码,供大家参考,具体内容如下

目录如下:

运行效果如图所示:

代码如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   * {
    margin: 0;
    padding: ;
   }
   ul {
    list-style: none;
   }
   ul li {
    margin: 20px;
    padding: 10px 5px;
    border-radius: 3px;
   }
   ul li.active {
    background-color: aqua;
   }
      #control {
    width: 100%;
    height:80px;
   }
   .next,.before {
    width: 100px;
    height: 80px;
    background-color: aqua;
 
   }
   h1 {
       color: red
   }
   
  </style>
 </head>
 <body>
    <div id="app">
   
     <audio :src="currentSrc" controls="controls" autoplay="autoplay" @ended="changEnd"></audio>
       <h1>不仅仅是代码的搬运工</h1>
      <ul>
       <li :class='{active:index === currentIndex}' v-for='(item,index) in musicData' :key="item.id" @click="changeSong(item.songSrc,index)">
     <h2>{{item.id }}---歌名:{{item.name}}----{{item.author}}</h2>
    </li>
      </ul>
   <div id="control">
    <button  class="before" type="button" @click="beforeSong" >上一首</button>
    <button  class="next" type="button" @click="nextSong" >下一首</button>
   </div>
   
     
    </div>
    <script type="text/javascript">
     const musicData = [{
          id: 1,
    name: '喜欢你',
    author: '陈洁仪',
    songSrc: './status/陈洁仪 - 喜欢你.mp3'
     },
     {
      id: 2,
      name: '我又想你了',
      author: '小鹅',
      songSrc: './status/小鹅 - 我又想你了.mp3'
     }
     ];
     var app = new Vue({
      el: '#app',
      data: {
       musicData,
       currentIndex: 0,
       currentSrc: './status/小鹅 - 我又想你了.mp3'
      },
      methods: {
       changeSong (src,index) {
        this.currentSrc = src;
        this.currentIndex = index;
       },
       changEnd () {
       this.currentIndex++;
       if(this.currentIndex===this.musicData.length){
      this.currentIndex = 0;
       }
       this.currentSrc = this.musicData[this.currentIndex].songSrc; 
       },
       nextSong () {
        this.currentIndex++;
        if(this.currentIndex===this.musicData.length){
          this.currentIndex = 0;
        }
         this.currentSrc = this.musicData[this.currentIndex].songSrc; 
        console.log(this.currentIndex)
       },
       beforeSong () {
        
        if(this.currentIndex===0){
         this.currentIndex=this.musicData.length; 
        }
         this.currentIndex--;
         this.currentSrc = this.musicData[this.currentIndex].songSrc; 
       }
       
       
      }
     })
    </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
JavaScript 操作宏任务与微任务发布时间:2022-02-05
下一篇:
京东 Vue3 组件库支持小程序开发的详细流程发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap