Make a simple music player with H5+boostrap

Preface: This is a synthesis of my recent learning things to do the small demo, to the actual use and distance, but to practiced hand to consolidate knowledge points or good, recently in two brush JS book and BOOSTRAP.CSS source code, finished this demo is also a temporary, next is the source of jquery and Boostrap.js source code, the task is very arduous, refueling ~ here is not the entire post code, if interested in the small partner can send messages to me, you can pass the code to you ~

Body:

First on

1. Layout: Boostrap in the response and adaptive layout is not natural to escape, container nested row is nested aside and main (H5 new tag) and Div (id= "musicconsole"). Aside is the music list on the left, main is the lyrics box on the right, and Div is the control box below.

2. Main realization Function:

(1) Add songs (the "+" icon in the top right corner of the song list) and delete songs ("Trash" icon in the top right corner of the song list)

(2) Click the song in the song list: will play for the track, if there are lyrics, scroll to display the lyrics, if there is no lyrics then the "no lyrics"; The progress bar and time will change as the song plays.

(3) Click on the Previous button (vertical bar + triangle), will play the previous song: If there are lyrics, then scroll to display the lyrics, if there is no lyrics will show "no lyrics"; The progress bar and time will change as the song plays.

Clicking the play button (triangle) changes to the pause button (double vertical bar), and the song also changes from the playback state to the paused state.

Click the Next button (triangle + vertical bar), the next song will play: if there are lyrics, then scroll to display the lyrics, if no lyrics will show "no lyrics"; The progress bar and time will change as the song plays.

Click on the Sound button (speaker), will become the mute button (horn + "x"), the song is also corresponding to the mute state.

Clicking the loop button (the circle with the arrow) will change to a single play and the Loop button will repeat the single loop.

3. Problems encountered:

(1) The size of the Glyphicon is changed with Font-size

Because the use of the Boostrap icon, the default size is too small, try to width and height did not respond, only to reflect, is to use font-size to change the size of

(2) str.replace (OLDSTR,NEWSTR)

Click the Play button, will change the playback state, the corresponding Change button icon, so used to replace, do not have a half-day reaction, the results found is because it is to regenerate a string, not directly on the original string, Orz

(3) Browser for security reasons, it is difficult to read local files

Originally intended to use Localstorage to save the contents of the music list, with H5 FileReader tried half a day, no way, blocked only give up. FileReader can be used to read pictures or HTML files, its Readeasdataurl method can get the file path, speaking of this, I really want to laugh, I tried to save a music file, OK, then, what? Localstorage memory run out? 5M save a file path? You kidding me?

The following questions are all part of the lyrics ... Do the time really have a very tired feeling ...

(4) Problems encountered in parsing lyrics

The lyrics are generally the LRC file, in fact, is plain text, with Ajax can get back to the background data, but no backstage with me to play ah, so can only directly copy the lyrics, as dead data, written in the string. The original plan was to use split (' \ r \ n ') to break the string into a sentence of lyrics and put it in an array. Results of various errors Ah, engaged in a half-day, the final positioning in this split on, online search for half a day, oh, the original is JS pot. Because the JS syntax does not force a semicolon at the end of the line, the system wraps the Inode (that is, the carriage return) is stuck. There are two main solutions: 1) Manually remove line breaks, instead of a newline, this scheme will have a line break effect on the page 2) in front of the system line break and \, this scheme does not have a line-wrapping effect on the page

(5) Problems encountered when scrolling lyrics

After the lyrics added successfully, the perfect display, but also with the music synchronization, and the current playback time of the comparison, the corresponding lyrics list of the top move how much, when the lyrics are empty judgment, the final boundary of the judgment, these problems are done, and then out of a loop to play, the lyrics can not be re-displayed. Engaged for a long time, I went, incredibly because of loop=true, ended event monitoring, no way, can only discard loop, in the event of ended added to the loop judgment. Well, very good, perfect show, mood a little excited. Everywhere, the test to see if there is no problem, think should be able to end the time, and error "indifference. jpg", then adjust it. First find out the cause of the error, in the F12 developer tools (I go to Baidu, it is so written), see the lyrics active style changes actually have two simultaneously add, so scroll up so quickly, but also a moment on the next hop. Find the culprit, setTimeout. Because it is a recursive call, it needs to be clcleartimeout to clear. OK, now basically no problem.

Something:

Ah, and, because I am very fascinated by the red deer recently, so kindly to my player to take a name called "Moroccan player" bar ~ "eldest brother Bihat" to do this demo took three days, only the lyrics on more than half of the time, and you can see that the main problem is the lyrics display problems, drunk. However, anyway, finally made, see it finally can normal roll, the sense of accomplishment is still very much. Although it was done, but as I wrote this blog, I found the wrong orz. Well, then let's just think of it as "noble elegance, Grace, gorgeous Moroccan player 1.0" bar ~ Lunch Go

Category: Front-end Learning Small reprint Original: http://www.cnblogs.com/zllwebstudy/p/5740848.html

Make a simple music player with H5+boostrap