js+audio實現音樂播放器
阿新 • • 發佈：2020-09-14
本文例項為大家分享了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,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);
}相關圖片
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。