Project name: VUE-fDS_music

Project author: Fu Daosheng

Open Source License: Apache-2.0

The address of the project: https://gitee.com/fudaosheng/vue-fds_music

Project introduction

Vue high imitation popular music player, basic realization of all music related functions.

The front-end of this project is independently developed by the author, and the technology stack used is Vue Family barrel + Better-Scroll + AXIOS.

For back-end interface sources and API installation, visit the project home page for detailed documentation.

Mixin

Advantages of the project

Personally, the biggest advantage of this project is how to trigger the music player. Generally, there are three ways to trigger the music player: EMIT, VUex and BUS.

1.$emit

Cons: There must be a parent-child relationship between the music player and the music component to play, which is obviously not practical in a music app.

2.vuex

With Vuex, you can first place the music to be played in vuex (let’s say in state’s MusicList), then listen for the musicList status in the music player component lifecycle function, and play the music when the musiclist is not empty.

Disadvantages:

1. There may be a phenomenon that MusicList is not empty but the listener is empty. Personally, I think it is the problem of page rendering sequence.

2. It takes mutations to modify musicList.

3.bus

Bus is used in this project. Use $bus so that you can listen to the music to be played regardless of the relationship between the music player and the music component to be played.

Project Catalog Introduction

Project renderings

Core of this project: how to play music

It is included in mixins so that it can be used on any page, reducing code repeatability.

import { _getMusicUrl, _getLyric } from "network/detail"
import { playList } from "components/content/playmusic/playList";
export const indexMixin = {
    methods: {
        PlayMusic(index = 0) {
            let path = this.$route.path;
            let musiclist;
            if (this.musiclist.length >= 200) {
                musiclist = this.musiclist.slice(0.199);
            }
            else musiclist = this.musiclist;
            let url = null,
                lyric = null,
                currentLength = 0;
            let playlist = [];
            for (let i = 0, length = musiclist.length; i < length; i++) {
                let getUrl = _getMusicUrl(musiclist[i].id).then(res= > {
                    url = res.data.data[0].url;
                    return url;
                });
                let getLyric = _getLyric(musiclist[i].id).then(res= > {
                    lyric = res.data.tlyric.lyric;
                    return lyric;
                });
                Promise.all([getUrl, getLyric])
                    .then(results= > {
                        let song = new playList(i, musiclist[i], results[0], results[1]);
                        playlist.push(song);
                        currentLength++;
                        /** Each time two network requests are completed to determine whether the requirements are met, and then send the event */


                        if (i == musiclist.length - 1) {


                            this.$bus.$emit("playMusic", playlist, index, path);
                        }
                    })
                    .catch(err= > {
                        this.$Message.warning('Data loading, please wait'); }); }}},Copy the code

When receiving in the music player component:

mounted() {
 /**list is the music list, index is the position of the music to be played in the list, path is the routing path of the current music */
    this.$bus.$on("playMusic", (list, index, path) => {
      this.music = [];
      this.path = path;
      this.music = list;
      // this.music = list.filter(item => {
      // return item.src ! = = "";
      / /});
      /** Sort the array */
      this.music = this.music.sort((a, b) = > {
        return a.index - b.index;
      });
      /** Some songs may be unavailable or missing at the time of the song request. Cause differences in the song list and page display in the player, it may appear that the specified playing song is not satisfied * use a lookup to resolve the problem */
      for (let i in this.music) {
        if (this.music[i].index == index) {
          this.currentIndex = i;
          break; //break breaks the loop ------continue breaks the loop}}}); },Copy the code

The project is still under continuous development, and the author has also found some problems in the development process, for example, there is no data for refreshing the singer details page.

Cause: I passed in a singer information object when the route jumped, and the singer details were obtained according to the id of this object.

 enterArtistDetail(artist) {
      this.$router.push({
        path: "/artist".query: {
          artist: artist
        }
      });
      this.$store.commit('addArtist',artist);
    }Copy the code

If you have ideas to solve this problem, you are welcome to click on the link to the project home page to propose PR, and the author will be happy to talk to Vue fans like him: gitee.com/fudaosheng/…