js+audio實(shí)現(xiàn)音樂播放器
更新時(shí)間：2020年09月13日 10:33:36 作者：暗鎖讀客
這篇文章主要為大家詳細(xì)介紹了js+audio實(shí)現(xiàn)音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js+audio實(shí)現(xiàn)音樂播放器的具體代碼，供大家參考，具體內(nèi)容如下
<!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;
}
// 定義索引和定時(shí)器
var index = 0,
timer = null;
// 獲取到要操作的對(duì)象
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");
// 定義數(shù)組存音頻相關(guān)資料
var music_src = ["1.mp3", "2.mp3", "3.mp3", "4.mp3"];
var music_title = ["白舉綱-紳士（live）", "魔鬼中的天使", "下個(gè)路口見", "大魚"];
// 進(jìn)行初始化音頻
audio1.src = "audio/" + music_src[index];
music_name.innerText = music_title[index];
// 按鈕是點(diǎn)擊事件
play.onclick = function() {
move1(); // 播放或暫停
};
prev.onclick = function() {
prev1(); // 上一曲，播放
move1();
}
next.onclick = function() {
next1(); // 下一曲，播放
move1();
}
// 下一曲的函數(shù)
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];
}
// 上一曲的函數(shù)
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];
}
// 暫停與播放的函數(shù)
var move1 = function() {
// 判斷現(xiàn)在是不是在播放
if (audio1.paused) { // 沒有，播放音樂，改變按鈕樣式，改變進(jìn)度條
audio1.play();
play.src = "img/play.png";
timer = setInterval(function() { // 每500毫秒執(zhí)行一次
var drtTime = audio1.duration; // 得到音頻總時(shí)間（如果不放在定時(shí)器中會(huì)出現(xiàn)下一曲，暫停播放，進(jìn)度條來回跳動(dòng)）
var curTime = audio1.currentTime; // 獲取音頻當(dāng)前播放時(shí)間
line1.style.width = (curTime / drtTime) * 100 + "%"; // 計(jì)算出進(jìn)度條的長度
if (drtTime==curTime) {
next.onclick();
}
console.log(drtTime,curTime);
}, 500);
} else { // 播放，關(guān)閉音樂，關(guān)閉按鈕圖標(biāo)
audio1.pause();
play.src = "img/pause.png";
clearInterval(timer);
}
}
// 拖動(dòng)進(jìn)度條改變播放進(jìn)度
var flag = false; // 標(biāo)記
var mx = null; // 距離
line2.onmousedown = function(event) {
// 改變狀態(tài)
flag = true;
// 按下鼠標(biāo)獲取距離
mx = event.pageX - line2.offsetLeft;
clearInterval(timer);
}
document.body.onmousemove = function(event) {
// 當(dāng)狀態(tài)為true時(shí)可以獲取
if (flag) {
// 滑塊的位置=當(dāng)前鼠標(biāo)位置-距離
var x1 = event.pageX - mx;
// 進(jìn)度條當(dāng)前長度=滑塊位置-進(jìn)度條的開始坐標(biāo)值
var x2 = x1 - line1.offsetLeft;
// 用進(jìn)度條當(dāng)前長度/進(jìn)度條總長度得到一個(gè)小數(shù)
var x3 = x2 / 295;
// 取到小數(shù)點(diǎn)后3位
var x4 = x3.toFixed(3);
if (x4 >= 0 && x4 < 1) {
// 當(dāng)百分比在0--1之間時(shí)才改變進(jìn)度條長度
line1.style.width = x4 * 100 + "%";
}else if (x4 == 1) {
next.onclick();
}
}
}
// 放開鼠標(biāo)時(shí)，狀態(tài)改變，當(dāng)前播放時(shí)間改變，啟動(dòng)定時(shí)器繼續(xù)工作
document.body.onmouseup = function(event) {
flag = false; // 狀態(tài)改變
var x5 = parseInt(line1.style.width) / 100; // 得到當(dāng)前進(jìn)度條的百分比
var drtTime = audio1.duration; // 得到音頻總時(shí)間
audio1.currentTime = (drtTime * x5).toFixed(0); // 改變當(dāng)前播放時(shí)間
timer = setInterval(function() { // 定時(shí)器重啟成功
var curTime = audio1.currentTime;
line1.style.width = (curTime / drtTime) * 100 + "%";
}, 500);
}
相關(guān)圖片
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)起伏的水波背景效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)起伏的水波背景效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
本文整理了一些實(shí)用小函數(shù)如阻止輸入非數(shù)字，backspace除外；限制輸入最大字符串長度等，需要的朋友可以了解下2013-11-11
這篇文章主要介紹了小程序清理本地緩存的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
得到當(dāng)前行的值的javascript代碼...2007-06-06
JavaScript的arguments對(duì)象應(yīng)用示例
使用特殊對(duì)象 arguments，開發(fā)者無需明確指出參數(shù)名，就能訪問它們，下面為大家介紹下其具體的應(yīng)用2014-09-09
這篇文章主要介紹了淺析Bootstrap組件之面板組件 的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要為大家介紹了js的深拷貝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)二叉搜索樹，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
js和jquery中循環(huán)的退出和繼續(xù)下一個(gè)循環(huán)
退出循環(huán)，使用break；退出當(dāng)前循環(huán)繼續(xù)下一個(gè)循環(huán)，使用continue，jquery中使用return false；continue，使用return true2014-09-09