Make a simple music player with Php+h5+boostrap (advanced Version)

<span id="Label3"></p><p><p>Preface: before doing a music player (pure front end), unexpectedly popular, and then someone suggested I put the backstage together, just also want to learn backstage, so learn PHP for two days (don't spit groove My speed, slow work out deliberately ~) and then on the basis of the previous also perfected some features, So this demo than before can be considered as advanced ~v2.0 ha haha ~ feel very bad, so in the United States 美图秀秀 above to do a simple moving map, we feel</p></p><p><p>Body:</p></p><p><p>The usual, first ~ feel a little card, willing to wait for the wait, do not want to wait, look down, There are pictures to explain</p></p><p><p></p></p><p><p>Feature Implementation:</p></p><p><p>1. Click on the music list to play the music</p></p><p><p></p></p><p><p>2. Drag or tap the progress bar to adjust the music playback progress</p></p><p><p></p></p><p><p>3. Float to the volume control, the volume regulator appears, tap or drag to adjust the volume</p></p><p><p></p></p><p><p>4. Click the + pop-up modal dialog to add songs and lyrics</p></p><p><p></p></p><p><p>5. Click the Loop play button or the sequential play, such as the cycle of the single loop, if the order is played when the music automatically play the next song, such as the current song as the last, automatically turn to the first play</p></p><p><p></p></p><p><p>6. Delete song, If successful pop-up prompt succeeds, failure pop-up prompt fails</p></p><p><p></p></p><p><p></p></p><p><p>Summarize:</p></p><p><p>1. The improved part</p></p><p><p>1) before thought that the play button is the state of the display, the result is told that the click to show another button, to indicate that the current button is clicked, thank you for Popular Science ~ "eldest brother Bihat"</p></p><p><p>2) progress bar Pull and click the same as volume adjustment pull and click, because the progress bar not only involves playing songs and lyrics display, so first find soft persimmon pinch, do a volume adjustment, made a good while, mainly to get the mouse click on the coordinates, with Clientx to get always wrong, It will change with the size of the window, and then found a good thing pagex, this will not change with the window, and then the progress of a little more than a song lyrics problem, but because the lyrics before the method has been written all, so directly to the local transfer call on the ok~</p></p><p><p>3) put git to learn a bit, really really good use ah ~ to the world of Amway git (do not say my soil, for the novice git is really useless, not like JS This is required to learn the extent, in fact, is lazy "bay stretched Out") with git to manage the code really great, not used the small partners hurriedly to try it ~</p></p><p><p>2. Problems encountered</p></p><p><p>(1) Front-End Part:</p></p><p><p>1) lyrics before the problem with the original js, and then brushed the JQ (source has not finished brushing, I repent), the use of JQ to write, with data to bind the lyrics corresponding time, so in the setting of the lyrics style more simple, the result! When the page is not active (such as minimized), the lyrics scrolling is wrong ... The heart stuffed me, thought is data of the pot, The result is not, is JQ of the pot, when with JS set scroll top when there is no problem, so presumably because of JQ own internal mechanism? Ask for the true reason of the great God give me science, humbly ~</p></p><p><p>2) Bootstrap in the Progress-bar (progress bar Element) animation style is always eliminated, the first thought is the element style matching priority is not enough, the results of the div at all levels, oh, ID Oh all plus or not, depressed dead, feeling is against me, Later found that it is their own melon (this pot my back), to use transition-duration:0s (s not less), to set the completion time of the animation execution, This is the immediate completion of the meaning, the result is no animation effect. (do not animate this because, when you drag the progress bar, there are animations especially special melon, Imagine you have been dragged to the place for 1 minutes, The result behind the progress of the fart on the heels of the heel, watching on fire big, so must be eliminated! Well! ）</p></p><p><p>3) in the pop-up to add the song lyrics of the state box there would have wanted to set the animation effect (bootstrap implementation is animated), but because I am using JS to control its display and hide, so with the displays properties, dead changed half a day or no animation effect, the baby pained himself, The results show that the animation display and hiding is for opacity, for display can not set the animation of the show hidden, not my pot, open smoked ~</p></p><p><p>(2) background Part:</p></p><p><p>1) Database Section:</p></p><p><p>A) This is a low-level to my own are ashamed of the mistake, but forgive me this database slag bar, I write insert statement, changed for a long time, finally found! Actually because of the quotation marks, I added the data section after the values to insert each ", then the idea is that because they are strings Ah ~ quote is taken for granted, then I took it for granted that I was wrong, I repent ... Finally remember not to insert the data part of the quotation marks, and then take it for granted in the column name where the quotation marks, because they are strings Ah ~ quote is taken for granted it ~ "let The President beat me to death."</p></p><p><p>B) the database is always unable to choose, mysql_select_db () Implementation of the results are always inexplicable wrong, and later found that the pot is not it, because mysql_connect () I did not pass the parameters, so access to the database is not enough permissions, so not to. To pass in the parameters are ' localhost ' (this is generally the case), ' Database account ', ' password ', This should be the time you enter the MySQL set, if you forget, Baidu go to it ~</p></p><p><p>C) in the database itself inserted a test data, when taken out, the place of Chinese is all???? "black???? "what the hell??" Hurriedly find four Ye--yongzheng tyranny eight elder brother, in mysql_select_db () in front add a sentence mysql_query ("set names Utf8") on OK ~</p></p><p><p>2) file Upload:</p></p><p><p>A) originally planned to use $.post with JSON to pass the data, because async and will not jump to refresh the page, but I failed, here to ask the big God to share the experience, popular science with JSON how to get to file ~ when trying to use json, because to get the path of the file, So I used H5 's FileReader object, but!　　　　　　 Can not afford to think, it is estimated that this is the local service, service, and FileReader is used to obtain local files, so will be used when using Readasdataurl return Null. (the seriously Fu said eight way, again begged the big God appears, Popular Science popularization, is advantageous to the people quality enhancement "lina's shining small tiger tooth Laughs") abandons the JSON to use the form, the result changes the temporary file path, stores in the specified directory The time, has also reported failed to open stream: Invalid argument, What kind of a ghost is this? (open Stream failed: Invalid Argument) uh? I totally follow the above-mentioned, ah, I did not hand a cheap input error? The results found again, Chinese pot, (no, my beautiful block text is not wrong, ╭ (╯^╰) ╮) in the file name as a parameter passed in Mb_convert_encoding () as the first parameter, and then ' GBK ', ' UTF8 ') ok, now the world is clean, everything is fine, And I feel like I'm so cute</p></p><p><p>B) then test a variety of upload songs, and then delete, add a few more try, uh, all the same song you give the output to feel like a virus good??? Change! If the song file already exists in the specified directory, then you are prompted not to upload the same song repeatedly, and then act like you don't know what it is, and return to the Moroccan music player Page. File_exists (filename) is at your service. If there is a return of true, there is no put back false. ok~</p></p><p><p>Something:</p></p><p><p>Learning PHP The biggest sentiment is that backstage actually did not imagine so male, or very Niang cannon, a small by the appearance of being bullied, so want to like me the front-end small partners say, to learn php, it is really soft sister, haha, happy to learn php, and then to engage in nodejs, To abuse me lightly, the last last, the weekend also to work overtime program ape and siege lions, refueling Oh ~ Sarah Black "eldest Brother Bihat"</p></p><p><p> Make a simple music player with Php+h5+boostrap (advanced Edition) </p> </p></span>