javascript開發迷你音樂播放器
阿新 • • 發佈:2018-03-19
javascript 前端 音樂 播放器 源碼
知識點:html/css布局思維,音頻標簽api運用,css3自定義動畫,Js音樂播放控制,歌詞同步等。
html代碼:
<textarea id="txt" style="display:none"> [00:00.64]小幸運 - 譚嘉儀 [00:02.15]詞:徐世珍&吳輝福 [00:03.70]曲:JerryC [00:04.14]編曲:JerryC [00:13.77]我聽見雨滴落在青青草地 [00:19.89]我聽見遠方下課鐘聲響起 [00:25.74]可是我沒有聽見你的聲音 [00:30.74]認真 呼喚我姓名 [00:37.92]愛上你的時候還不懂感情 [00:44.12]離別了才覺得刻骨 銘心 [00:50.09]為什麽沒有發現遇見了你 [00:54.70]是生命最好的事情 [01:00.30]也許當時忙著微笑和哭泣 [01:06.36]忙著追逐天空中的流星 [01:12.12]人理所當然的忘記 [01:16.55]是誰風裏雨裏一直默默守護在原地 [01:24.44]原來你是我最想留住的幸運 [01:29.69]原來我們和愛情曾經靠得那麽近 [01:35.67]那為我對抗世界的決定 [01:40.29]那陪我淋的雨 [01:43.28]一幕幕都是你 一塵不染的真心 [01:50.60]與你相遇 好幸運 [01:53.96]可我已失去為你淚流滿面的權利 [01:59.98]但願在我看不到的天際 [02:04.63]你張開了雙翼 [02:07.68]遇見你的註定 她會有多幸運 [02:27.28]青春是段跌跌撞撞的旅行 [02:33.44]擁有著後知後覺的美麗 [02:39.55]來不及感謝是你給我勇氣 [02:44.22]讓我能做回我自己 [02:49.72]也許當時忙著微笑和哭泣 [02:55.55]忙著追逐天空中的流星 [03:01.61]人理所當然的忘記 [03:06.03]是誰風裏雨裏一直默默守護在原地 [03:13.79]原來你是我最想留住的幸運 [03:19.05]原來我們和愛情曾經靠得那麽近 [03:25.17]那為我對抗世界的決定 [03:29.68]那陪我淋的雨 [03:32.56]一幕幕都是你 一塵不染的真心 [03:39.89]與你相遇 好幸運 [03:43.40]可我已失去為你淚流滿面的權利 [03:49.32]但願在我看不到的天際 [03:53.97]你張開了雙翼 [03:56.98]遇見你的註定 [04:00.47]Oh 她會有多幸運 </textarea> <div class="photo"> <div class="top"></div> <div class="title">小幸運</div> <div class="singer">譚嘉儀</div> <div class="play"></div> <div class="lrc"> <div class="content"></div> </div> </div> <audio src="mp3/譚嘉儀-小幸運.mp3" id="myMusic"></audio>
css代碼:
<style type="text/css"> *{ margin:0; padding:0; } body{ background: rgb(55, 76, 86); } .photo{ width:320px; height:600px; margin:100px auto; background:#000; font-family:"微軟雅黑"; padding: 5px; background-color:#222; border-radius: 20px; box-shadow: 0 0 7px #fff; overflow: hidden; } .top{ width:320px; height:23px; background:url("images/1.png") no-repeat; } .title{ width:320px; height:30px; background:url("images/2.png") no-repeat; font-size:20px; color:#ccc; font-weight:bold; text-align:center; line-height:30px; } .play{ width:190px; height:190px; background:url("images/3.png") no-repeat; margin:auto; border-radius:50%; } .singer{ width:320px; font-size:14px; color:#ccc; text-align:center; line-height:40px; } .lrc{ width:300px; height:285px; margin:20px auto; text-align:center; overflow:hidden; color:#ccc; } .lrc p{ line-height:20px; font-size:12px; } .content{ position:relative; left:0; top:0; } .play.rotate{ -webkit-animation:rot 5s linear infinite; -moz-animation:rot 5s linear infinite; -ms-animation:rot 5s linear infinite; -o-animation:rot 5s linear infinite; animation:rot 5s linear infinite; } @keyframes rot{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } </style>
javascript代碼:
<script type="text/javascript"> //window.onload=function(){}頁面加載後執行 var btn = document.getElementsByClassName("play")[0];//通過class類名去獲取元素 數組的形式儲存 [] var myMusic = document.getElementById("myMusic");//通過ID var txt = document.getElementById("txt"); var con = document.getElementsByClassName("content")[0] var mark = true;//布爾值 true真 false假 btn.onclick = function(){ if (mark)//隱式轉換 i > 1 { this.className += " rotate"; myMusic.play();//播放音樂 mark = false; }else{ this.className = "play"; myMusic.pause();//音樂暫停 mark = true; } } var lrc = txt.value; var lrcArr = lrc.split("[");//從哪個字符開始,分隔成數組 var html = ""; for (var i = 0;i<lrcArr.length ;i++ ) { var arr = lrcArr[i].split("]");//分隔歌詞與時間 var time = arr[0].split(".");//分隔毫秒與其他時間 var timer = time[0].split(":");//分隔分鐘與秒 var ms = timer[0]*60 + timer[1]*1;//轉化為秒鐘 //字符串類型乘以數字類型就會轉化成為數字類型 var text = arr[1];//獲取歌詞部分 if (text){ html +="<p id="+ms+">"+text+"</p>"; } con.innerHTML = html; } var num = 0; var oP = con.getElementsByTagName("p");//通過標簽名獲取所有p元素 myMusic.addEventListener("timeupdate",function(){ var curTime = parseInt(this.currentTime);//獲取歌曲播放的時間 以秒為單位 if (document.getElementById(curTime)) { for (var i = 0;i<oP.length ;i++) { oP[i].style.cssText = "color:#ccc;font-size:12px;"//在播放下一句之前把所有的歌詞樣式還原 } document.getElementById(curTime).style.cssText = "color:red;font-size:18px;" if (oP[7+num].id == curTime) { con.style.top = -20*num + "px"; num ++;//依次加一 } } });//監聽 </script>
有興趣想學習web前端的可以來web前端qun“189394454”可以免費獲取2018最新web前端學習資料。
關註公眾號→‘學習web前端’開啟你的web前端學習之路
javascript開發迷你音樂播放器