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. MAC Matlab 中文乱码

    环境:macOS High Sierra 10.13.4 问题:文件中文注释乱码(再次打开文件时) / 控制台输出中文乱码 解决方法: 官网下载补丁(https://ww2.mathworks.cn/ ...

  2. oracle练习-day03

    .创建表空间.创建用户赋权限.创建表语法:.常见的数据类型字符             myname ) varchar2:推荐使用这个 可变长度最大字符    myname varchar2() 字 ...

  3. 腾讯2019秋招--小q爬塔(dp)

    小Q爬塔 题目描述: 小Q 正在攀登一座宝塔,这些宝塔很特别.塔总共有 n 层,但是每两层之间的净高却不相同,所以造成了小Q 爬过每层的时间也不同.如果某一层的高度为 x,那么爬过这一层所需的时间也是 ...

  4. 图论初步2<蒟蒻专属,大佬勿喷>

    前言: 本节课讲的是图论的几种遍历方式,若没看图论初步1的赶紧去看 https://www.cnblogs.com/Craker/p/12271090.html 正文: 零.温故而知新 上节课我们学的 ...

  5. 利用Powerdesigner16.5(64位)连接64位oracle 配置系统odbc驱动

    利用Powerdesigner16.5(64位)连接64位oracle逆向工程数据库 记录一次Powerdesigner通过odbc连接64位oracle数据库.林林总总国内看到都是些乱七八糟没几个靠 ...

  6. [7b2美化]柒比贰 魔改系列|7B2-分类封面添加波浪效果&每日诗词

    本文转载自:钻芒博客 https://www.zmki.cn/5105.html 效果如图: 代码: 首先在style.css样式表里添加波浪样式 /*浪来了*/ .lang { overflow: ...

  7. POJ1471 Tree/洛谷P4178 Tree

    Tree P4178 Tree 点分治板子. 点分治就是直接找树的重心进行暴力计算,每次树的深度不会超过子树深度的\(\frac{1}{2}\),计算完就消除影响,找下一个重心. 所以伪代码: voi ...

  8. suse下静默方式安装oracle(无图形界面)

    以 http://www.cnblogs.com/0201zcr/p/4728241.html 为主 以 http://www.cnblogs.com/jyzhao/p/5001782.html 为参 ...

  9. Day5 - H - Supermarket POJ - 1456

    A supermarket has a set Prod of products on sale. It earns a profit px for each product x∈Prod sold ...

  10. php 获取时间段

    switch ($type){ case 'day'://当日 $end=date(,,,date(,date('Y'))); $where=' and '.$pre.'create_time> ...