快捷導(dǎo)航

利用jquery實(shí)現(xiàn)實(shí)時(shí)更新歌詞的方法

更新時(shí)間：2017年01月06日 08:42:51 作者：小紙人兒

這篇文章主要給大家介紹了如何利用jquery實(shí)現(xiàn)實(shí)時(shí)更新歌詞的方法,文中給出了詳細(xì)的實(shí)現(xiàn)思路和示例代碼，對(duì)大家的參考借鑒具有一定的價(jià)值，有需要的朋友下面來(lái)跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。

前言

最近自己寫(xiě)了個(gè)移動(dòng)端音樂(lè)播放器，用了很多框架，也踩了很多坑，感覺(jué)比較復(fù)雜的就是計(jì)算歌詞實(shí)時(shí)播放了，所以想著大概給整理了一下，分享出來(lái)，有問(wèn)題的話(huà)朋友們可以指出，有需要的朋友們也可以學(xué)習(xí)學(xué)習(xí)。

布局

（歌詞都是后臺(tái)數(shù)據(jù)獲取，方便理解我把所有歌詞都一一列出來(lái)）

<section>
 <figure>
 <img id="animat" src="img/img3.jpg"/>
 </figure>
 <div class="lyric">
 <div class="lrc-list">
  <p data-play="audio-t-0" data-index="0">逃跑計(jì)劃 </p>
  <p data-play="audio-t-1" data-index="1">一萬(wàn)次悲傷 </p>
  <p data-play="audio-t-2" data-index="2">oh honey </p>
  <p data-play="audio-t-3" data-index="3">我腦海里全都是你 </p>
  <p data-play="audio-t-8" data-index="4">oh無(wú)法抗拒的心情 </p>
  <p data-play="audio-t-13" data-index="5">難以呼吸</p>
  <p data-play="audio-t-15" data-index="6">tonight </p>
  <p data-play="audio-t-17" data-index="7">是否又要錯(cuò)過(guò)一個(gè)夜晚</p>
  <p data-play="audio-t-23" data-index="8">是否還要掩飾最后的期待 </p>
  <p data-play="audio-t-29" data-index="9">oh tonight </p>
  <p data-play="audio-t-30" data-index="10">一萬(wàn)次悲傷 </p>
  <p data-play="audio-t-33" data-index="11">依然會(huì)有意義</p>
  <p data-play="audio-t-35" data-index="12">我一直在最溫暖的地方等你</p>
  <p data-play="audio-t-40" data-index="13">似乎只能這樣停留一個(gè)方向</p>
  <p data-play="audio-t-46" data-index="14">已不能改變</p>
  <p data-play="audio-t-51" data-index="15">每一顆眼淚是遺忘的光 </p>
  <p data-play="audio-t-57" data-index="16">最昏暗的地方也變得明亮</p>
  <p data-play="audio-t-61" data-index="17">我奔涌的暖流尋找你的海洋 </p>
  <p data-play="audio-t-67" data-index="18">我注定這樣</p>
  <p data-play="audio-t-73" data-index="19">oh honey </p>
  <p data-play="audio-t-75" data-index="20">你目光里充滿(mǎn)憂(yōu)郁 </p>
  <p data-play="audio-t-81" data-index="21">就像經(jīng)歷一遍飛行難以逃避</p>
  <p data-play="audio-t-87" data-index="22">tonight </p>
  <p data-play="audio-t-89" data-index="23">是否還要錯(cuò)過(guò)這個(gè)夜晚</p>
  <p data-play="audio-t-91" data-index="24">是否還要熄滅所有的期待</p>
  <p data-play="audio-t-95" data-index="25">tonight</p>
  <p data-play="audio-t-100" data-index="26">一萬(wàn)次悲傷</p>
  <p data-play="audio-t-102" data-index="27">依然會(huì)有意義</p>
  <p data-play="audio-t-106" data-index="28">我一直在最后的地方等你</p>
  <p data-play="audio-t-109" data-index="29">似乎只能這樣</p>
  <p data-play="audio-t-114" data-index="30">停留一個(gè)方向</p>
  <p data-play="audio-t-120" data-index="31">已不能改變</p>
  <p data-play="audio-t-123" data-index="32">每一顆眼淚是遺忘的光</p>
  <p data-play="audio-t-130" data-index="33">最昏暗的地方也變得明亮</p>
  <p data-play="audio-t-135" data-index="34">我奔涌的暖流尋找你的海洋</p>
  <p data-play="audio-t-141" data-index="35">我注定這樣</p>
  <p data-play="audio-t-155" data-index="36">一萬(wàn)次悲傷 </p>
  <p data-play="audio-t-189" data-index="37">依然會(huì)有意義</p>
  <p data-play="audio-t-192" data-index="38">我一直在最后的地方等你</p>
  <p data-play="audio-t-197" data-index="39">似乎只能這樣</p>
  <p data-play="audio-t-200" data-index="40">停留一個(gè)方向 </p>
  <p data-play="audio-t-204" data-index="41">已不能改變</p>
  <p data-play="audio-t-208" data-index="42">每一顆眼淚是遺忘的光</p>
  <p data-play="audio-t-213" data-index="43">最昏暗的地方也變得明亮</p>
  <p data-play="audio-t-218" data-index="44">我奔涌的暖流尋找你的海洋</p>
  <p data-play="audio-t-225" data-index="45">我注定這樣</p>
  <p data-play="audio-t-236" data-index="46">oh honey </p>
  <p data-play="audio-t-238" data-index="47">我腦海里全都是你 </p>
  <p data-play="audio-t-243" data-index="48">oh無(wú)法抗拒的心情 </p>
  <p data-play="audio-t-247" data-index="49">難以呼吸</p>
 </div>
 </div> 
</section>

注意 : 給每一句歌詞都自定義兩個(gè)屬性，data-play屬性為了計(jì)算什么時(shí)候顯示該句歌詞，它的屬性值audio-t- “num” 是表示這句歌詞在num秒的時(shí)候高亮顯示； data-index為了計(jì)算什么時(shí)候歌詞往上走，就按順序定義就行。

以下是靜態(tài)效果圖：

（效果圖沒(méi)有歌詞是因?yàn)樽蠡懦霈F(xiàn)歌詞）

左滑出現(xiàn)歌詞

$('figure').on("swipeLeft" , function(){
 $('figure').css('display' , 'none');
 $('.lyric').css('display' , 'block').addClass("animated slideInRight");
})
$('.lyric').on("swipeRight" , function(){
 $('.lyric').css('display' , 'none');
 $('figure').css('display' , 'block').addClass("animated slideInLeft");
})

歌詞出現(xiàn)：

重點(diǎn)來(lái)了

function lyricPlay(){
 var timer2;
 var $cur = null;
 var $lrcbox = $(".lrc-list");
 $lrcwrap = $lrcbox.parent();
 clearInterval(timer2);
 timer2 = setInterval( function(){
 var time = Math.ceil( $('audio')[0].currentTime); //currentTime 是獲取音樂(lè)實(shí)時(shí)播放時(shí)間
 $cur = $("audio-t-"+time).selector;//拿到自定義屬性data-play
 $('p' , $lrcbox ).each(function(){ //循環(huán)拿到p
  var playT = $(this).data('play');//當(dāng)前播放元素屬性值
  if( playT == $cur ){ 
   //給符合條件歌詞加上高亮并刪除兄弟元素的class名
   $(this).stop().addClass('acitve').siblings().removeClass('acitve');
  }else{
   return;
  }
  var index = $(this).data("index"); //當(dāng)前元素下標(biāo)
  var lineHeight =$(this).height() ; //一行歌詞高度
  var boxHeight = $lrcwrap.height(); //歌詞顯示區(qū)域高度
  var screensize = boxHeight / lineHeight; //一屏顯示多少句歌詞
  var half = Math.floor(screensize / 2); //半屏歌詞數(shù)量
  //當(dāng)前歌詞超過(guò)半屏
  if(index > half){
  //計(jì)算出超過(guò)的高度 減去 一行歌詞的高度
  var top = (half - index) * lineHeight + lineHeight
  $lrcbox.css({
   "top" : parseInt(top) + "px"
  });
  }
 })
 } , 1000)
}
lyricPlay();

效果如下：