Make a music player with JavaScript and HTML5, with source code

：

Features implemented

1. Home

2. The bottom play control

3. Play the page

4. Play List

5. Ranking

6. Music Search

Enter search keywords, click the magnifying glass icon

7. Side Bar

Directory structure

Development experience and summary

1. Carousel Map

First of all thanks to the author Shanamaid/vue-image-scroll Open source code, I copy the code to make a little change (no finger sliding effect), because this is the mobile side, without the finger sliding switch, so added Vue-touch (secretly tell you, Vue-touch's next branch is still supported by vue2.0).

Address: Https://github.com/hzzly/MagicMusic/blob/master/src/components/banner.vue

2, song operation (like, share, join playlist) animation, playlist expand and delete song animation Vue provides transition packaged components that can add entering/leaving transitions to any element and component in the following scenarios

• Conditional rendering (using V-IF)

• Condition display (using v-show)

• Dynamic components

• Component root Node

Transition-group a group of over-animation, where there is a small pit, before the crossing network list of the chestnut transition, to each set a unique key value, will generally use index. So at the time of doing the index to key, the result of the transition is always wrong, and later replaced by the corresponding item is normal (born without a love face).

3, Straight line progress bar, ARC progress bar

The Spanish architect once said: "The straight line belongs to the human, the curve is attributed to God". Here I boldly used the arc as a progress bar, (several popular music apps seem to have no arc progress bar).

Here, I used the Vue binding inline style.

4. Local Storage

Caching some data to Localstorage can reduce HTTP requests to optimize page load times.

In this project, the home page song list and search history used the local cache, take the search history to raise the chestnut:

5. Lazy Loading of pictures

Using the Vue-lazyload plugin

Usage:

6. Scroll and Highlight lyrics

Because the API provides lyrics that include time, such as:

[03:57.28] Forgive me this life unruly indulgence love freedom

So the first thing to do is string cutting:

Then compare the playback with the current playback in the Listening event:

Okay, here we go.

7. Vuex State Management

Recommended official Debugging Tools Devtools Extension

Before I saw a lot of people write Vuex, put the entire project data into a state, resulting in the application of all States to a large object. However, when the application becomes large, the store object becomes bloated.

So I suggest (personal opinion, light spray): Divide the store into modules (module). Each module has its own state, mutation, action, getters. This facilitates management and post-maintenance.

The car has arrived??。

Unconsciously write so much, old iron do this look, think also can point like, need complete code practice Dabigatran: 453833554 has been uploaded to the group file.

Make a music player with JavaScript and HTML5, with source code