HTML5使用Audio標籤實現歌詞同步的效果 _html5教學技巧

HTML5的最強之處莫過於對媒體檔案的處理，如利用一個簡單的vedio標籤就可以實現影片播放。類似地,在HTML5中也有對應的處理音頻文件的標籤，那就是audio標籤
HTML5出來這麼久了，但是關於它裡面的audio標籤也就用過那麼一次，當然還僅僅只是把這個標籤插入到了頁面中。這次呢就剛好趁著幫朋友做幾個頁面，拿這個audio標籤來練練手。
首先你需要在頁面中插入一個audio標籤，注意這裡最好不要設定loop='loop',這個屬性使用來設定循環播放的，因為到後面需要使用ended屬性的時候，如果loop被設定為loop的話，ended屬性將永遠是false。
autoplay='autoplay'設定頁面載入後自動播放音樂，preload和autoplay屬性的作用是一樣的，如果標籤中出現了autoplay屬性，那麼preload屬性將被忽略。
controls='controls'設定顯示音樂的控制條。

XML/HTML Code複製內容到剪貼簿

1. audio src>src>src>"music/Yester . mp3" id="aud" >p ="autoplay" controls= >preload="auto">    
您的瀏覽器不支援audio屬性，請更換瀏覽器正在進行瀏覽。    
3. audio>
   

有了這個標籤之後，那麼恭喜你，你的頁面已經可以播放音樂了。但這樣會不會顯得頁面太過於單調了，於是我又為頁面添加了一些東西，讓歌詞能夠同步的顯示在頁面上，還能夠選擇要播放的音樂。那麼先要做成這樣的效果，我們就得要去下載一些lrc格式的歌詞文件，然後你需要把這些音樂格式化一番。因為剛開始的音樂檔案是這樣的

我們需要把每一句歌詞插入到一個二位數組裡面，經過格式化之後歌詞就變成這樣的格式了

這裡附上格式化歌詞的代碼

XML/HTML Code

複製內容到剪貼簿

1. //歌詞同步部分    
2. function parseLyric(text) {    
3. //將文字分隔成一行一行，存入數組    
4. var lines = text.split('n'),     🎜>.split('n'),     🎜>
5. //用於配對時間的正規表示式，配對的​​結果類似[xx:xx.xx]    
6. pattern = /[d{2}:d{2}.d{2}]/g,    
7. //儲存最終結果的陣列    
8. result = [];    
9. //去掉不含時間的行    
10. while (!pattern.test(lines[0])) {    
11. lineslines = lines.slice(1);    
12. };    
13. //上面用'n'產生生成數組時，結果中最後一個為空元素，這裡將去掉    
14. lines[lines.length - 1].length === 0 && lines.pop(); lines.forEach(function(v /*陣列元素值*/ , i /*元素索引*/ , a /*陣列本身*/ ) {    
//抽取時間[xx:xx.xx]    
var 
17. time = v.match(pattern),    //拿歌詞    
v
19. value = v.replace(pattern, '');     //因為一行裡面可能有多個時間，所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式，需要進一步分隔    
20. time.forEach(function(v1, i1, a1) {    
21. //去掉時間裡的中括號得到xx:xx.xx    
22. var 
23. t = v1.slice(1,-1).split (':'); //將結果壓入最終陣列    
24. result.push([parseInt(t[0], 10) * 60   parseFloat(t[1]), value]);    
25. });    
26. });    
27. //最後將結果數組中的元素按時間大小排序，以便保存之後正常顯示歌詞    
28. result.sort(function(a, b) {    
29. return a[0] - b[0];    
30. });    
31. return result;    
32. }  

到了這裡我們就能夠很容易的使用每首音樂的歌詞了，我們需要有一個function來獲得歌詞，並且讓他同步的顯示在頁面上，能夠正常的切換音樂。下面附上程式碼。

XML/HTML Code

複製內容到剪貼簿

1. function fn(sgname){    
2. $.get('music/' sgname '.lrc',function(data){    
3. var str=parseLyric(data));
for(var 
4. i=0,li;i,li;i str.length
;i ){    
5. li=$('li>li>li>>
li
6. >>
li
7. >>
' str[i][1] '
8. li>');    
$('#gc ul').append(li);    
9. }     $('#aud')[0].ontimeupdate=function(){//視屏音訊目前的播放位置改變時觸發     for (var i = 0
= 
10. str.length; i 
 
11. l
 
12. l
 
13. l
 
14. l
 
15. l
 
16. l
 
17. l
 
18. if (this.currentTime /*目前播放的時間*/ > str[i][0]) {    
 str[i][0]) {    
19. //顯示到頁     $('#gc ul').css('top',-i*40 200 'px'); //讓歌詞往上移動     $('#gc ul li').css('color','#fff');     $('#gc ul li:nth-child(' (i 1) ')').css('color','red'); //高亮顯示目前播放的哪一句歌詞
20. }     }    
21. if(this.ended){ //判斷目前播放的音樂是否播放完畢     var 
22. songslen=$('.songs_list li').length;     for(var i= 
23. 0,val;i0,val;i
songslen
25. ;i ){    
val
27. =$('.songs_list li:nth-child(' (i 1) ')').text();    
28. if(
29. val==sgname){    
31. i=(
32. i==(songslen-1))?1:i 2;   >
sgname

=$('.songs_list li:nth-child(' i ')').text(); //音樂播放完畢後切換下一首音樂    

$('#gc ul').empty(); //清空歌詞    

$('#aud').attr('src','music/' sgname '.mp3');    

fn(sgname);    

return;     }     }     }     };     });     } fn($('.songs_list li:nth-child(1)').text());    那麼到了這裡你的音樂歌詞已經能夠正常的同步顯示在頁面上了。不過還缺少一個東西，就是一個音樂的列表，我希望能夠點擊這個列表裡的音樂，從而播放該音樂，下面附上程式碼。 HTML程式碼 XML/HTML Code複製內容到剪貼簿

1. div 類=class=class=
2. >     ul class=
class
3. =>     li>昨天再一次
4. 李>     li>你很美
5. 你很美你很美 李>
6.      ul>     按鈕 class=class=" 🎜>>點br/>
br/>我按鈕>
7. div>    
div id=id=id=id
8. =id=id 🎜>>

    

ul>

>>>>      div>    css代碼 XML/HTML 程式碼將內容複製到剪貼簿

1. #gc{    
2. 寬度：400 像素；    
3. 高度：400 像素；    
4. 背景：透明；    
5. 邊距：100 像素自動；    
6. 顏色：#fff；    
7. 字體大小：18px；    
8. 溢位：隱藏；    
9. 職位：親；    
10. }    
11. #gc ul{    
12. 位置：絕對；    
13. 上：200 像素；    
14. }    
15. #gc ul li{    
16. 文字對齊：居中；    
17. 高度：40 像素；    
18. 高價：40px；    
19. }    
20. .songs_cnt{    
21. 浮動：左；    
22. 頁邊距：200px；    
23. 職位：親；    
24. }    
25. .songs_list{    
26. 背景顏色：rgba(0,0,0,.2);    
27. 邊框半徑：5px；    
28. 浮動：左；    
29. 寬度：250 像素；    
30. 內邊距：15px；    
31. 左邊距：-280px；    
32. }    
33. .songs_list li{    
34. 高度：40 像素；    
35. 高價：40px；    
36. 字體大小：16px；    
37. 顏色：rgba(255,255,255,.8);    
38. 遊標：指針；    
39. }    
40. .songs_list li:hover{    
41. 字體大小：20px；    
42. 顏色：rgba(255,23,140,​​.6);    
43. }    
44. .sel_song{    
45. 位置：絕對；    
46. 上：50%；    
47. 寬度：40 像素；    
48. 高度：80 像素；    
49. 頁邊距：-40px；    
50. 字體大小：16px；    
51. 文字對齊：居中；    
52. 背景顏色：透明；    
53. 邊框：1px 實心#2DCB70；    
54. 字體粗細：粗體；    
55. 遊標：指針；    
56. 邊框半徑：3px；    
57. 字體系列：sans-serif；    
58. 過渡：全部 2 秒；    
59. -moz-transition：全部 2；    
60. -webkit-transition：全部 2；    
61. -o-transition：全部 2；    
62. }    
63. .sel_song:hover{    
64. 顏色：#fff；    
65. 背景顏色：#2DCB70；    
66. }    
67. .songs_list li.active{    
68. 顏色：#f00；    
69. }   

js程式碼

XML/HTML 程式碼將內容複製到剪貼簿

1. $('.songs_list li:nth-child(1)').addClass('active');    
2. $('.songs_cnt').mouseenter(function () {    
3. var e=事件||window.event;  
var 
4. 標籤= e.target||e.srcElement;    if(
tag.nodeName
5. =='BUTTON'){     $('.songs_list').animate({'marginLeft':'0px'},'slow');    
6. }    
7. });    
8. $('.songs_cnt').mouseleave(function () {    
9. $('.songs_list').animate({'marginLeft':'-280px'},'slow');    
10. });    
11. $('.songs_list li').each(function () {    
12. $(this).click(function () {    
13. $('#aud').attr('src','music/' $(this).text() '.mp3');    
14. $('#gc ul').empty();    
15. fn($(this).text());    
16. $('.songs_list li').removeClass('active');    
17. $(this).addClass('active');    
18. });    
19. })  
好了，到了這裡，那麼你這個歌詞同步的效果的一些功能差不多都有了，關於HTML5使用音頻標籤實現歌詞同步的效果今天也到這裡了。更多資訊請登入腳本之家網站了解更多！