用HTML做了個音樂播放器，可以循環播放，選擇歌曲，以及自動播放下一首，運用了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%; /*內容超出范圍部分滾動*/ overflow: scroll; } /*定義一條音樂的列表,每行的樣式 在js中動態加載到音樂列表每一行的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; } /*音樂播放時所對應的行的樣式*/ .musicPlay{ background: rgba(120,10,60,0.4); } .musicPlay p{ color: red; } /*設置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"> <!--內容要通過讀取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對象 // 創建music對象,用于保存音樂的屬性 function Music(){ } Music.prototype.src= ""; Music.prototype.img =""; Music.prototype.num=""; Music.prototype.musicName=""; Music.prototype.name=""; //創建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() 音樂播放器播放音樂時監聽 //把進度條和音樂的時間長度結合起來 //音樂每播放一秒進讀條就會前進一個單位 this.duration音樂的總長度 this.audio.ontimeupdate =function(){ //把進度條的總長度設為音樂的總長度 $(".range").attr("max",this.duration); //設置進度條的值為播放的時間 $(".range").val(this.currentTime); //當一首歌播放完再去播放下一首 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); //波讓其的狀態 this .isplay= true; }; Player.prototype.nextMusic = function(){ //越界問題 if (this .playIndex >= musicModels.length - 1) { this.playIndex = 0; }else{ this.playIndex = this .playIndex + 1; } //改變音樂類表的對應項的樣式 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; } //改變音樂類表的對應項的樣式 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文件從此向下 // 創建音樂數組 var musicModels = []; //創建音樂播放器對象 var player= new Player(); /*Ajax 目的是在js中實現異步操作 * JS是單線程 的，在單線程中模擬java oc 多線程 開辟異步任務，，瀏覽器的引擎去做一步操作， * 實質上不是開辟一個子線程，而是創建一個異步任務 * 優點： * 1.不需要用戶等待服務器相應 * 在異步派發xmlHTTPRequest 請求后，馬上把控制權收回就被返回瀏覽器空頁面 * 界面不會出現白板，等待后臺服務器得到請求后，再去執行完成方法，在方法中填寫界面數據的代碼 * 2.不需要加載整個頁面只需要更新局部數據，節省流量，減輕服務器壓力 * * 為xmlHTTPRequest 設置一個回調函數，服務器數據到達時觸發函數，發送請求時可以帶少量的參數 * 實現按需去數據 * $.ajax(),這是jQuery 對ajax的封裝的最基礎的函數，通過這個函數可以實現異步通訊功能 var configObj= { // method:數據提交方式 get OR post URL：請求的網址 async：是否異步，默認true data：post請求的參數 dataType ：服務器返回的類型，xml string json success:請求成功后的回調方法 error ：請求失敗后的方法 } $.ajax(configObj);完成異步請求 二、$post()只能采取post請求 三、$get() 四、$getJSON( url ,完成回調);可以請求本地路徑的內容 * * * */ $.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(){ //先要遍歷數據源數組 /* html5 中添加了一個data-*的方式 來自定義屬性 用data-前綴，添加到自定義屬性名上， 這樣的結構可以存儲少量的數據 * */ for (var i=0;i<musicModels.length;i++) { // /創建一個DIV元素表示,音樂中的一行,給這個div添加music樣式 //和綁定自定義屬性index來記錄這個div是列表中的第幾行 var $musicDiv = $("<div class = 'music' data-index = "+ i +"></div>"); // 將這個div添加到musicBox 中 $(".musicBox").append($musicDiv); // 設計musicdiv中的子元素,子元素有兩個,一個是歌曲的圖片,歌曲的信息 // 創建一個img 顯示歌曲圖片 var $img = ( "<img src =" + musicModels[i].img+" />"); $musicDiv.append($img); // 創建一個音樂信息的p標簽 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設置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(); }); })以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
