Posted in Javascript onSeptember 13, 2020
本文实例为大家分享了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实现音乐播放器
- Author -
暗锁读客声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@