Preface: This is a summary of the small demos I have learned recently. It is still a long way to use them, but it is still good to practice and consolidate knowledge points. Recently, I was browsing the source code of JS books and Boostrap.css. After doing this demo, it is a temporary end. Next is the source code of jQuery and the source code of Boostrap.js. The task is very arduous. Come on, I won’t post the code in the whole article. If you are interested, you can send me a message and you can pass the code to you~
text:
First, the renderings
1. Layout: The responsive and adaptive layout in Boostrap cannot be eliminated. The nested row in the container is then nested aside and main (H5 new tag) and div (id="musicConsole") respectively. 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 implementation functions:
(1) Add songs (the "+" icon in the upper right corner of the song list) and delete songs (the "Trump" icon in the upper right corner of the song list)
(2) Click on the song in the song list: For the track will be played; if there are lyrics, the lyrics will be displayed, and if there are no lyrics, the "No lyrics" will be displayed; the progress bar and time will change as the song plays.
(3) Click the previous button (vertical line + triangle) and the previous song will be played: if there are lyrics, the lyrics will be displayed scrolling, and if there are no lyrics, the "No lyrics" will be displayed; the progress bar and time will change as the song plays.
Clicking the play button (triangle) will change to the pause button (double vertical lines), and the song will also change from the play state to the pause state accordingly.
Click the next button (triangle + vertical line) and the next song will be played: if there are lyrics, the lyrics will be displayed, and if there are no lyrics, the "No lyrics" will be displayed; the progress bar and time will change as the song plays.
Clicking the audio button (speaker), it will become a mute button (speaker + "x"), and the song will also become mute accordingly.
Clicking the loop button (circle with arrows) will become a single playback. Keep loop button and the single loop will be repeated.
3. Problems encountered:
(1) The size of glyphicon is changed by font-size
Because the Boostrap icon is used, the default size is too small. I tried width and height but didn't respond. I realized that I used font-size to change the size.
(2) str.replace(oldStr,newStr)
When clicking the play button, the playback status will be changed, and the button icon will be changed accordingly. Therefore, replace is used, but it has not responded for a long time. It turned out that it is because it is regenerating a string, not directly on the original string, orz
(3) It is difficult for browsers to read local files due to security considerations
I originally planned to use localStorage to store the contents in the music list, but I tried it with H5's FileReader for a long time, but there was no way. I had to give up.
FileReader can be used to read pictures or html files. Its readAsDataURL method can get the file path. Speaking of this, I really want to laugh. I tried to save a music file. OK, let's go, what? Is localStorage running out of memory? 5M saves a file path? Funny me?
The following questions are all in the lyrics. . . I feel very tired when doing it. . .
(4) Problems encountered when analyzing lyrics
The lyrics are usually lrc files, but they are actually plain text. Use AJAX to get data transmitted from the background, but there is no background to play with me, so I can only copy the lyrics directly and write them in a string as dead data.
It was originally planned to use split('/r/n') to break the string into lyrics of sentence by sentence and put it in an array.
As a result, I reported various errors. After a long time of work, I finally found it on this split. I checked it online for a long time, and it turned out to be the js pot.
Because js syntax does not force a semicolon to be added at the end, using the system line break (i.e., carriage return) will be stuck. There are two main response plans:
1) Manually delete the newline character and use /n newline instead. This solution will have a newline effect on the page.
2) Add / before the system line break character, this scheme has no line break effect on the page
(5) Problems encountered when scrolling lyrics
After the lyrics are added successfully, it is displayed perfectly, but it must be synchronized with the music. Comparing with the current playback time, how much the corresponding lyrics list moves upward, when the lyrics are empty, the final boundary judgment, and after all these problems are solved, a loop playback appears, and the lyrics cannot be displayed again. After a long time, I went there. It was because when loop=true, the ended event could not be listened to. There was no way, so I could only abandon the loop and add the judgment of the loop into the ended event.
Well, it's very good, perfectly displayed, and I'm a little excited. It's a little messy everywhere, and the test shows if there are any problems. When I thought it would be possible to finish, I made another mistake [Indifference.jpg], so let's adjust it. First find out the reason for the error. In the F12 developer tool (I went to Baidu, which is what I wrote above), I saw that two lyrics have been added at the same time, so the scrolling up will be so fast, and it will jump up and down a while. The culprit was found, setTimeout. Because it is a recursive call, clclearTimeout is needed to clear it. OK, there is basically no problem now.
Later on:
Ah, and, because I am fascinated by the red deer recently, I kindly named my player "Morocco Player"~ [Big Brother Bihart] It took three days to make this demo, and the lyrics alone were adjusted more than half of the time. And you can see that the main problems encountered were the display problems of the lyrics, and I was drunk. However, no matter what, I finally made it. Seeing that it finally rolled out normally, the sense of accomplishment was still very good. Although it was done, just as I was writing this blog, I found the error orz again.
The above is what the editor introduced to you to create a simple music player using HTML5+Boostrap. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!