🌈 Preamble

It was supposed to write a summary yesterday. Yesterday, it was basically completed to transplant the music progress bar into the project and realize linkage with audio.
But I was cheap last night 😂， In order to realize the function better, we hope to save the songs played by the user before and display them directly when opening next time. This function should be added. It should be changed until 8 or 9 p.m. It hasn't been changed, and there are bug s. So there's no time to write a summary. 🤣

🌈 Four day content display

• Beautify MV detail page 💪🏻

Each MV detail page is different (the background image is different) 👍🏻

• Music progress bar 💪🏻
  

• Song list playing page 💪🏻

The progress bar drag, audio and lyrics linkage has been realized (lyrics drag is currently realized). The error is about 3 ~ 4 seconds

Project access address: https://pc-music.vercel.app There are still bug s, and the function is not very perfect

🌈 Problems encountered

🔥 Progress bar and audio linkage

✨ The drawing of the page is relatively simple, mainly the dragging process and how to convert it into time after it is completed, so as to move the audio to the corresponding position.

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

// Audio monitor
audioInit() {
    let audio = document.querySelector("audio");
    // Playing
    audio.addEventListener("timeupdate", ()=> {
    // Get the playback time at this time
      let currentTime = audio.currentTime * 1000;
      // Update Timestamp 
      this.timeStamp = currentTime;
    });

    // End of playback
    audio.addEventListener("ended", () => {
      this.$store.dispatch("saveMusicPrograss", false);
      console.log("End of audio playback");
      // Progress bar to the end
      this.timeStamp = this.songTime;
    })
},

// Progress bar monitoring
prograssInit() {
   // Save progress bar length
    this.prograssDistance = document.querySelector(".prograss-container").offsetWidth     document.querySelector(".bar").offsetWidth;
  // Monitor progress bar drag
    document.onmousemove = e => {
        if (this.down) {
          let x = e.pageX;
          let bar = document.querySelector(".bar");
          // Progress bar container
          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;
          // Moving distance
          let distance = x - container_left - prograss_left - bar_width / 2;

          // Determine whether it is out of range
          distance = distance < 0 ? 0 : distance;
          distance =
            distance > container_width - bar_width
              ? container_width - bar_width
              : distance;

          // Set style
          bar.style.left = distance + "px";
          current.style.width = distance + "px";

        
          // Saves the current sliding distance
          this.currentDistance = distance;
     }
  };
 // Stop dragging
 document.onmouseup = () => {
   if (this.down) {
        // Stop dragging
        this.down = false;
        // Update current audio time
        this.currentTime();
    }
};

🔥 Progress bar and lyrics linkage

The linkage between progress bar and lyrics is better 👍🏻， Due to the audio timeupdate event, the output audio time is 7 or 8 digits after the decimal point. When I visualize the lyrics requested back before, I save them as they are, and the data may be about two decimal places. Therefore, ✨ I'm here to match their integer parts directly.

// Playing
audio.addEventListener("timeupdate", ()=> {
    // Get the playback time at this time
    let currentTime = audio.currentTime ;
    // Update Timestamp 
    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;
        }
    }
});

🔥 How to ensure that there is only one audio tag globally

At the beginning, I created audio tags dynamically, which means that if localStorage exists, it will directly lead to multiple audio tags in the page, which can not be controlled 🤣.

It was because of this problem that it was changed for a long time yesterday. It has been implemented according to the dynamic creation of audio tags, but after thinking about many methods and trying many methods, it is still unable to ensure one audio tag around the world 😂.

Finally, give up this method 😂， Put an audio tag directly at the beginning of the page, so that I can ensure that I ✨ There must be only one audio tag globally ✨. In terms of major data updates, I'll find a new way to solve it.

Finally, it can be said that it was implemented last night, which means that there is a small problem: the audio cannot be played (it is determined that the audio is OK) console output: ✨ The audio cannot be played automatically ✨. At that time, the thinking was also chaotic 🤣， Because I tried many methods, some were overthrown in the middle of writing and had to start again 😂. So I didn't study it carefully. I didn't solve it until today 👌🏻.

🔥 The Google platform has set some permissions for audio

The reason why audio cannot be played automatically is that the platform has made restrictions. When users enter the page, audio (including video) cannot be played automatically. To play, there is a precondition: ✨ The user actively triggers audio (video) playback through some operations.

However, when I created an audi tag dynamically and entered the page for the first time, I was able to play it. I don't know why. 😂

🌈 summary

So far, I think the most difficult part is the linkage of audio, progress bar and lyrics 🤣， And when the page jumps and switches, the progress bar must appear in a specific position, as well as the impact of data transmission and network on audio. When the audio does not exist, you have to deal with it. Now the function is basically realized 💪🏻， Maybe there's still a little problem with the details 🤣. There are also: ✨ The linkage between lyrics and progress bar will be difficult because there will be many factors to consider (compared with progress bar and audio, progress bar and lyrics). Plan words: I hope the project can be completed next Wednesday!! 🥰🥰🥰

PC cloud music project column