1 首先建一个文件夹 放几首歌曲

2 看代码

1）基本版本

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>音乐播放器</title>
  6.     <meta name="viewport" content="width=device-width ,initial-scale=1">
  7.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.  
  14.         ul {
  15.             list-style: none;
  16.         }
  17.  
  18.         ul li {
  19.             margin: 20px 20px;
  20.             padding: 10px 5px;
  21.             border-radius: 3px;
  22.         }
  23.  
  24.         ul li.active {
  25.             background-color: gray;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.  
  31. <div id="app">
  1. 　　　　　　　　<!--handerEnded这首歌播放完就波下一曲-->
  1.     <audio v-bind:src="currentSrc" controls autoplay @ended="handerEnded"></audio>
  2.     <ul>
  3.         <li :class="{active:index===currentIndex}" v-for="(item, index) in musicData" :key="item.id"
  4.             @click="handerClick(item.songSrc,index)">
  5.             <h2>{{item.id}}-歌名：{{item.name}}</h2>
  6.             <p>{{item.author}}</p>
  7.         </li>
  8.     </ul>
  9.     <button @click="nextSong">下一曲</button>
  10. </div>
  11.  
  12. <script>
  13.     const musicData = [{
  14.         id: 1,
  15.         name: '数到五答应我 - 曹格',
  16.         author: '曹格',
  17.         songSrc: './static/数到五答应我 - 曹格.mp3'
  18.     },
  19.         {
  20.             id: 2,
  21.             name: '风吹着我向你跑来 - 焦迈奇',
  22.             author: '焦迈奇',
  23.             songSrc: './static/风吹着我向你跑来 - 焦迈奇.mp3'
  24.         }
  25.     ];
  26.  
  27.     let app = new Vue({
  28.         el: '#app',
  29.         data: {
  30.             musicData: musicData,   // 可以写成 因为是一样的 musicData
  31.             currentSrc: './static/数到五答应我 - 曹格.mp3',
  32.             currentIndex: 0
  33.         },
  34.         methods: {
  35.             handerClick(src, index) {
  36.                 // 更改src意味着 currentSrc = 你点的那个li标签里的歌曲的src
  37.                 // 可以把songcrc传进去
  38.  
  39.                 this.currentSrc = src;
  40.                 this.currentIndex = index
  41.             },
  42.             handerEnded() {
  43.                 // 下一曲的播放 要用 ended
  44.                 // 1. 索引 + 1
  45. //                this.currentIndex++;
  46. //                // 2. 找到索引的src赋值给原来的src
  47. //                if (this.currentIndex === this.musicData.length) {
  48. //                    this.currentIndex = 0
  49. //                }
  50. //                this.currentSrc = this.musicData[this.currentIndex].songSrc;
  51.                 this.nextSong();
  52.             },
  53.             nextSong(){
  54.                 this.currentIndex++;
  55.                 // 2. 找到索引的src赋值给原来的src
  56.                 if (this.currentIndex === this.musicData.length) {
  57.                     this.currentIndex = 0
  58.                 }
  59.                 this.currentSrc = this.musicData[this.currentIndex].songSrc;
  60.             }
  61.         }
  62.     });
  63.  
  64. </script>
  65. </body>
  66. </html>

2）计算属性版本

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>音乐播放器</title>
  6.     <meta name="viewport" content="width=device-width ,initial-scale=1">
  7.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.  
  14.         ul {
  15.             list-style: none;
  16.         }
  17.  
  18.         ul li {
  19.             margin: 20px 20px;
  20.             padding: 10px 5px;
  21.             border-radius: 3px;
  22.         }
  23.  
  24.         ul li.active {
  25.             background-color: gray;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.  
  31. <div id="app">
  32.  
  33.     <audio v-bind:src="getCurrentSongSrc" controls autoplay @ended="handerEnded"></audio>
  34.     <ul>
  35.         <li :class="{active:index===currentIndex}" v-for="(item, index) in musicData" :key="item.id"
  36.             @click="handerClick(index)">
  37.             <h2>{{item.id}}-歌名：{{item.name}}</h2>
  38.             <p>{{item.author}}</p>
  39.         </li>
  40.     </ul>
  41.     <button @click="nextSong">下一曲</button>
  42. </div>
  43.  
  44. <script>
  45.     const musicData = [{
  46.         id: 1,
  47.         name: '数到五答应我 - 曹格',
  48.         author: '曹格',
  49.         songSrc: './static/数到五答应我 - 曹格.mp3'
  50.     },
  51.         {
  52.             id: 2,
  53.             name: '风吹着我向你跑来 - 焦迈奇',
  54.             author: '焦迈奇',
  55.             songSrc: './static/风吹着我向你跑来 - 焦迈奇.mp3'
  56.         }
  57.     ];
  58.  
  59.     let app = new Vue({
  60.         el: '#app',
  61.         data: {
  62.             musicData: musicData,   // 可以写成 因为是一样的 musicData
  63.             // currentSrc: './static/数到五答应我 - 曹格.mp3',
  64.             currentIndex: 0
  65.         },
  66.         // 变动1  不要写死的url了 就自己拿
  67.         computed:{
  68.             getCurrentSongSrc(){
  69.                 return this.musicData[this.currentIndex].songSrc
  70.             }
  71.         },
  72.         methods: {
  73.             handerClick(index) {
  74.                 // 就没有必要了 就不要传值了
  75.                 // this.currentSrc = src;
  76.                 this.currentIndex = index
  77.             },
  78.             handerEnded() {
  79.                 this.nextSong();
  80.             },
  81.             nextSong(){
  82.                 this.currentIndex++;
  83.  
  84.                 if (this.currentIndex === this.musicData.length) {
  85.                     this.currentIndex = 0
  86.                 }
  87.                 // 这个就没有必要了
  88.                 // this.currentSrc = this.musicData[this.currentIndex].songSrc;
  89.             }
  90.         }
  91.     });
  92.  
  93. </script>
  94. </body>
  95. </html>

vue小练习--音乐播放器的更多相关文章

  1. 微信小程序音乐播放器

    写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.c ...

  2. 微信小程序音乐播放器组件

    wxml <image bindtap="click" src="{{isPlay?'/images/':'/images/'}}"/> JS Pa ...

  3. 用Vue来实现音乐播放器（三十八）：歌词滚动列表的问题

    1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...

  4. Vue实战：音乐播放器（一） 页面效果

    先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心

  5. 用Vue来实现音乐播放器（二十三）：音乐列表

    当我们将音乐列表往上滑的时候   我们上面的歌手图片部分也会变小 当我们将音乐列表向下拉的时候   我们的图片会放大 当我们将音乐列表向上滑的时候   我们的图片有一个高斯模糊的效果 并且随着我们的列 ...

  6. 用Vue来实现音乐播放器（十八）：右侧快速入口点击高亮

    问题一:当我们点击右侧快速入口的时候  被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候  将scrollY的值和listHeight ...

  7. 用Vue来实现音乐播放器（九）：歌单数据接口分析

    z这里如果我们和之前获取轮播图的数据一样来获取表单的数据  发现根本获取不到 原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话  是根本 ...

  8. 用Vue来实现音乐播放器（八）：自动轮播图啊

    slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <d ...

  9. 用Vue来实现音乐播放器（二十一）：歌手详情数据抓取

    第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...

随机推荐

  1. 暴强贴：从.NET平台调用Win32 API----转载

      水之真谛 关注 17人评论 27649人阅读 2007-02-28 17:03:47 作者:刘铁猛日期:2005-12-20关键字:C# .NET Win32 API 版权声明:本文章受知识产权法 ...

  2. ch8 高度相等的列--CSS方法

    如下图所示效果,可以使用表格实现,本文采用在CSS中实现. 标记如下: <div class="wrapper"> <div class="box&qu ...

  3. luogu P4129 [SHOI2006]仙人掌

    题目描述 仙人掌图(cactus)是一种无向连通图,它的每条边最多只能出现在一个简单回路(simple cycle)里面.从直观上说,可以把仙人掌图理解为允许存在回路的树.但是仙人掌图和树之间有个本质 ...

  4. Spring中获取web项目的根目录

    spring 在 org.springframework.web.util 包中提供了几个特殊用途的 Servlet 监听器,正确地使用它们可以完成一些特定需求的功能; WebAppRootListe ...

  5. zabbix监控memcached服务

    zabbix监控memcached服务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装并配置memcached服务 1>.使用yum方式安装memcached [ro ...

  6. KAZE特征和各向异性扩散滤波

    kaze feature: http://www.doc88.com/p-6911376909693.html 各向异性扩散滤波  Scale-space and edge detection usi ...

  7. ThinkPad重大更新！5款创意设计PC齐发2日

    导读 日前,ThinkPad巨匠P系列专业移动工作站迎来全线更新,包括ThinkPad P1隐士2019.ThinkPad P53.ThinkPad P73.ThinkPad P43s.ThinkPa ...

  8. 继OpenJDK 之后，OpenJFX也将迁移到 Git

    导读 近日 OpenJFX 项目负责人 Kevin Rushforth 提交了一份将 OpenJFX 迁移到 GitHub 的提案. OpenJFX 是 JavaFX 的开源实现.JavaFX 是一个 ...

  9. Windows使用Nexus搭建Maven私服

    简介 Maven私服是架设在局域网的一种特殊的远程仓库,目的是代理远程仓库及部署第三方构件,有了私服之后,当 Maven 需要下载构件时,直接请求私服,私服上存在则下载到本地仓库,否则,私服请求外部的 ...

  10. 初识python 廖雪峰（慕课网）

    3-9 Python中的布尔类型 短路计算 True和False是布尔值,就像1,2,3是整数,“abc”是字符串一样. 做这个题,需要了解以下两点: 第一,在一个语句中,当and和or同时存在时,a ...