腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國CMS WordPress

常用工具

PHP開發(fā)工具 python Photoshop 必備軟件

運(yùn)用js教你輕松制作html音樂播放器

更新時(shí)間：2020年04月17日 16:35:42 作者：一直在路上前行

這篇文章主要為大家詳細(xì)介紹了如何運(yùn)用js教你輕松制作html音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用HTML做了個(gè)音樂播放器，可以循環(huán)播放，選擇歌曲，以及自動(dòng)播放下一首，運(yùn)用了js和json知識(shí)，下面是效果圖和源碼，有興趣的可以試試哦

效果圖：

源碼：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)容超出范圍部分滾動(dòng)*/ 
 overflow: scroll; 
  
 } 
 /*定義一條音樂的列表,每行的樣式 在js中動(dòng)態(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; 
  
 } 
 /*音樂播放時(shí)所對(duì)應(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> 
 <!--控制臺(tái)--> 
 <div class="footer"> 
 <!--進(jìn)度條--> 
 <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(){ 
 //音樂播放器需要，播放器對(duì)象player，音樂對(duì)象，用play去播放music對(duì)象 
// 創(chuàng)建music對(duì)象,用于保存音樂的屬性 
 function Music(){ 
 
 } 
 Music.prototype.src= ""; 
 Music.prototype.img =""; 
 Music.prototype.num=""; 
 Music.prototype.musicName=""; 
 Music.prototype.name=""; 
 //創(chuàng)建player對(duì)象 
 function Player(){ 
 
 } 
 Player.prototype.audio = document.getElementById("audio"); 
// 目前播放第幾首歌 
 Player.prototype.playIndex=0; 
 Player.prototype.isplay = false; 
// 定義播放器的方法 
 Player.prototype.rangUpdate = function(){ 
 //this.audio.ontimeupdate =function() 音樂播放器播放音樂時(shí)監(jiān)聽 
 //把進(jìn)度條和音樂的時(shí)間長(zhǎng)度結(jié)合起來 
 //音樂每播放一秒進(jìn)讀條就會(huì)前進(jìn)一個(gè)單位 this.duration音樂的總長(zhǎng)度 
 this.audio.ontimeupdate =function(){ 
  //把進(jìn)度條的總長(zhǎng)度設(shè)為音樂的總長(zhǎng)度 
 $(".range").attr("max",this.duration); 
  
 //設(shè)置進(jìn)度條的值為播放的時(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; 
 } 
 //改變音樂類表的對(duì)應(yīng)項(xià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; 
 } 
 //改變音樂類表的對(duì)應(yīng)項(xià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)建音樂播放器對(duì)象 
 var player= new Player(); 
 /*Ajax 目的是在js中實(shí)現(xiàn)異步操作 
 * JS是單線程 的，在單線程中模擬java oc 多線程 開辟異步任務(wù)，，瀏覽器的引擎去做一步操作， 
 * 實(shí)質(zhì)上不是開辟一個(gè)子線程，而是創(chuàng)建一個(gè)異步任務(wù) 
 * 優(yōu)點(diǎn)： 
 * 1.不需要用戶等待服務(wù)器相應(yīng) 
 * 在異步派發(fā)xmlHTTPRequest 請(qǐng)求后，馬上把控制權(quán)收回就被返回瀏覽器空頁面 
 * 界面不會(huì)出現(xiàn)白板，等待后臺(tái)服務(wù)器得到請(qǐng)求后，再去執(zhí)行完成方法，在方法中填寫界面數(shù)據(jù)的代碼 
 * 2.不需要加載整個(gè)頁面只需要更新局部數(shù)據(jù)，節(jié)省流量，減輕服務(wù)器壓力 
 * 
 * 為xmlHTTPRequest 設(shè)置一個(gè)回調(diào)函數(shù)，服務(wù)器數(shù)據(jù)到達(dá)時(shí)觸發(fā)函數(shù)，發(fā)送請(qǐng)求時(shí)可以帶少量的參數(shù) 
 * 實(shí)現(xiàn)按需去數(shù)據(jù) 
 * 
 $.ajax(),這是jQuery 對(duì)ajax的封裝的最基礎(chǔ)的函數(shù)，通過這個(gè)函數(shù)可以實(shí)現(xiàn)異步通訊功能 
 var configObj= { 
// method:數(shù)據(jù)提交方式 get OR post 
 URL：請(qǐng)求的網(wǎng)址 
 async：是否異步，默認(rèn)true 
 data：post請(qǐng)求的參數(shù) 
 dataType ：服務(wù)器返回的類型，xml string json 
 success:請(qǐng)求成功后的回調(diào)方法 
 error ：請(qǐng)求失敗后的方法 
 
 } 
 $.ajax(configObj);完成異步請(qǐng)求 
 二、$post()只能采取post請(qǐng)求 
 三、$get() 
 四、$getJSON( url ,完成回調(diào));可以請(qǐng)求本地路徑的內(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 中添加了一個(gè)data-*的方式 來自定義屬性 
 用data-前綴，添加到自定義屬性名上， 
 這樣的結(jié)構(gòu)可以存儲(chǔ)少量的數(shù)據(jù) 
 * */ 
 for (var i=0;i<musicModels.length;i++) { 
// /創(chuàng)建一個(gè)DIV元素表示,音樂中的一行,給這個(gè)div添加music樣式 
//和綁定自定義屬性index來記錄這個(gè)div是列表中的第幾行 
 var $musicDiv = $("<div class = 'music' data-index = "+ i +"></div>"); 
// 將這個(gè)div添加到musicBox 中 
 $(".musicBox").append($musicDiv); 
// 設(shè)計(jì)musicdiv中的子元素,子元素有兩個(gè),一個(gè)是歌曲的圖片,歌曲的信息 
// 創(chuàng)建一個(gè)img 顯示歌曲圖片 
 var $img = ( 
 "<img src =" + musicModels[i].img+" />"); 
 $musicDiv.append($img); 
// 創(chuàng)建一個(gè)音樂信息的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樣式 
  //保證只有一個(gè)div有musicplay 
  $(this).addClass("musicPlay").siblings().removeClass("musicPlay"); 
  
  
 } 
 ); 
 } 
 
 $(".play").click(function(){ 
 player.playOrPause(); 
 }); 
 
 $(".next").click(function(){ 
 player.nextMusic(); 
  
  
 }); 
 $(".pre").click(function(){ 
 player.preMusic(); 
  
  
 }); 
 
 
 })

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: