H5 + Boostrap is used as a simple music player, h5boostrap

H5 + Boostrap is used as a simple music player, h5boostrap

The ghost source code has come to an end after this Demo. Next, the jQuery source code and the booking.js source code are coming to an end. The task is very arduous. Come on ~ I will not post the entire code here. If you are interested, you can send me a message and send the code to you ~

Body:

First

1. layout: The responsive and Adaptive Layout in Boostrap cannot be run, and the nested row in the iner can be nested with aside and main respectively (New H5 tag) and div (id = "musicConsole "). Aside is the music list on the left, main is the lyrics display box on the right, and div is the control box below.

2. Main functions:

(1) Add a song (the "+" icon in the top-right corner of the song list) and delete a song (the "garbage bin" icon in the top-right corner of the song list)

(2) Click a song in the song list. The songs will be played. If there are lyrics, the lyrics will be displayed in a rolling manner. If there are no lyrics, "no lyrics" will be displayed "; the progress bar and time will change with the playing of the song.

(3) Click the last button (vertical line + triangle) to play the last song: if there is a lyrics, the lyrics will be displayed rolling, and if there is no lyrics, "no lyrics" will be displayed "; the progress bar and time will change with the playing of the song.

Click the play button (triangle) to change to the pause button (double vertical bars), and the song changes from playing status to paused.

Click the next button (Triangle + vertical line) to play the next song: if there is a lyrics, the lyrics will be displayed rolling, and if there is no lyrics, "no lyrics" will be displayed "; the progress bar and time will change with the playing of the song.

Click the audio button (speaker) to mute the Song (speaker + "x.

Click the loop button (circle with arrows) to change to a single playback. If you keep the loop button, the single loop will be repeated.

3. Problems:

(1) Use font-size to change the glyphicon size

Because the Boostrap icon is used, the default size is too small. After a try, the width and height are not reflected, and the font-size is used to change the size.

(2) str. replace (oldStr, newStr)

When you click the play button, the playback status will change and the icon of the corresponding button will also be changed. Therefore, replace is used and no response is made for half a day, the result is that it re-generates a string, instead of directly modifying the original string, orz

(3) It is difficult for the browser to read local files due to security considerations.

I was going to use localStorage to store the content in the music list. I tried it for half a day with H5 FileReader. No way, I just gave up on this road. FileReader can be used to read images or html files. Its readeAsDataURL method can get the file path. When it comes to this, I really want to laugh. I tried to save a music file, OK, and then, what? Is localStorage memory used up? Can I store a file path at 5 MB? Tease me?

The following questions are all about the lyrics... I feel really tired when I do it...

(4) problems encountered when parsing the lyrics

The lyrics are generally lrc files. They are actually plain text files. AJAX can be used to obtain data transmitted from the background, but they can only be copied directly without being played with me in the background, written in strings as dead data. The original plan was to use split ('\ r \ n') to break down the character string into the lyrics of a sentence and put them in an array. Various Errors were reported. After half a day, I finally located the split and checked it online for half a day. Oh, it turned out to be a js pot. Because the js syntax does not force extra points at the end of the end, the system line break (that is, press Enter) will be stuck. There are two main solutions: 1) manually delete line breaks and use \ n for line breaks. This solution will have line breaks on the page. 2) Add \ In Front Of The system line breaks \, this solution has no line breaks on the page.

(5) problems encountered when rolling the lyrics

After the lyrics are successfully added, they are displayed perfectly, but they must be synchronized with the music. Compared with the current playback time, the top of the corresponding lyrics list is moved up, when the lyrics are empty, and the final boundary judgment, after all these problems are fixed, a loop is coming up, and the lyrics cannot be re-displayed. After a long time, I went there because when the loop was set to true, the ended event could not be monitored. I had to discard the loop and add the loop judgment to the ended event. Well, it's good. It's a perfect display, and I'm a little excited. When it comes to the mess, the test still seems to have no questions, think about the time when the knot can be completed, and then the wrong cold desert .jpg], then adjust it. First, find out the cause of the error. In the F12 developer tool (I went to Baidu and wrote it above), there were two active style changes in the lyrics added at the same time, so it's so fast to scroll up, and it's just a little bit of time. Find the culprit, setTimeout. Because it is a recursive call, clclearTimeout is required to clear it. OK. Now it's okay.

After that:

Ah, well, because I have been fascinated by the trojan recently, I would like to give my player a friendly name called "Moroccan player ~ [Eldest Brother bihart] It took three days to make this Demo. It took more than half of the time to tune the lyrics alone. It can be seen that the main problems encountered were the display of the lyrics, and they were drunk. However, no matter how you say it, you finally make it, and you can see that it can finally be rolled normally, that sense of accomplishment is still quite there. Although I made it, I found the error orz when I wrote this blog. Well, let's just take it as "the elegant and elegant Moroccan Player 1.0 ~ Have lunch ~