本文实例为大家分享了JavaScript实现音乐播放器的具体代码，供大家参考，具体内容如下
效果
HTML代码
<!--播放器--> <div id="player"> <!--播放控件--> <div id="playerControl"> <div class="playerImg"> <img" width=100% src="../images/demo3/1.jpg" alt="" width="150" height="150"> <audio id="audio"> <source" width=100% 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;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持猪先飞。
原文出处：https://blog.csdn.net/qq_36194388/article/details/119174015