Simple music player (Advanced edition) with PHP + H5 + Boostrap, h5boostrap

Simple music player (Advanced edition) with PHP + H5 + Boostrap, h5boostrap

A music player (pure front-end) was previously created and unexpectedly popular. Someone suggested that I do the background together and want to learn the background, so I learned php for two days (don't talk about my speed, please do it slowly ~) Then, some functions have been improved based on the previous steps. Therefore, this Demo is more advanced than the previous one ~ V2.0 hahaha ~ I feel that the experience is not good, so I made a simple motion picture on meitu xiuxiu.

Body:

Old Rules, first ~ I feel like I have some cards. If I want to wait, I will wait. If I don't want to wait, I will look down and explain it with pictures.

Function implementation:

1. Click the music list to play the music.

 

2. Drag or click the progress bar to adjust the music playing progress.

3. float to the volume control and the volume regulator appears. Click or drag to adjust the volume.

4. Click + to bring up the modal dialog box to add songs and lyrics.

5. click the loop playback button or play in sequence. For example, if it is a loop, the single loop is used. If it is an order, the next one is automatically played after the music is played. If the current song is the last one, it is automatically transferred to the first one.

6. Delete the song. If the prompt is displayed successfully, the prompt "success" appears. If the prompt "failed" appears, the prompt "failed" appears.

Summary:

1. Improvements

1) I thought the playback button was the status, and the result was told that another button was displayed after the button was clicked to indicate that the current button was clicked. Thank you ~ Big Brother bihart]

2) The pull and click of the progress bar are the same as the pull and click of the same volume adjustment. Because the progress bar not only involves the display of the playing songs and lyrics, you should first find a soft persimmon and adjust the volume, after a while, I mainly wanted to get the coordinates when I clicked the mouse. clientX was always incorrect. It changed with the size of the window and later found a good thing pageX, will this change with the window ~ The progress bar is slightly more about the lyrics, but because the method of the lyrics has been fully written before, you can directly find the correct place to call the parameter ~

3) I learned how to use git. It's really useful ~ To Amway git all over the world (don't talk about me, git is really of little use for cainiao. It is not as easy as js. In fact, to put it bluntly, it is just lazy ]) it's amazing to use git to manage code. If you have never used git, try it now ~

2. Problems Encountered

(1) Front-end:

1) The native js used before the lyrics problem, and then the jq (source code hasn't been fully refreshed yet, I regret it), I switched to jq, use data to bind the time corresponding to the lyrics. This makes it easier to set the lyrics and the results! When the page is not an activation state (for example, when minimized), an error occurs when the lyrics scroll... I thought it was a data pot, but the result was no. It was a jq pot. It was okay when I set the rolling top with js, so this is probably because of jq's internal mechanism? Thank you ~

2) In bootstrap, the animated style of the progress-bar (progress bar element) cannot be eliminated. At first, it was thought that the priority of element style matching was not enough, and the div at all levels was taken as the result, I am depressed, and I feel that it is against me. Later I found that it was my own (This pot is my back), and I want to use transition-duration: 0 s (s cannot be less). To set the animation execution completion time separately, this means immediate completion. If it is realized, there is no animation effect. (I don't want to play the animation here because the animation is very boring when I drag the progress bar. I think you have dragged it to a place for one minute, and the progress behind the result is nothing more than a fart, it is very popular, so it must be eliminated! Well !)

3) in the pop-up box that adds the song lyrics, I originally wanted to set the animation effect (bootstrap implemented the animation effect ), however, because I used js to control its display and hiding, I used the display attribute. After half a day, I still had no animation effect, and my baby was distressed, the results show that the animation display and hiding are for opacity. For the display, there is no way to set the animation display and hiding, not my pot ~

(2) Background:

1) database:

A) This is a low-level mistake that I am ashamed of myself. But forgive me for this database scum. I changed it for a long time while writing the insert statement, and finally found out! It's because of the quotation marks. I added ''to each part of the data to be inserted after values. The idea was that they were strings ~ If you put the quotation marks on it, I will take it for granted. I regret it... I finally remember that I didn't enclose the inserted data with quotation marks. Then I took it for granted that I added quotation marks to the column name because they are strings ~ Do you want to enclose the quotation marks ~ [Let the President beat me to death]

B) The database is always unavailable, and the execution result of mysql_select_db () is always inexplicable and wrong. Later, it was found that the pot was not in it because mysql_connect () didn't pass the parameter, so the database access permission was insufficient, therefore, it cannot be obtained. The parameter number to be passed in is 'localhost' (usually this parameter), 'database account', and 'Password'. This should be set when you enter mysql. If you forget it, go to Baidu ~

C) A test data is inserted into the database. when the data is obtained, all the Chinese characters are ???? [Black ????] What the hell ?? Hurry up and find Ye Si -- Yong Zheng specializes in Ba Ge, and add a mysql_query ("set names utf8") before mysql_select_db ~

2) file upload:

A) originally planned to use $. post works with JSON to transmit data, because it is asynchronous and does not jump to refresh the page. However, I failed. Please share your experience here. How can we get the file through JSON ~ When trying to use JSON, The H5 FileReader object is used because the file path is to be obtained,! I cannot afford it. I thought about it. It is estimated that this is a local server, server, and FileReader used to obtain local files. Therefore, null is returned when readAsDataURL is used. (Fu, a serious man, said "Ghost". He once again begged the great gods to show up and popularize science, which is conducive to improving the quality of the people. [Lina's shining hang grui]) he gave up JSON and switched to the form, as a result, when the path of the temporary file is changed and stored in the specified directory, failed to open stream: Invalid argument is always reported. What is this? (Failed to open the stream: Invalid parameter) er? I did it on W3C. I didn't mean it was wrong, right? It turns out that it is a Chinese pot. (No, my beautiful square text is correct. Finally (character ^ character) uploads) in the file name as a parameter to input mb_convert_encoding () as the first parameter, then 'gbk', 'utf8') OK, now the world is clean, everything is perfect, and I feel cute again ~

B) then test various types of uploaded songs, delete them, and add a few more. Er, all the identical songs are output to make them feel as virus-like ??? Change! If the song file already exists in the specified directory, you will be prompted not to upload the same song again, and then you will pretend that you do not know anything and return to the Moroccan music player page. File_exists (filename) serves you wholeheartedly. If yes, true is returned. If no value is returned, false is returned. OK ~

After that:

The biggest perception of learning php is that the backend is not as honest as you might think. It's just like being bullied, so I want to say to the front-end friends who are just like me, it's really a soft girl to learn php. Haha, I learned php with pleasure and then I want to build nodeJS, abuse me a little lighter. At the end, programmers and siege Lions who need to work overtime on weekends should come on ~ Saravideo [bigbi Hart]