1. 需求文档 && 解决思路

qq 音乐：

  1. 用 rem 布局解决移动端适配问题
  2. 播放音频（audio）；页面加载后，自动播放；通过音符按钮来手动控制音频的播放和暂停；点击音符按钮到底是播放还是暂停，依赖于音频的播放状态；

  3. 随着播放要做以下处理：

    3.1 高亮当前进度匹配的歌词，歌词还会向上滑
    3.2 更新当前的播放进度
    3.3 更新进度条

zepto： 轻量级用于移动端的库，和 jq 使用起来一样的；但是有一些方法它没有；zepto 提供专门的移动端事件；
常用的方法，如获取元素、addClass、removeClass … 用法和 jq 一样；
在页面中引入的时候，要在咱们自己的写的 js 文件之前引入；

2. html 部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <link rel="stylesheet" href="css/reset.min.css">
  8.   <link rel="stylesheet" href="css/index.css">
  9.   <script src="js/rem.js"></script>
  10. </head>
  11. <body>
  12. <section class="container" id="container">
  13.   <!--audio 是 h5 新增的标签，用于播放音频；-->
  14.   <audio src="img/myDream.m4a" id="audio"></audio>
  16.   <!--背景图-->
  17.   <div class="backgroundImg"></div>
  19.   <!--背景蒙层-->
  20.   <div class="bg"></div>
  22.   <header class="header" id="header">
  23.     <img src="img/myDream.jpg" alt="">
  24.     <div class="song">
  25.       <p>我的梦</p>
  26.       <p>张靓颖</p>
  27.     </div>
  28.     <a href="javascript:;" class="musicBtn" id="musicBtn"></a>
  29.   </header>
  31.   <main class="main" id="main">
  32.     <!--main 一个溢出隐藏的盒子；main 这个盒子的高度应该是动态计算的；为了保证在页面充满一屏的情况下
  33.     ，尾部在页面底部 -->
  34.     <div class="wrapper">
  35.       <!--wrapper 里面放的都是歌词，歌词应该是动态绑定的-->
  36.       <p class="select">一直地一直地往前走</p>
  37.       <p>一直地一直地往前走</p>
  38.       <p>一直地一直地往前走</p>
  39.       <p>一直地一直地往前走</p>
  40.       <p>一直地一直地往前走</p>
  41.       <p>一直地一直地往前走</p>
  42.       <p>一直地一直地往前走</p>
  43.       <p>一直地一直地往前走</p>
  44.       <p>一直地一直地往前走</p>
  45.     </div>
  46.   </main>
  48.   <footer class="footer" id="footer">
  49.     <div class="progress" id="progress">
  50.       <span class="current">00:00</span>
  51.       <span class="duration">00:00</span>
  52.       <div class="probg" id="probg">
  53.         <div class="already"></div>
  54.       </div>
  55.     </div>
  56.     <a href="javascript:;" class="down" id="down">下载这首音乐</a>
  57.   </footer>
  58. </section>
  60. <script src="js/zepto.min.js"></script>
  61. <script src="js/index.js"></script>
  62. </body>
  63. </html>

3. css 部分

  1. html {
  2.   font-size: 100px;
  3.   height: 100%; /*如果你的应用要充满一屏幕，html 、body 标签的 height 设为 100%*/
  4. }
  5. body {
  6.   height: 100%;
  7. }
  9. .container {
  10.   width: 100%;
  11.   height: 100%;
  12.   position: relative;
  13. }
  15. .container .backgroundImg, .container .bg {
  16.   width: 100%;
  17.   height: 100%;
  18.   position: absolute;
  19.   top: 0;
  20.   left: 0;
  21.   z-index: -2;
  22. }
  24. .container .backgroundImg {
  25.   background: url("../img/myDream.jpg");
  26.   background-size: cover;
  27.   filter: blur(6px); /*filter 是滤镜属性；blur 是模糊程度*/
  28. }
  30. .container .bg {
  31.   background: rgba(0, 0, 0, .3);
  32. }
  34. /*HEADER*/
  35. .container .header {
  36.   position: relative;
  37.   padding: .3rem;
  38.   background: rgba(0, 0, 0, .4);
  39. }
  41. .container .header img {
  42.   width: 1.2rem;
  43.   height: 1.2rem;
  44. }
  46. .container .header .song {
  47.   display: inline-block;
  48.   vertical-align: top;
  49. }
  51. .header .song p {
  52.   height: .6rem;
  53.   line-height: .6rem;
  54.   color: #fff;
  55. }
  57. .header .song p:nth-child(1) {
  58.   font-size: .45rem;
  59. }
  61. .header .musicBtn {
  62.   display: block;
  63.   position: absolute;
  64.   width: .6rem;
  65.   height: .6rem;
  66.   right: .3rem;
  67.   top: 50%;
  68.   margin-top: -0.3rem; /*top 50% margin-top 负的高度的一半 让元素在垂直方向上居中*/
  69.   background: url("../img/music.svg") no-repeat;
  70.   border-radius: 50%;
  71.   background-size: 100%;
  72. }
  74. /*定义关键帧动画，实现旋转*/
  75. @keyframes move {
  76.   from {
  77.     transform: rotate(0deg);
  78.   }
  79.   to {
  80.     transform: rotate(360deg);
  81.   }
  82. }
  84. .header .musicBtn.select {
  85.   animation: move 1s linear 0s infinite;
  86. }
  88. .container .main {
  89.   position: relative;
  90.   height: 8rem; /* main 部分的高度应该是在 js 中动态计算的*/
  91.   padding: .3rem;
  92.   overflow: hidden;
  93. }
  95. .container .main .wrapper {
  96.   position: absolute;
  97.   top: 0;
  98.   left: 0;
  99.   width: 100%;
  100.   transition: all .5s linear 0s; /* 为了保证歌词移动的时候有过渡效果 */
  101. }
  103. .main .wrapper p {
  104.   height: .84rem;
  105.   line-height: .84rem;
  106.   text-align: center;
  107.   color: rgba(255, 255, 255, .5);
  108.   font-size: .4rem;
  109. }
  111. .main .wrapper p.select {
  112.   color: #31c27c;
  113. }
  115. /*FOOTER*/
  116. .footer .progress {
  117.   width: 100%;
  118.   position: relative;
  119.   overflow: hidden;
  120. }
  122. .footer .progress span {
  123.   position: absolute;
  124.   color: #fff;
  125. }
  127. .footer .progress span.current {
  128.   left: .3rem;
  129. }
  131. .footer .progress span.duration {
  132.   right: .3rem;
  133. }
  135. .footer .progress .probg {
  136.   width: 65%;
  137.   margin: .15rem auto;
  138.   background: rgba(255, 255, 255, .5);
  139.   height: .04rem;
  140. }
  142. .progress .probg .already {
  143.   width: 0; /*这个进度条的宽也不是写死的，而是随着歌曲的播放进度更新的*/
  144.   height: 100%;
  145.   background: #31c27c;
  146. }
  148. .footer .down {
  149.   display: block;
  150.   width: 60%;
  151.   height: 1rem;
  152.   line-height: 1rem;
  153.   text-align: center;
  154.   color: #fff;
  155.   font-size: .4rem;
  156.   background: url("../img/sprite_play.png") no-repeat .2rem -5.86rem #31c27c;
  157.   background-size: .8rem 7rem;
  158.   border-radius: .5rem;
  159.   margin: auto;
  160. }

4. js 部分

  1. // 1. 获取元素对象
  2. let audio = document.getElementById('audio'); // 获取 audio 标签
  3. let $header = $('.header'); // 获取头
  4. let $footer = $('.footer'); // 获取尾部
  5. let $musicBtn = $('.musicBtn'); // 音符按钮
  6. let $main = $('.main'); // 包裹 wrapper 的容器
  7. let $wrapper = $('.wrapper'); // 获取包裹歌词的容器，歌词滚动的效果就是操作 $wrapper 相对于 $main 的 top 值
  8. let $current = $('.current'); // 音频当前播放的时间
  9. let $duration = $('.duration'); // 音频的总时长
  10. let $already = $('.already'); // 进度条
  12. let autoTimer = null; // 定义一个变量存储定时器 id
  15. // 2. 动态计算 main 区域的高度
  16. // main 的高度 = 视口的高度 - header的高度 - footer 的高度 - 0.6 rem的 padding （height 是指内容区域的高度）
  17. function computeMain () {
  18.   let winH = document.documentElement.clientHeight; // 获取视口的高度
  19.   let headerH = $header[0].offsetHeight; // 获取 header 的高度
  20.   let footerH = $footer[0].offsetHeight; // 获取 footer 的高度
  22.   // winH、headerH、footerH 都是以 px 为单位的，需要转成 rem 才能计算；
  23.   // 如何把 winH、headerH、footerH 转成 rem？用 px 除以 HTML 的 fontSize 就可以转成 rem
  24.   let fontSize = parseFloat(document.documentElement.style.fontSize); // 这个 fontSize 是一个带单位的字符串，需要转成数字
  26.   let curH = (winH - headerH - footerH) / fontSize - 0.6 - 0.3; // 多减去的 0.3 是为了让下载按钮距离底部有一点距离
  28.   $main.css({
  29.     height: curH + 'rem'
  30.   })
  31. }
  32. computeMain();
  33. window.addEventListener('resize', computeMain); // 当屏幕尺寸发生变化时，重新计算 main 区域的高度
  35. // 2. 通过 ajax 获取歌词
  36. $.ajax({
  37.   url: 'json/lyric.json', // 接口
  38.   method: 'GET', // HTTP METHOD: GET POST
  39.   async: false, // async 是否异步，默认值是 true
  40.   error (err) {
  41.     console.log(err)
  42.   },
  43.   success ({ lyric }) {
  44.     // console.log(lyric)
  45.     // lyric 就是我们需要的歌词数据，我们需要把歌词绑定到页面中
  46.     bindHTML(lyric)
  47.   }
  48. });
  50. // 绑定数据
  51. function bindHTML(data) {
  52.   // 处理第一句：
  53.   // 我的梦 (华为手机主题曲) - 张靓颖
  54.   // 我的梦&#32;&#40;华为手机主题曲&#41;&#32;&#45;&#32;张靓颖&#10;
  55.   // &#32; -> ' '
  56.   // &#40; -> '('
  57.   // &#41; -> ')'
  58.   // &#45; -> '-'
  59.   let d1 = data.replace(/&#(\d+);/g, (wholeMatch, group) => {
  60.     // replace 方法使用回调函数进行替换时，用回调函数的返回值替换正则捕获的内容；
  61.     switch (parseFloat(group)) {
  62.       case 32:
  63.         return ' ';
  64.       case 40:
  65.         return '(';
  66.       case 41:
  67.         return ')';
  68.       case 45:
  69.         return '-'
  70.     }
  71.     return wholeMatch // 本次替换我们只想处理 32 40 41 45；其他的情况我们不做替换，所以我们原样
  72.     // 返回大正则捕获到的内容
  73.   });
  75.   // console.log(d1)
  76.   // 处理每一秒的歌词
  77.   // [00&#58;08&#46;73]一直地一直地往前走&#10;
  78.   // &#58; 前面的数字是 分钟数
  79.   // &#46; 前面的是 秒数
  80.   // 方括号以后 &#10; 之前的是 歌词
  81.   let reg = /\[(\d+)&#58;(\d+)&#46;(?:\d+)\]([^&#]+)&#10/g;
  82.   let ary = [];
  84.   // 使用正则 + replace 遍历歌词，把需要的数据保存到数组中
  85.   d1.replace(reg, (wholeMatch, minute, seconds, value) => {
  86.     // 正则能够匹配到多少次，这个回调函数就会执行多少次
  87.     ary.push({
  88.       minute,
  89.       seconds,
  90.       value
  91.     })
  92.   });
  93.   // console.log(ary)
  95.   // 绑定数据
  96.   let str = ``;
  97.   ary.forEach(({ minute, seconds, value }) => {
  98.     str += `<p data-min="${minute}" data-sec="${seconds}">${value}</p>`
  99.   });
  100.   $wrapper.html(str);
  102.   // 歌词就绪后，让音乐自动播放
  103.   // audio.play(); // audio 元素上自带播放和暂停的方法；
  104.   // play 播放；pause 暂停
  106.   // $musicBtn.addClass('select')
  107. }
  109. // 处理音符按钮的点击事件: zepto 提供了一个 tap 方法用于给元素绑定触摸事件；
  110. $musicBtn.tap(function () {
  111.   // 如果音频是暂停的，需要让音频播放；如果是播放的，就让音频暂停；
  112.   // audio 有一个 paused 属性，是一个布尔值，true 表示处于暂停，false 表示正在播放
  113.   if (audio.paused) {
  114.     // 暂停的
  115.     audio.play();
  116.     $(this).addClass('select')
  118.     // 每隔一秒钟计算一下进度
  119.     autoTimer = setInterval(computeTime, 1000)
  120.   } else {
  121.     // 播放中
  122.     audio.pause();
  123.     $(this).removeClass('select');
  124.     clearInterval(autoTimer); // 当音频停止播放的时候，清除定时器；
  125.   }
  126. });
  128. let step = 0; // 前 5 行，歌词不会向上划动，所以需要记录当前匹配到多少行
  129. let curTop = 0; // 记录 wrapper 相对于 main 的 top 值；初始值是 0；
  131. function computeTime() {
  132.   // 获取当前音频的播放进度，audio 标签身上有两个属性：
  133.   // currentTime 表示当前音频已经播放的时间，单位：秒
  134.   // duration 表示当前音频的总时长，单位：秒
  135.   let { currentTime, duration } = audio;
  136.   let curTime = formatTime(currentTime);
  137.   let durTime = formatTime(duration);
  138.   // 把时间进度回填到页面中
  139.   $current.html(curTime);
  140.   $duration.html(durTime);
  142.   // 更新进度条: 进度条的宽度就是 当前时间 / 总时长 的百分比
  143.   $already.css({
  144.     width: currentTime / duration * 100 + '%'
  145.   });
  147.   // 高亮歌词：就是从 wrapper 下找到和当前播放进度匹配的歌词的 p 标签，然后给他增加 select 类名，同时移除其兄弟们的 select 类名
  148.   // curTime 02:34
  149.   let [min, sec] = curTime.split(':');
  150.   // console.log(min, sec)
  152.   let highLight = $('.wrapper p').filter(`[data-min="${min}"]`).filter(`[data-sec="${sec}"]`); 
  153.   // 是用 filter 方法把和当前播放进度匹配的歌词 p 标签找到；
  154.   if (highLight.length) {
  155.     highLight.addClass('select').siblings().removeClass('select')
  157.     // 匹配到一次给 step 累加1
  158.     step++;
  160.     if (step >= 5) {
  161.       curTop -= .84; // 让歌词向上移动一行，就是让 wrapper 的 top 值减小一个 p 标签的高度（0.84 就是 p 的高度）
  162.       $wrapper.css({
  163.         top: curTop + 'rem'
  164.       })
  165.     }
  166.   }
  168.   // 如果当前的播放时长大于等于总时长的时候，把定时器清除掉
  169.   if (currentTime >= duration) {
  170.     clearInterval(autoTimer);
  171.     $musicBtn.removeClass('select')
  172.   }
  173. }
  175. function formatTime(time) {
  176.   // time 157.12345 s
  177.   let min = Math.floor(time / 60);
  178.   let sec = Math.floor(time - min * 60);
  180.   if (min < 10) {
  181.     min = '0' + min
  182.   }
  183.   if (sec < 10) {
  184.     sec = '0' + sec
  185.   }
  187.   return `${min}:${sec}` // => 03:15
  188. }

5. 完整资源包

q-music.zip