社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > HTML5使用Audio標籤實現歌詞同步的效果 _html5教學技巧

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

WBOY
發布： 2016-05-16 15:51:56
原創
2508 人瀏覽過

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">    
    3. 您的瀏覽器不支援audio屬性，請更換瀏覽器正在進行瀏覽。    
  3. audio>
    4.    

有了這個標籤之後，那麼恭喜你，你的頁面已經可以播放音樂了。但這樣會不會顯得頁面太過於單調了，於是我又為頁面添加了一些東西，讓歌詞能夠同步的顯示在頁面上，還能夠選擇要播放的音樂。那麼先要做成這樣的效果，我們就得要去下載一些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 /*陣列本身*/ ) {    
    16. //抽取時間[xx:xx.xx]    
    17. var 
  17. time = v.match(pattern),    //拿歌詞    
    19. 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));
    4. for(var 
  4. i=0,li;i,li;i str.length
    5. ;i ){    
  5. li=$('li>li>li>>
    6. li
  6. >>
    7. li
  7. >>
    8. ' str[i][1] '
  8. li>');    
    9. $('#gc ul').append(li);    
  9. }     $('#aud')[0].ontimeupdate=function(){//視屏音訊目前的播放位置改變時觸發     for (var i = 0
    10. = 
  10. str.length; i 
    11.  
  11. l
    12.  
  12. l
    13.  
  13. l
    14.  
  14. l
    15.  
  15. l
    16.  
  16. l
    17.  
  17. l
    18.  
  18. if (this.currentTime /*目前播放的時間*/ > str[i][0]) {    
    19.  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
    25. songslen
  25. ;i ){    
    27. val
  27. =$('.songs_list li:nth-child(' (i 1) ')').text();    
  28. if(
  29. val==sgname){    
  31. i=(
  32. i==(songslen-1))?1:i 2;   >
    34. 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=
    3. class
  3. =>     li>昨天再一次
  4. 李>     li>你很美
  5. 你很美你很美 李>
  6.      ul>     按鈕 class=class=" 🎜>>點br/>
    7. br/>我按鈕>
  7. div>    
    8. 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;  
    4. var 
  4. 標籤= e.target||e.srcElement;    if(
    5. 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. })  
    21. 好了，到了這裡，那麼你這個歌詞同步的效果的一些功能差不多都有了，關於HTML5使用音頻標籤實現歌詞同步的效果今天也到這裡了。更多資訊請登入腳本之家網站了解更多！
相關標籤：
audio html5
來源：php.cn
上一篇：詳解HTML5中的