前言：之前做了一個音樂播放器（純前端），意外的受歡迎，然後有人建議我把後台一起做了，正好也想學習後台，所以學了兩天php（不要吐槽我的速度，慢工出細活嘛~）然後在之前的基礎上也又完善了一些功能，所以這個Demo比之前的可以算是進階呢~v2.0哈哈哈~感覺截圖體驗很不好呢，所以在美圖秀秀上面做了簡易的動圖，大家感受感受
正文：
老規矩，先上圖~感覺有點卡，願意等的就等等嘛，不願意等的，往下看，有圖片講解
功能實現：
1.點擊音樂列表播放音樂
2.拖動或點擊進度條，調節音樂播放進度
3.浮動到音量控件上，出現音量調節器，點擊或拖動可調節音量
4.點擊+彈出模態對話框，添加歌曲及歌詞
5.點擊循環播放按鈕或順序播放，如為循環則單曲循環，若為順序則當音樂播放完畢自動播放下一首，如當前歌曲為最後一首，自動調轉到第一首播放
6.刪除歌曲，若成功彈出提示成功，失敗彈出提示失敗
總結：
1.改進的部分
1）之前以為播放按鈕是表示的狀態，結果被告知是點擊之後顯示另外一個按鈕，以表示當前按鈕被點擊，謝謝科普~【大哥比哈特】
2）進度條拉動和點擊同音量調節的拉動和點擊異曲同工，因為進度條不止涉及播放歌曲還有歌詞的顯示，所以先找軟柿子捏，做了音量調節，搞了好一會兒，主要是要獲取鼠標點擊時的坐標，用clientX來獲取老是不對，它會隨著窗口大小變化，後來發現了一個好東西pageX，這個會不會隨窗口變化，然後就水到渠成啦~進度條稍微多一個歌詞的問題，但是因為之前把歌詞的方法已經寫全了，所以直接找對地方傳參調用就ok~
3）把git好好學了一下，真的真的好好用啊~向全世界安利git（不要說我土，對於菜鳥來說git確實用處不大，不像js這種是必學的程度，其實說白了就是懶【攤手】）用git來管理代碼真的超棒，沒用 過的小伙伴趕緊去試試吧~
2.遇到的問題
（1）前端部分：
1）歌詞問題 之前用的原生js，後來又刷了一遍jq（源碼還沒刷完，我悔過），就改用jq寫了，用data來綁定歌詞對應的時間，這樣在設置歌詞樣式的時候更簡單些，結果！當頁面不是激活狀 態（如最小化時），歌詞滾動就出錯了。。。心塞死我了，以為是data的鍋，結果不是，是jq的鍋，當用js設置滾動的top時就沒問題，所以大概是因為jq自己的內部機制？求知道真實原因的大神 給我科普，拜謝~
2）bootstrap中progress-bar（進度條元素）的動畫樣式老是消除不了，最開始以為是元素樣式匹配的優先級不夠，結果把各級的div哦，id哦全加上了還是不行，郁悶死了，感覺就是和我作對 嘛，後來發現是自己瓜了（這個鍋我背），要用transition-duration:0s(s不能少);來單獨設置動畫執行的完成時間，這個是立即完成的意思，變現出來就是沒有動畫效果。（在此不要動畫效果 是因為，拖動進度條時有動畫特別特別瓜呆，想象你已經拖到了1分鐘的地方，結果後面的進度才屁顛屁顛的跟過來，看著就火大，所以必須消除！嗯！）
3）在彈出添加歌曲歌詞的摸態框那裡本來想設置動畫效果（bootstrap實現的是有動畫效果的），但是因為我是用js來控制它的顯示和隱藏，所以用了display屬性，死改了半天還是沒有動畫效 果，寶寶心疼自己，結果發現動畫的顯示和隱藏是對於opacity的，對於display沒法設置動畫的顯示隱藏，不是我的鍋，開熏~
（2）後台部分：
1）數據庫部分：
a)這是個低級到我自己都羞愧的錯誤，不過就原諒我這個數據庫渣渣吧，我在寫插入語句的時候，改了好久，終於發現！居然是因為引號的原因，我在values後面要插入的數據部分每個都加 了‘’，當時的想法是，因為他們是字符串啊~加引號是想當然的吧，然後我就想當然的錯了，我悔過。。。終於記住不在插入的數據部分加引號了，然後就又想當然的在列名的地方加了引號了， 因為他們是字符串啊~加引號是想當然的吧~【讓會長來揍死我吧】
b)數據庫老是不能選擇，mysql_select_db()執行的結果總是莫名就錯了，後來發現鍋不在它，是因為mysql_connect()我沒傳參，所以訪問數據庫的權限不夠，所以取不到。要傳入的參 數是'localhost'(一般都是這個),‘數據庫賬號’，‘密碼’，這個應該是你進入mysql 的時候設置的，如果忘了，自己百度去吧~
c)在數據庫自己插入了一條測試數據，取出來的時候，中文的地方全部是？？？？【黑人？？？？】什麼鬼？？趕緊找四爺去——雍正專治八阿哥，在mysql_select_db()前面加一句 mysql_query("set names utf8")就ok了~
2)文件上傳：
a)本來計劃用$.post配合JSON傳遞數據的，因為異步而且不會跳轉刷新頁面，然而我失敗了，此處再求大神分享經驗，科普用JSON怎麼獲取到文件~嘗試用JSON的時候，因為要獲取文件 的路徑，所以用了H5的FileReader對象，但是！搞不起，想了想，估計是因為這是本地的服，務，器,而FileReader是用於獲取本地文件的，所以會在用readAsDataURL的時候返回null。 （一本正經的fu說八道，再次懇求大神出現，科普科普，有利於人民素質的提高【麗娜的閃亮小虎牙笑】）放棄JSON改用了表單，結果在改變臨時文件路徑，存儲到指定目錄下的時候，又一直 報failed to open stream: Invalid argument，這個是個什麼鬼？（打開流失敗：無效的參數）呃？我完全是按照W3C上面來的啊，我沒手賤輸入錯誤吧？結果發現又是，中文的鍋， （不，我美麗的方塊文字才沒有錯，╭(╯^╰)╮）在文件名作為參數傳入mb_convert_encoding()作為第一個參數，然後是'gbk',‘utf8’)ok，現在世界都清淨了，一切都美好了，感覺自己又萌 萌哒~
b)然後測試各種上傳歌曲，然後刪除，多添加幾個試試，呃，全部一模一樣的歌你全給輸出來感覺就像中病毒一樣好嘛？？？改！如果歌曲文件已經存在於指定目錄，那麼就提示不能重復上傳 相同的歌曲，然後就裝作什麼都不知道的樣子，又返回到摩洛哥音樂播放器頁面。file_exists(filename)竭誠為您服務。如果存在返回true，不存在放回false。ok~
後話：
學習php最大的感悟就是，後台其實沒有想象中那麼男，還是很娘炮的嘛，一幅小受等著被欺負的樣子，所以想對像我一樣慫的前端小伙伴們說，去學學php嘛，它真的很軟妹的，哈哈，愉悅的學習了php，之後要搞nodeJS了，求虐我輕一點，最後的最後，周末還要加班的程序猿和攻城獅們，加油哦~撒拉黑【大哥比哈特】
