JavaScript實現音樂播放器
本文實例為大傢分享瞭vue + element ui實現錨點定位的具體代碼,供大傢參考,具體內容如下
效果
HTML代碼
<!--播放器--> <div id="player"> <!--播放控件--> <div id="playerControl"> <div class="playerImg"> <img src="../images/demo3/1.jpg" alt="" width="150" height="150"> <audio id="audio"> <source src="../video/1.mp3"> </audio> </div> <div id="pcontrol" class="clearfix"> <button class="prev" title="上一曲"></button> <button id="play" class="play1" title="播放"></button> <button class="next" title="下一曲"></button> <button class="stop" title="停止"></button> </div> </div> <!--播放進度--> <div id="progrees"> <div id="curProgrees"></div> </div> <!--播放時間--> <div id="playTime"> <span id="presentTime">00 : 00</span> <span>/</span> <span id="totalTime">00 : 00</span> </div> <!--音頻列表--> <div id="playerList"> <ul> <li class="active"> <span class="mr10">1</span> <span>Mascara</span> <span>-</span> <span>G.E.M. 鄧紫棋</span> </li> <li> <span class="mr10">2</span> <span>西安人的歌</span> <span>-</span> <span>范煒與程渤智</span> </li> <li> <span class="mr10">3</span> <span>往後餘生</span> <span>-</span> <span>李貳叁</span> </li> </ul> </div> </div>
Css代碼
*{margin:0; padding:0;} .bd{border:1px solid red;} .fl{float: left} .fr{float:right} .mr10{margin-right:10px;} ul{list-style: none;} .clearfix:after{content: ""; height:0; line-height: 0; visibility: hidden;display: block; clear:both;} body{background:#262626; padding:50px 0; color:#fff; } #player{width:600px; height:400px; background:#130519de;margin:0 auto;} #playerControl{position:relative;height:200px;} #playerControl .playerImg{padding:25px; box-sizing: border-box;} /*播放控制界面*/ #pcontrol{position: absolute;left:300px; top:85px;} #pcontrol button{float:left;margin:0 10px;border:0;outline: none; width:28px; height:28px;background:url("../../images/demo3/player.png") no-repeat} /*暫停*/ #pcontrol .play1{background-position: -8px -8px} #pcontrol .play1:hover{background-position: -49px -8px} /*播放*/ #pcontrol .play2{background-position: -8px -49px} #pcontrol .play2:hover{background-position: -49px -49px} /*上一曲*/ #pcontrol .prev{background-position: 0 -112px} #pcontrol .prev:hover{background-position: -30px -112px} /*下一曲*/ #pcontrol .next{background-position: 0 -141px} #pcontrol .next:hover{background-position: -30px -141px} /*停止播放*/ #pcontrol .stop{background-position: 0 -84px} #pcontrol .stop:hover{background-position: -30px -84px} /*播放列表*/ #playerList{padding:20px 0px} #playerList ul li{padding:10px 20px; } #playerList ul li.active,#playerList ul li:hover{background:rgba(0, 0, 0, .4);color:#665975;cursor: pointer} /*播放進度*/ #progrees{width:550px; height:5px; background:#ccc; margin:0 auto;} #curProgrees{width:0px; height:100%; background:darkolivegreen;} /*播放時間*/ #playTime{padding:10px 25px 0px; text-align: right;}
Js功能代碼
window.onload = function (ev) { //獲取元素 var play = document.querySelector("#play");//播放按鈕 var audio = document.querySelector("#audio");//音頻文件 var next = document.querySelector(".next");//下一曲 var prev = document.querySelector(".prev");//上一曲 var stop = document.querySelector(".stop");//停止 var playerListLi = playerList.querySelectorAll("li")//播放列表li var totalTime = document.querySelector("#totalTime");//總時間 var presentTime = document.querySelector("#presentTime");//當前時間 //歌曲地址 var playerMusic = ["../video/1.mp3","../video/2.mp3","../video/3.mp3"]; //1. 點擊播放歌曲,再次點擊播放暫停 play.addEventListener("click",startPlay); //2.點擊切換下一曲 next.addEventListener("click",theNext); //3.點擊切換上一曲 prev.addEventListener("click",thePrev); //4.點擊停止播放 stop.addEventListener("click",stopPlay); //定義播放函數 //1.1 定義標桿,判斷是否播放歌曲 var flag = true; function startPlay(){ if(flag){ play.className="play2"; play.title = "暫停"; audio.play(); //播放進度 playProgress(); //播放時間 playTime(); }else{ play.className="play1"; play.title = "播放"; audio.pause(); } flag = !flag; } //定義下一曲 var n = 0;//定義歌曲索引 function theNext(){ n++; if(n == playerMusic.length){ n = 0; } audio.src = playerMusic[n]; //歌曲播放 flag = true; startPlay(); //切換列表 switchList(); } //定義下一曲 function thePrev(){ n--; if(n < 0){ n = playerMusic.length - 1; } audio.src = playerMusic[n]; //歌曲播放 flag = true; startPlay(); //切換列表 switchList(); } //切換列表 function switchList(){ for(var i=0; i<playerListLi.length; i++){ playerListLi[i].className = ""; } playerListLi[n].className = "active"; } //停止播放 function stopPlay(){ //設置當前播放時間為0;,並暫停播放 audio.currentTime = 0; flag = false; startPlay(); } //播放進度 function playProgress(){ //定義計時器 var timer = null; if(flag){ //開啟計時器 timer = setInterval(function(){ if(audio.currentTime >= audio.duration){ curProgrees.style.width = progrees.offsetWidth + "px"; clearInterval(timer); theNext(); }else{ curProgrees.style.width = (audio.currentTime/audio.duration)*progrees.offsetWidth + "px"; } },30); }else{ //關閉計時器 clearInterval(timer); } } //播放時間 function playTime(){ //當前時間 var timer2 = null; if(flag){ timer2 = setInterval(function(){ //總時間 setTime(audio.duration,totalTime); setTime(audio.currentTime,presentTime); },1000) }else{ clearInterval(timer2) } } //設置時間 function setTime(audioTime,obj){ //總時間 allMinute = Math.floor(audioTime/60); if(allMinute<10){ allMinute = "0" + allMinute; } allSecond = Math.floor(audioTime%60); if(allSecond<10){ allSecond = "0" + allSecond; } var allTime = allMinute + " : " + allSecond; obj.innerHTML = allTime; } }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。