10月27号28号29号30四天PC端云音乐项目总结

Posted 2021-12-03 усил

🌈前序

本来是昨天要写总结的，昨天就已经基本完成了将音乐进度条移植到项目中并且与音频实现联动的。
但是，昨天晚上自己手贱😂，为了将功能实现的更好，希望能够实现保存之前用户播放的歌曲，下次打开时能够直接显示出来。就是要增加这个功能，一直再改，改到晚上8，9点。没改出来，还出来了bug。所以就没时间写总结。🤣

🌈四天的内容展示

• 美化 MV 详情页💪🏻

每一个 MV 详情页都不一样（背景图不一样）👍🏻

---

• 音乐进度条💪🏻
  

---

• 歌单播放页💪🏻

已经实现进度条拖拽、音频、歌词三者联动（歌词拖拽目前为实现）。误差 3~4 秒左右

项目访问地址： https://pc-music.vercel.app 目前还有bug，功能还不是很完善

🌈遇到的问题

🔥进度条与音频联动

✨页面的绘制相对简单，主要是拖拽过程，及其结束后如何换算成时间，进而使音频移动到相对应位置。

 <div class="prograss-container">
     <div class="current-time"></div>
     <div class="bar" @mousedown="barDown"></div>
 </div>

// 音频监听
audioInit() {
    let audio = document.querySelector("audio");
    // 播放中
    audio.addEventListener("timeupdate", ()=> {
    // 获取此时播放时间
      let currentTime = audio.currentTime * 1000;
      // 更新时间戳
      this.timeStamp = currentTime;
    });

    // 播放结束
    audio.addEventListener("ended", () => {
      this.$store.dispatch("saveMusicPrograss", false);
      console.log("音频播放结束");
      // 进度条到底
      this.timeStamp = this.songTime;
    })
},

// 进度条监听
prograssInit() {
   // 保存进度条长度
    this.prograssDistance = document.querySelector(".prograss-container").offsetWidth     document.querySelector(".bar").offsetWidth;
  // 监听进度条拖拽
    document.onmousemove = e => {
        if (this.down) {
          let x = e.pageX;
          let bar = document.querySelector(".bar");
          // 进度条容器
          let container = document.querySelector(".prograss-container");
          let current = document.querySelector(".current-time");
          let prograss_left = document.querySelector("#music-prograss")
            .offsetLeft;
          let container_left = container.offsetLeft;
          let container_width = container.offsetWidth;
          let bar_width = bar.offsetWidth;
          // 移动的距离
          let distance = x - container_left - prograss_left - bar_width / 2;

          // 判断是否超出范围
          distance = distance < 0 ? 0 : distance;
          distance =
            distance > container_width - bar_width
              ? container_width - bar_width
              : distance;

          // 设置样式
          bar.style.left = distance + "px";
          current.style.width = distance + "px";

        
          // 保存当前滑动的距离
          this.currentDistance = distance;
     }
  };
 // 停止拖拽
 document.onmouseup = () => {
   if (this.down) {
        // 停止拖拽
        this.down = false;
        // 更新当前音频时间
        this.currentTime();
    }
};

🔥进度条与歌词联动

进度条与歌词的联动比较好做点👍🏻，由于音频的 timeupdate 事件，输出的音频时间是小数点后7，8位。而之前请求回来的歌词，进行可视化时，我是原样保存的，数据可能就保留小数点后两位左右，因此，✨我这里是直接去匹配他们整数部分。

// 播放中
audio.addEventListener("timeupdate", ()=> {
    // 获取此时播放时间
    let currentTime = audio.currentTime ;
    // 更新时间戳
    this.timeStamp = currentTime * 1000;
    let value = ("" + currentTime).split(".")[0];
    for(let i = 0; i < this.parseLyric.length; i++) {
        if(("" + this.parseLyric[i].time).split(".")[0] == value) {
           this.active = i;
           let lrc = document.querySelectorAll(".lrc")[i];
           lrcContainer.style.top = 100 - lrc.offsetTop  + "px";
           break;
        }
    }
});

🔥 如何保证全局只有一个音频标签

一开始我是动态创建 audio标签，这就导致说，如果 localStorage 是否存在时，会直接导致，页面中可能出现多个 audio标签 导致无法去控制🤣。

昨天就是因为这问题，改了挺久的。一直按照动态创建audio的标签去实现，但想了很多方法，尝试多种方法后，还是无法去保证全局左右一个音频标签😂。

最后就放弃这个方法😂，直接再页面最开始就放入一个audio标签，这样我就能确保说，我✨全局一定只有一个音频标签✨。主要数据更新方面，我就重新去想办法去解决。

最终，昨天晚上可以说已经实现了，这是说出现了一个小问题：音频无法播放（确定音频是没有问题的）控制台输出： ✨大概意思就是音频无法自动播放✨。当时思路也比较乱🤣，因为尝试很多方法，有些写到一半就推翻了，又得重来😂。所以就没去细究，放到了今天才来解决👌🏻。

🔥谷歌平台对于音频设置了一些权限

音频之所以不能自动播放是因为平台做了限制，当用户进入页面时，是不能自动播放音频（包括视频）。要播放，有一个前置条件就是：✨用户主动通过一些操作，从而触发到音频（视频）播放。

但我之前通过动态创建audi标签 时，并且首次进入页面，是能够播放的。我也不知道这是什么原因。 😂

🌈总结

到目前为止，我认为最难的部分就是音频、进度条、歌词三者联动是最难🤣，并且在页面跳转切换时，进度条又得出现在特定位置，还有数据的传输和网路对音频的影响。音频不存在时，又得做好处理。现在功能是基本实现💪🏻，可能细节方面还是有点小问题🤣。还有就是：✨歌词与进度条的联动会很难，因为得考虑的因素会很多（相比较进度条与音频、进度条与歌词）。计划的话：希望下周三就能把项目完成好！！🥰🥰🥰

PC端云音乐项目专栏