DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 運用js教你輕松制作html音樂播放器
運用js教你輕松制作html音樂播放器
編輯:關於JavaScript     

用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(); 
   
   
  }); 
  
 
 })

 以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved