JavaScript實(shí)現(xiàn)音樂(lè)播放器

更新時(shí)間：2022年08月14日 15:28:19 作者：時(shí)小淺

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)音樂(lè)播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)音樂(lè)播放器的具體代碼，供大家參考，具體內(nèi)容如下

效果

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>
? ? <!--播放進(jìn)度-->
? ? <div id="progrees">
? ? ? ? <div id="curProgrees"></div>
? ? </div>
? ? <!--播放時(shí)間-->
? ? <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}
?
/*播放進(jìn)度*/
#progrees{width:550px; height:5px; background:#ccc; margin:0 auto;}
#curProgrees{width:0px; height:100%; background:darkolivegreen;}
?
/*播放時(shí)間*/
#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");//總時(shí)間
? ? ? ? var presentTime = document.querySelector("#presentTime");//當(dāng)前時(shí)間
?
? ? //歌曲地址
? ? ? ? var playerMusic = ["../video/1.mp3","../video/2.mp3","../video/3.mp3"];
?
? ? //1. 點(diǎn)擊播放歌曲，再次點(diǎn)擊播放暫停
? ? ? ? play.addEventListener("click",startPlay);
? ? //2.點(diǎn)擊切換下一曲
? ? ? ? next.addEventListener("click",theNext);
? ? //3.點(diǎn)擊切換上一曲
? ? ? ? prev.addEventListener("click",thePrev);
? ? //4.點(diǎn)擊停止播放
? ? ? ? stop.addEventListener("click",stopPlay);
?
?
?
? ? //定義播放函數(shù)
? ? ? ? //1.1 定義標(biāo)桿，判斷是否播放歌曲
? ? ? ? var flag = true;
? ? ? ? function startPlay(){
? ? ? ? ? ? if(flag){
? ? ? ? ? ? ? ? play.className="play2";
? ? ? ? ? ? ? ? play.title = "暫停";
? ? ? ? ? ? ? ? audio.play();
? ? ? ? ? ? ? ? //播放進(jìn)度
? ? ? ? ? ? ? ? playProgress();
? ? ? ? ? ? ? ? //播放時(shí)間
? ? ? ? ? ? ? ? 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(){
? ? ? ? ? ? //設(shè)置當(dāng)前播放時(shí)間為0;,并暫停播放
? ? ? ? ? ? audio.currentTime = 0;
? ? ? ? ? ? flag = false;
? ? ? ? ? ? startPlay();
? ? ? ? }
?
? ? //播放進(jìn)度
? ? ? ? function playProgress(){
? ? ? ? ? ? //定義計(jì)時(shí)器
? ? ? ? ? ? var timer = null;
? ? ? ? ? ? if(flag){
? ? ? ? ? ? ? ? //開(kāi)啟計(jì)時(shí)器
? ? ? ? ? ? ? ? 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{
? ? ? ? ? ? ? ? //關(guān)閉計(jì)時(shí)器
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? }
?
? ? ? ? }
? ? //播放時(shí)間
? ? ? ? function playTime(){
? ? ? ? ? ? //當(dāng)前時(shí)間
? ? ? ? ? ? var timer2 = null;
? ? ? ? ? ? if(flag){
? ? ? ? ? ? ? ? timer2 = setInterval(function(){
? ? ? ? ? ? ? ? ? ? //總時(shí)間
? ? ? ? ? ? ? ? ? ? setTime(audio.duration,totalTime);
? ? ? ? ? ? ? ? ? ? setTime(audio.currentTime,presentTime);
? ? ? ? ? ? ? ? },1000)
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? clearInterval(timer2)
? ? ? ? ? ? }
? ? ? ? }
? ? //設(shè)置時(shí)間
? ? ? ? function setTime(audioTime,obj){
? ? ? ? ? ? //總時(shí)間
? ? ? ? ? ? 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;
? ? ? ? }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: