Using Html5+boostrap to create simple music player _javascript tips

Preface: This is a synthesis of my recent learning things do small demo, to the actual use of the distance, but used to practicing consolidate knowledge points is good, Recently in the two brush JS and Boostrap.css source code, finished this demo is also a temporary ending, the next is the source of jquery and Boostrap.js source code, the task is very difficult, refueling ~ in this will not be the whole post code, if interested in the small partner can send a message to me, Can pass the code to you ~

Body:

First on the effect chart

1. Layout: The response and adaptive layouts in the Boostrap are naturally not run away, and nested row in container is nested aside and main (H5 new label) and Div (id= "musicconsole") respectively. Aside is the music list on the left, and main is the right side of the lyrics display box, Div is the following control box.

2. Main realization Function:

(1) Add song (the "+" icon in the upper right corner of the song list) and delete the song (The Trash Box icon in the upper right corner of the song list)

(2) Click on the songs in the list of songs: will play for the track, if there are lyrics, then scroll to show the lyrics, if there is no lyrics will show "no lyrics"; Progress bars and times 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 show the lyrics, if no lyrics will show "no lyrics"; progress bar and time will change as the song plays.

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

Click on the Next button (triangle + vertical bar), will play the next song: If there are lyrics, then scroll to show 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 (horn), will become mute button (horn + "x"), the song also changed to mute state.

Clicking the Loop button (circled with an arrowhead) becomes a single play, keeping the loop button repeating the single loop.

3. Problems encountered:

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

Because of the use of the Boostrap icon, the default size is too small, try the width and height did not respond to the reaction, 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 also want to change the button icon, so used to replace, did not respond to a half-day, the results found is because it is to regenerate a string, not directly in the original string above change, Orz

(3) browser Because of security considerations, it is difficult to read local files

Originally intended to use Localstorage to save the content of the music list, with H5 FileReader tried a half-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, really want to laugh, I tried to save a music file, OK, again, what? Localstorage memory running out? 5M save a file path? Tease me?

The following questions, all the lyrics section ... Do the time really have a very tired feeling ...

(4) Problems encountered in parsing lyrics

Lyrics are generally LRC files, in fact, is plain text, with Ajax can get back to the data, but no backstage with me to play ah, so you can only directly copy the lyrics, as dead data, written in the string.

The original plan was to split the string into a sentence of lyrics and put it in an array.

The results of various errors Ah, engaged in a half-day, the final positioning in this split, online check for a long time, oh, is the original JS pan.

Because the JS syntax does not force a semicolon at the end, the system-wrapping specifier (that is, carriage return) is jammed to death. There are two main coping options:

1 Manually delete line breaks, use \ n line break, this scheme will have a line-wrapping effect on the page

2 in front of the system line break, this scheme has no line wrapping effect on the page

(5) Problems with scrolling lyrics

The lyrics added successfully after the perfect display, but also to sync with the music, and the current playback time, the corresponding lyrics list top move up how many, when the lyrics are empty when the judgment, the final boundary of the judgment, these problems are fixed, and out of a loop play, lyrics can not be displayed again. Engaged in a half-day, I go, incredibly because of loop=true, ended event monitoring is not, no way, can only abandon loop, in the ended of the event to add to the loop of judgment.

Well, very well, the perfect display, a little excited mood. Everywhere disorderly, test to see whether there is any problem, think should be able to end the time, and wrong "indifference. jpg", and then tune it. First find out the cause of the error, in the F12 developer tools (I go to Baidu, which is written above), see the lyrics active style changes actually have two add, so the upward scrolling will be so fast, and a little while on the jump. Find the culprit, settimeout. Because it is a recursive call, you need to clcleartimeout to clear it. OK, now basically no problem.

Something:

Ah, also, because I recently very red deer ah, so kindly give my player name is "Moroccan player" bar ~ "Big Brother Bihat" to do this demo took three days time, the lyrics are more than half of the time, and you can see that the main problem is the lyrics display problems, drunk. However, anyway, finally made it, see it finally can be normal roll, that sense of achievement is still very much. Although it has been done, but as I write this blog, I found the error orz.

The above mentioned is a small set to introduce the use of Html5+boostrap to create a simple music player, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!