基于JavaScript怎么實現讓歌詞滾動播放
更新時間：2015年11月03日 10:02:38 作者：CYNICZZZ
各種音樂播放器上都有一個自動滾動播放歌詞的功能，當前滾動到的歌詞會高亮居中顯示，即使歌詞被換行也能正常居中，那么這個功能基于JavaScript怎么實現讓歌詞滾動播放呢？感興趣的朋友一起看看吧
各種音樂播放器上都有一個自動滾動播放歌詞的功能，當前滾動到的歌詞會高亮居中顯示，即使歌詞被換行也能正常居中，那么這個功能基于JavaScript怎么實現讓歌詞滾動播放呢？請看下文詳解。
一般音樂播放器使用的歌詞格式都是lrc，為了方便處理，我們這里使用XML格式的歌詞。介紹一個網站：中文歌詞庫。它提供xml格式的歌詞。
我們先來看一下這個例子的最終效果：
下面是基于jQuery的具體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Player</title>
<style type="text/css">
#audio-wrapper{
border:1px solid;
text-align:center;
}
.activated{
color:#33b;
font-weight:bold;
background:#ddf;
}
#lrc{
text-align:center;
width:360px;
height:400px;
overflow:hidden;
border:2px solid #ddd;
box-shadow:2px 2px 2px silver;
}
.lyrics-container{
position:relative;
width:99%;
height:80%;
border:1px solid red;
overflow:hidden;
}
.lyrics-container2{
position:absolute;
width:355px;
}
#lrc p{
text-indent:0;
margin:0;
padding:6px;
}
.music-title,.album,.artist{
margin:0;
padding:4px;
text-indent:0;
text-align:left;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="#audio-wrapper">
<p><audio src="data/aimei.mp3" controls></audio></p>
</div>
<div id="lrc"></div>
<script type="text/javascript">
$(document).ready(function(){
var $lrc = $('#lrc');
var html ='';
$('audio').on('play',function(){
var start = new Date();
if($lrc.html() == ''){
$.ajax({
url:'data/aimei.xml',
type:'get',
dataType:'xml',
success:function(data){
html += '<div class="info">';
if($(data).find('TITLE').length > 0){
html += '<p class="music-title">歌曲：' + $(data).find('TITLE').text()+'</p>';
}
if($(data).find('ALBUM').length > 0){
html += '<p class="album">專輯：' + $(data).find('ALBUM').text()+'</p>';
}
if($(data).find('ARTIST').length > 0){
html += '<p class="artist">演唱：' + $(data).find('ARTIST').text()+'</p>';
}
html += '</div>';
html += '<div class="lyrics-container">'
html += '<div class="lyrics-container2">'
$(data).find('LRC').each(function(){
html += '<p class="lyrics" tag="'+ $(this).attr('TAG') +'">' + $(this).text() +'</p>';
});
html += '</div></div>';
$lrc.html(html);
//alert($(data).find('LRC').length);
}
});
}
var timer = setInterval(function(){
var now = new Date();
var elapsed = now - start;
if($lrc.find('.lyrics').length){
$lrc.find('.lyrics').each(function(){
var isOK = elapsed - $(this).attr('tag');
if(isOK < 13 && isOK > 0){
$lrc.find('.lyrics').removeClass('activated');
$(this).addClass('activated');
if($(this).prevAll('.lyrics').length > 3){
$('.lyrics-container2').animate({
'top':'-=30px'
});
//console.log($(this).prevAll('.lyrics').length);
}
}
});
}
},10);
});
});
</script>
</body>
</html>
以上內容是本文給大家詳解的基于JavaScript怎么實現讓歌詞滾動播放的全部內容，希望大家喜歡。
相關文章
真見識了-全代碼編寫的圖片...2007-08-08
javascript textarea光標定位方法(兼容IE和FF)
主要是實現textarea中光標的定位方法，考慮到多瀏覽器的兼容性，需要的朋友可以參考下。2011-03-03
命令模式提供了一種優(yōu)雅的解決方案，使得我們能夠靈活地封裝和管理代碼操作，所以本文將為大家介紹命令模式的概念、應用場景以及在JavaScript中的實現方式，需要的可以參考一下2023-06-06
今天小編大家分享一篇Layui選項卡制作歷史瀏覽記錄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
取消單選按鈕選中的方法有很多，下面為大家詳細介紹下使用js是如何實現的，感興趣的朋友不要錯過2013-11-11
javascript 使用for循環(huán)時該注意的問題-附問題總結
所謂for循環(huán)就是重復的執(zhí)行一段代碼，for循環(huán)也是希望在創(chuàng)建循環(huán)時常會用到的工具，這篇內容主要給大家介紹javascript 使用for循環(huán)時該注意的問題-附問題總結，需要的朋友可以參考下2015-08-08
數組Array進行原型prototype擴展后帶來的for in遍歷問題
不同的程序語言都有多種循環(huán)語句，而且功能是差不多的，當然使用場合還是有些區(qū)別的，比如for與for in，for in比較好用，它不需要預先知道對象屬性的長度。2010-02-02
js 結合圖片實現的蒙版進度條效果。2010-03-03
本文使用前端開發(fā)技術，結合?SVG?和?CSS?來實現類似的液化流動效果，包含的知識點主要包括：mask-image?遮罩、feTurbulence?和?feDisplacementMap?濾鏡、filter?屬性、canvas?繪制方法、TimelineMax?動畫及input[type=file]?本地圖片資源加載，需要的朋友可以參考下2022-08-08
JS實現iframe自適應高度的方法(兼容IE與FireFox)
這篇文章主要介紹了JS實現iframe自適應高度的方法,涉及javascript與iframe交互動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下2016-06-06