運用js教你輕松制作html音樂播放器
更新時間：2020年04月17日 16:35:42 作者：一直在路上前行
這篇文章主要為大家詳細(xì)介紹了如何運用js教你輕松制作html音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用HTML做了個音樂播放器，可以循環(huán)播放，選擇歌曲，以及自動播放下一首，運用了js和json知識，下面是效果圖和源碼，有興趣的可以試試哦
效果圖：
源碼：html
<span style="color:#999999;"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音樂播放器</title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script src="js/music.js" type="text/javascript" charset="utf-8"></script>
<style>
* {
margin: 0 auto;
padding: 0;
}
.page {
position: absolute;
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 44px;
background: lightcoral;
position: relative;
}
.title {
font-size: 20px;
color: white;
float: left;
margin: 7px 10px;
}
.search {
float: right;
width: 30px;
margin: 7px 10px;
}
.earch {
float: right;
width: 30px;
margin: 7px 10px;
}
.musicBox{
width: 100%;
position: absolute;
top: 44px;
bottom: 50px;
background:url(音樂播放器資源/img/bg.jpg);
background-size:100% 100%;
/*內(nèi)容超出范圍部分滾動*/
overflow: scroll;
}
/*定義一條音樂的列表,每行的樣式 在js中動態(tài)加載到音樂列表每一行的div上*/
.music{
width: 100%;
height: 60px;
border-bottom: 2px solid gray;
margin: 10px 20px;
position: relative;
}
.music img{
width: 40px;
height: 40px;
margin: 10px 20px;
}
.music p{
color: goldenrod;
position: absolute;
left: 85px;
top: 10px;
}
/*音樂播放時所對應(yīng)的行的樣式*/
.musicPlay{
background: rgba(120,10,60,0.4);
}
.musicPlay p{
color: red;
}
/*設(shè)置footer 的樣式*/
.footer{
width: 100%;
height: 50px;
position: absolute;
bottom: 0px;
background: lightcoral;
}
.range{
width: 100%;
position: absolute;
top: -3px;
left: 0px;
}
.pic{
width: 30px;
height: 30px;
position: absolute;
left: 10px;
top: 12px;
border-radius: 15px;
animation: picAn 2s infinite linear;
}
@keyframes picAn{
from{}
to{transform: rotate(360deg);}
}
/*控制按鈕的樣式*/
.play{
width: 20px;
height: 20px;
position: absolute;
left: 45%;
top: 10px;
}
.pre{
width: 30px;
height: 30px;
position: absolute;
left: 0px;
top: 5px;
}
.next{
width: 30px;
height: 30px;
position: absolute;
right: 0px;
top: 5px;
}
.love{
position: absolute;
right: 5px;
top: 15px;
width: 20px;
height: 30px;
}
.musicControls{
position: absolute;
width: 50%;
left: 25%;
top: 10px;
}
</style>
</head>
<body>
<div class="page">
<audio id="audio"></audio>
<div class="header">
<h3 class="title">我的音樂</h3>
<img class="search" src="音樂播放器資源/img/search.png" />
<img class="earch" src="音樂播放器資源/img/earch.png" />
</div>
<!--顯示音樂類表-->
<div class="musicBox">
<!--內(nèi)容要通過讀取json文件來獲得 音樂列表-->
</div>
<!--控制臺-->
<div class="footer">
<!--進度條-->
<input type="range" class=" range" />
<img src="音樂播放器資源/img/deng.jpg" class="pic" />
<!--控制按鈕-->
<div class="musicControls">
<img src="音樂播放器資源/img/pre.png" class="pre" />
<img src="音樂播放器資源/img/play.png" class="play" />
<img src="音樂播放器資源/img/next.png" class="next" />
</div>
<img src="音樂播放器資源/img/shoucang.png" class="love" />
</div>
</div>
</body>
</html></span>
下面是js代碼：
$(document).ready(function(){
//音樂播放器需要，播放器對象player，音樂對象，用play去播放music對象
// 創(chuàng)建music對象,用于保存音樂的屬性
function Music(){
}
Music.prototype.src= "";
Music.prototype.img ="";
Music.prototype.num="";
Music.prototype.musicName="";
Music.prototype.name="";
//創(chuàng)建player對象
function Player(){
}
Player.prototype.audio = document.getElementById("audio");
// 目前播放第幾首歌
Player.prototype.playIndex=0;
Player.prototype.isplay = false;
// 定義播放器的方法
Player.prototype.rangUpdate = function(){
//this.audio.ontimeupdate =function() 音樂播放器播放音樂時監(jiān)聽
//把進度條和音樂的時間長度結(jié)合起來
//音樂每播放一秒進讀條就會前進一個單位 this.duration音樂的總長度
this.audio.ontimeupdate =function(){
//把進度條的總長度設(shè)為音樂的總長度
$(".range").attr("max",this.duration);
//設(shè)置進度條的值為播放的時間
$(".range").val(this.currentTime);
//當(dāng)一首歌播放完再去播放下一首
if (this .currentTime == this.duration ) {
player.nextMusic();
}
}
};
Player.prototype.playMusic =function(){
//向播放器添加音樂路徑
$(this.audio).attr("src",musicModels[this .playIndex].src);
this .audio.play();
//換音樂圖片
$(".pic").attr("src",musicModels[this.playIndex].img);
//波讓其的狀態(tài)
this .isplay= true;
};
Player.prototype.nextMusic = function(){
//越界問題
if (this .playIndex >= musicModels.length - 1) {
this.playIndex = 0;
}else{
this.playIndex = this .playIndex + 1;
}
//改變音樂類表的對應(yīng)項的樣式
this.playMusic();
$(".music").eq(this.playIndex).addClass("musicPlay")
.siblings()
.removeClass("musicPlay");
};
Player.prototype.preMusic =function(){
if (this .playIndex <= 0) {
this.playIndex = musicModels.length-1;
}else{
this.playIndex = this .playIndex - 1;
}
//改變音樂類表的對應(yīng)項的樣式
this.playMusic();
$(".music").eq(this.playIndex).addClass("musicPlay")
.siblings()
.removeClass("musicPlay");
};
Player.prototype.playOrPause = function(){
if(this.isplay){
this.audio.pause();
$(".play").attr("src","音樂播放器資源/img/stop.png");
}else{
this.audio.play();
$(".play").attr("src","音樂播放器資源/img/play.png");
}
this.isplay = !this.isplay;
};
// js文件從此向下
// 創(chuàng)建音樂數(shù)組
var musicModels = [];
//創(chuàng)建音樂播放器對象
var player= new Player();
/*Ajax 目的是在js中實現(xiàn)異步操作
* JS是單線程 的，在單線程中模擬java oc 多線程 開辟異步任務(wù)，，瀏覽器的引擎去做一步操作，
* 實質(zhì)上不是開辟一個子線程，而是創(chuàng)建一個異步任務(wù)
* 優(yōu)點：
* 1.不需要用戶等待服務(wù)器相應(yīng)
* 在異步派發(fā)xmlHTTPRequest 請求后，馬上把控制權(quán)收回就被返回瀏覽器空頁面
* 界面不會出現(xiàn)白板，等待后臺服務(wù)器得到請求后，再去執(zhí)行完成方法，在方法中填寫界面數(shù)據(jù)的代碼
* 2.不需要加載整個頁面只需要更新局部數(shù)據(jù)，節(jié)省流量，減輕服務(wù)器壓力
*
* 為xmlHTTPRequest 設(shè)置一個回調(diào)函數(shù)，服務(wù)器數(shù)據(jù)到達(dá)時觸發(fā)函數(shù)，發(fā)送請求時可以帶少量的參數(shù)
* 實現(xiàn)按需去數(shù)據(jù)
*
$.ajax(),這是jQuery 對ajax的封裝的最基礎(chǔ)的函數(shù)，通過這個函數(shù)可以實現(xiàn)異步通訊功能
var configObj= {
// method:數(shù)據(jù)提交方式 get OR post
URL：請求的網(wǎng)址
async：是否異步，默認(rèn)true
data：post請求的參數(shù)
dataType ：服務(wù)器返回的類型，xml string json
success:請求成功后的回調(diào)方法
error ：請求失敗后的方法
}
$.ajax(configObj);完成異步請求
二、$post()只能采取post請求
三、$get()
四、$getJSON( url ,完成回調(diào));可以請求本地路徑的內(nèi)容
*
*
* */
$.getJSON("pbl.json",function(data){
// console.log(data);
for (var i=0;i<data.length;i++) {
var music = new Music();
music.src= "音樂播放器資源/" + data[i].src;
music.img= "音樂播放器資源/" + data[i].img;
music.musicName = data[i].musicName;
music.name = data[i].name;
music.num = data[i].num;
musicModels.push(music);
}
//播放音樂
isertData();
player.playMusic();
player.rangUpdate();
$(".music").eq(player.playIndex).addClass("musicPlay")
.siblings()
.removeClass("musicPlay");
});
function isertData(){
//先要遍歷數(shù)據(jù)源數(shù)組
/*
html5 中添加了一個data-*的方式 來自定義屬性
用data-前綴，添加到自定義屬性名上，
這樣的結(jié)構(gòu)可以存儲少量的數(shù)據(jù)
* */
for (var i=0;i<musicModels.length;i++) {
// /創(chuàng)建一個DIV元素表示,音樂中的一行,給這個div添加music樣式
//和綁定自定義屬性index來記錄這個div是列表中的第幾行
var $musicDiv = $("<div class = 'music' data-index = "+ i +"></div>");
// 將這個div添加到musicBox 中
$(".musicBox").append($musicDiv);
// 設(shè)計musicdiv中的子元素,子元素有兩個,一個是歌曲的圖片,歌曲的信息
// 創(chuàng)建一個img 顯示歌曲圖片
var $img = (
"<img src =" + musicModels[i].img+" />");
$musicDiv.append($img);
// 創(chuàng)建一個音樂信息的p標(biāo)簽
var $musicMsg = $("<p>"+musicModels[i].musicName+" 演唱者："
+musicModels[i].name
+"</p>"
);
$musicDiv.append($musicMsg);
}
$(".music").click(
function(e){
//從被選中的div中讀取自定義 index屬性
player.playIndex = $(this ).data("index");
player.playMusic();
//被選中的div設(shè)置musicplay樣式，該div的兄弟元素要溢出musicplay樣式
//保證只有一個div有musicplay
$(this).addClass("musicPlay").siblings().removeClass("musicPlay");
}
);
}
$(".play").click(function(){
player.playOrPause();
});
$(".next").click(function(){
player.nextMusic();
});
$(".pre").click(function(){
player.preMusic();
});
})
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
error是指程序中的非正常運行狀態(tài)，在其他編程語言中稱為“異?！被颉板e誤”，解釋器會為每個錯誤情形創(chuàng)建并拋出一個Error對象，其中包含錯誤的描述信息，這篇文章主要介紹了javascript中的Error對象，需要的朋友可以參考下2019-04-04
JavaScript如何利用Promise控制并發(fā)請求個數(shù)
大家都知道js是單線程，并不存在真正的并發(fā)，但是由于JavaScript的Event Loop機制，使得異步函數(shù)調(diào)用有了“并發(fā)”這樣的假象。這篇文章主要給大家介紹了關(guān)于JavaScript如何利用Promise控制并發(fā)請求個數(shù)的相關(guān)資料,需要的朋友可以參考下2021-05-05
JS實現(xiàn)六邊形3D拖拽翻轉(zhuǎn)效果的方法
這篇文章給大家分享一個利用javascript實現(xiàn)3D六邊形拖拽翻轉(zhuǎn)的效果實例，實現(xiàn)后的效果很贊，對大家的學(xué)習(xí)Javascript具有一定的參考借鑒價值，有需要的朋友們一起去來看看吧。2016-09-09
本篇文章主要是對js控制input輸入字符方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
基于JavaScript將表單序列化類型的數(shù)據(jù)轉(zhuǎn)化成對象的處理（允許對象中包含對象）
這篇文章主要介紹了基于JavaScript將表單序列化類型的數(shù)據(jù)轉(zhuǎn)化成對象的處理（允許對象中包含對象） 的相關(guān)資料,需要的朋友可以參考下2015-12-12
js全屏事件fullscreenchange 實現(xiàn)全屏、退出全屏操作
這篇文章主要為大家詳細(xì)介紹了js全屏事件fullscreenchange，實現(xiàn)全屏、退出全屏操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了JavaScript生成隨機驗證碼代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
在網(wǎng)上閑逛的時候無意中看到 Dewplayer 播放器，感覺不錯，特此分享。2010-12-12
微信小程序?qū)W習(xí)筆記之獲取位置信息操作圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之獲取位置信息操作,結(jié)合實例形式分析了微信小程序獲取位置信息的原理、步驟及相關(guān)操作注意事項,并結(jié)合圖文形式予以說明,需要的朋友可以參考下2019-03-03
彈出層想必大家都有見過吧，本示例介紹的是一個定位至屏幕居中的彈出層，個人感覺效果還不錯，感興趣的朋友可以參考下2014-05-05