js+audio实现音乐播放器

本文实例为大家分享了js+audio实现音乐播放器的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音乐播放器</title>
<link rel="shortcut icon" type="image/x-icon" href="img/an.ico" />
<link rel="stylesheet" type="text/css" href="css/music_Play.css" />
</head>
<body>
<div class="music_bg">
<div class="music_cont">
<audio id="audio1" src=""></audio>
<div class="music_ctrl">
<div class="music_btn">
<div class="btn prev">
<img id="prev" src="img/prev.png" />
</div>
<div class="btn play">
<img id="play" src="img/pause.png" />
</div>
<div class="btn next">
<img id="next" src="img/next.png" />
</div>
</div>
<div class="music_name" id="music_name"></div>
</div>
<div class="music_line">
<div class="line1" id="line1"></div>
<div class="line2" id="line2"></div>
</div>
</div>
</div>
</body>
<script src="js/audio_play.js" type="text/javascript" charset="utf-8"></script>
</html>

* {
margin: 0;
padding: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
body {
overflow-x: hidden;
}
.music_bg {
width: 100%;
height: 666px;
position: absolute;
background-image: url(../img/bj.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.music_cont {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
background-color: #000;
border-radius: 10px;
box-shadow: #000000 5px 5px 30px 5px
}
.music_line {
width: 300px;
height: 20px;
overflow: hidden;
position: absolute;
top: 30%;
}
.line1 {
width: 0%;
height: 60%;
float: left;
margin-top: 1%;
margin-right: -2px;
background-color: rgba(255, 255, 255, 0.9);
}
.line2 {
background-image: url(../img/point.png);
height: 100%;
background-repeat: no-repeat;
width: 10px;
background-position: center;
float: left;
cursor: pointer;
margin-left: -4px;
margin-right: -4px;
}
.music_ctrl {
width: 300px;
height: 200px;
position: absolute;
bottom: 0;
background-color: #8c3232;
}
.music_btn {
width: 300px;
height: 100px;
position: relative;
}
.btn {
width: 33.33%;
float: left;
height: 40px;
margin-top: 50px;
}
.prev img {
float: right;
margin: 10px 0px;
cursor: pointer;
}
.play img {
margin: 2px 35px;
cursor: pointer;
}
.next img {
float: left;
margin: 10px 0px;
cursor: pointer;
}
.music_name {
width: 300px;
height: 100px;
position: relative;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 18px;
}

// 定义索引和定时器
var index = 0,
timer = null;
// 获取到要操作的对象
var prev = document.getElementById("prev");
var play = document.getElementById("play");
var next = document.getElementById("next");
var audio1 = document.getElementById("audio1");
var music_name = document.getElementById("music_name");
var line1 = document.getElementById("line1");
var line2 = document.getElementById("line2");
// 定义数组存音频相关资料
var music_src = ["1.mp3", "2.mp3", "3.mp3", "4.mp3"];
var music_title = ["白举纲-绅士（live）", "魔鬼中的天使", "下个路口见", "大鱼"];
// 进行初始化音频
audio1.src = "audio/" + music_src[index];
music_name.innerText = music_title[index];
// 按钮是点击事件
play.onclick = function() {
move1(); // 播放或暂停
};
prev.onclick = function() {
prev1(); // 上一曲，播放
move1();
}
next.onclick = function() {
next1(); // 下一曲，播放
move1();
}
// 下一曲的函数
var next1 = function() { // 索引+1，初始化改变后的音乐播放界面
if (index == music_src.length - 1) {
index = 0;
} else {
index++;
}
audio1.src = "audio/" + music_src[index];
music_name.innerText = music_title[index];
}
// 上一曲的函数
var prev1 = function() { // 索引-1，初始化改变后的音乐播放界面
if (index == 0) {
index = music_src.length - 1;
} else {
index--;
}
audio1.src = "audio/" + music_src[index];
music_name.innerText = music_title[index];
}
// 暂停与播放的函数
var move1 = function() {
// 判断现在是不是在播放
if (audio1.paused) { // 没有，播放音乐，改变按钮样式，改变进度条
audio1.play();
play.src = "img/play.png";
timer = setInterval(function() { // 每500毫秒执行一次
var drtTime = audio1.duration; // 得到音频总时间（如果不放在定时器中会出现下一曲，暂停播放，进度条来回跳动）
var curTime = audio1.currentTime; // 获取音频当前播放时间
line1.style.width = (curTime / drtTime) * 100 + "%"; // 计算出进度条的长度
if (drtTime==curTime) {
next.onclick();
}
console.log(drtTime,curTime);
}, 500);
} else { // 播放，关闭音乐，关闭按钮图标
audio1.pause();
play.src = "img/pause.png";
clearInterval(timer);
}
}
// 拖动进度条改变播放进度
var flag = false; // 标记
var mx = null; // 距离
line2.onmousedown = function(event) {
// 改变状态
flag = true;
// 按下鼠标获取距离
mx = event.pageX - line2.offsetLeft;
clearInterval(timer);
}
document.body.onmousemove = function(event) {
// 当状态为true时可以获取
if (flag) {
// 滑块的位置=当前鼠标位置-距离
var x1 = event.pageX - mx;
// 进度条当前长度=滑块位置-进度条的开始坐标值
var x2 = x1 - line1.offsetLeft;
// 用进度条当前长度/进度条总长度得到一个小数
var x3 = x2 / 295;
// 取到小数点后3位
var x4 = x3.toFixed(3);
if (x4 >= 0 && x4 < 1) {
// 当百分比在0--1之间时才改变进度条长度
line1.style.width = x4 * 100 + "%";
}else if (x4 == 1) {
next.onclick();
}
}
}
// 放开鼠标时，状态改变，当前播放时间改变，启动定时器继续工作
document.body.onmouseup = function(event) {
flag = false; // 状态改变
var x5 = parseInt(line1.style.width) / 100; // 得到当前进度条的百分比
var drtTime = audio1.duration; // 得到音频总时间
audio1.currentTime = (drtTime * x5).toFixed(0); // 改变当前播放时间
timer = setInterval(function() { // 定时器重启成功
var curTime = audio1.currentTime;
line1.style.width = (curTime / drtTime) * 100 + "%";
}, 500);
}

秒客网

js+audio实现音乐播放器

相关文章