コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 は Audio タグを使用して歌詞同期の効果を実現します _html5 チュートリアル スキル

HTML5 は Audio タグを使用して歌詞同期の効果を実現します _html5 チュートリアル スキル

WBOY
リリース： 2016-05-16 15:51:56
オリジナル
2509 人が閲覧しました

HTML5 の最も強力な点は、メディア ファイルの処理です。たとえば、単純な vedio タグを使用してビデオ再生を実現できます。同様に、HTML5 にはオーディオ ファイルを処理するための対応するタグがあります。つまり、オーディオ タグ
HTML5 はリリースされてからかなりの時間が経ちますが、その中のオーディオ タグは一度しか使用されていません。このタグをページに挿入します。今回は、友人がいくつかのページを作成し、audio タグの使用を練習するのを手伝うのを利用しました。
まず、ページに audio タグを挿入する必要があります。後で end 属性を使用する必要があるため、この属性はループ再生の設定に使用しないことをお勧めします。 if ループが If ループに設定されている場合、終了属性は常に false になります。
autoplay='autoplay' は、読み込み後にページが自動的に音楽を再生するように設定します。preload 属性と autoplay 属性は同じ効果を持ちます。autoplay 属性がタグ内にある場合、preload 属性は無視されます。
controls='controls' は、音楽を表示するためのコントロール バーを設定します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <オーディオ src=「音楽/イエスタデイ・ワンス・モア」 .mp3" id="aud" 自動再生=「自動再生」 コントロール=「コントロール」 プリロード="自動">
  2. お使いのブラウザはオーディオ属性をサポートしていません。ブラウザを変更して閲覧してください。
  3. 音声>

このタグを取得すると、おめでとうございます。あなたのページで音楽を再生できるようになります。ただ、それではページが単調になってしまうので、ページ内に歌詞を同期して表示したり、再生する音楽も選択できるように工夫しました。したがって、この効果を実現するには、まず歌詞ファイルを lrc 形式でダウンロードし、次に音楽をフォーマットする必要があります。冒頭の音楽ファイルはこんな感じだったので


各歌詞を 2 桁の配列に挿入する必要があります。
歌詞をフォーマットするためのコードをここに添付します。

XML/HTML コードコンテンツをクリップボードにコピー
  1. //歌詞同期部分
  2. 関数 parseLyric(text) {
  3. //テキストを行ごとに分割し、配列
    4. に格納します
  4. var lines = text.split('n'),
  5. //時刻の一致に使用される正規表現。一致結果は [xx:xx.xx] に似ています。
  6. パターン = /[d{2}:d{2}.d{2}]/g,
  7. //最終結果を保存する配列
  8. 結果 = [];
    9. //時間を置かずに行を削除します
    10. while (!pattern.test(lines[0])) {
  11. 行行 = 行.slice(1); };
  12. //「n」を使用して上記の配列を生成すると、結果の最後の要素は空の要素になり、ここで削除されます
  13. lines[lines.length - 1]
    14. .length
  14. === 0 && lines.pop(); lines.forEach(function(v /*配列要素の値*/ , i /*要素のインデックス*/ , a /*配列自体*/ ) {
    15. //時刻を抽出 [xx:xx.xx]
    16. var
  16. time
    17. =
  17. v.match(pattern), //歌詞を抽出
  18. v
    19. value
  19. = v.replace(pattern, ''); //1 行に複数の時間が含まれる可能性があるため、時間は [xx:xx.xx][xx:xx.xx][xx:xx.xx] の形式になる場合があります。さらに離れて time.forEach(function(v1, i1, a1) {
  20. //時間内の角括弧を削除すると、xx:xx.xx が得られます
  21. var
    22. t
  22. =
    23. v1
  23. .slice(1, -1).split(':'); //結果を最終配列にプッシュします result.push([parseInt(t[0], 10) * 60 parseFloat(t[1]), value]);
    24. });
    25. });
    26. //最後に、保存後に歌詞が正常に表示されるように、結果配列の要素を時間で並べ替えます
    27. result.sort(function(a, b) {
    28. a[0] - b[0] を返す
  28. ;
    29. });
    30. 結果を返す
    31. }
  32. この時点で、各音楽の歌詞を簡単に使用できるようになります。音楽を正常に切り替えるために、歌詞を取得してページに同期して表示する機能が必要です。コードは以下に添付されています。
  33. XML/HTML コード
    34. コンテンツをクリップボードにコピー
  1. function fn(sgname){
  2. $.get('music/' sgname '.lrc',function(data){
  3. var str=parseLyric(データ);
    4. for(var
  4. i=0,li;i<str.length;i ){
  5. li=$('<li>' str[i][1] 'li>');
    6. $('#gc ul').append(li);
    7. }
    8. $('#aud')[0]
  8. .ontimeupdate=function(){//videoオーディオの現在の再生位置が変更されるとトリガーされます
    9. for (var
  9. i = 0, l = str.length; i < l; 🎜> if (this.currentTime /*現在の再生時間*/
  10. > str[i][0]) { //ページへ表示
  11. $('#gc ul').css('top',-i*40 200 'px'); //歌詞を上に移動します
  12. $('#gc ul li').css('color','#fff');
  13. $('#gc ul li:nth-child(' (i 1) ')').css('color','red') //現在再生されている歌詞を強調表示します
  14. }
  15. }
  16. if(this.ended){ //現在再生中の音楽の再生が終了したかどうかを判定します
  17. var
  18. songslen=$('.songs_list li').length for(var
  19. i= 0,val;i<ソングレン;i ){
  20. val=$('.songs_list li:nth-child(' (i 1) ')').text(); > if(val
  21. ==sgname){ i
  22. =(i==(songslen-1))?1:i 2; > sgname
    23. =$('.songs_list li:nth-child(' i ')').text(); //音楽が終了したら切り替えます音楽を演奏しています
  23. $('#gc ul').empty(); //歌詞をクリア
    24. $('#aud').attr('src','music/' sgname '.mp3');
  24. fn(sgname)
  25. 戻る
  26. }
  27. }
  28. }
  29. };
  30. });
  31. } fn($('.songs_list li:nth-child(1)').text());
  32. これで、音楽の歌詞が通常どおり同期してページに表示されるようになりました。ただし、まだ不足しているものが 1 つあります。それは、このリスト内の音楽をクリックして音楽を再生できるようにすることです。以下にコードを添付します。
    33. HTML コード
XML/HTML コード

コンテンツをクリップボードにコピー

  1. <div class="songs_cnt" >
  2. <ul クラス="songs_list" >
  3. <リ>昨日もう一度もう一度 リ>
  4. <リ>あなたは美しいです リ>
  5. ul>
  6. <ボタン クラス="sel_song" >ポイント<br/>< br/>我ボタン>
  7. div>
  8. <div id="gc" >
  9. <ul>ul>
  10. div>

css代码

XML/HTML コード复制コンテンツ到剪贴板
  1. #gc{
  2. 幅: 400px;    
  3. 高さ: 400ピクセル;    
  4. 背景: 透明。    
  5. マージン: 100px 自動;    
  6. 色: #fff;    
  7. フォントサイズ: 18px;    
  8. オーバーフロー: 非表示;    
  9. 位置: 相対。    
  10. }
  11. #gc ul{
  12. 位置: 絶対;    
  13. トップ: 200ピクセル;    
  14. }
  15. #gc ul li{
  16. text-align: center;    
  17. 高さ: 40px;    
  18. 行の高さ: 40px;    
  19. }
  20. .songs_cnt{
  21. float: 左;    
  22. margin-top: 200px;    
  23. 位置: 相対。    
  24. }
  25. .songs_list{
  26. 背景色: rgba(0,0,0,.2);    
  27. border-radius: 5px;    
  28. float: 左;    
  29. 幅: 250px;    
  30. パディング: 15px;    
  31. margin-left: -280px;    
  32. }
  33. .songs_list li{
  34. 高さ: 40px;    
  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. 幅: 40px;    
  48. 高さ: 80px;    
  49. margin-top: -40px;    
  50. フォントサイズ: 16px;    
  51. text-align: center;    
  52. 背景色: 透明;    
  53. ボーダー: 1px solid #2DCB70;    
  54. フォントの太さ: 太字;    
  55. カーソル: ポインタ;    
  56. border-radius: 3px;    
  57. フォントファミリー: サンセリフ;    
  58. 遷移:すべて 2;    
  59. -moz-transition:all 2;    
  60. -webkit-transition:all 2s;    
  61. -o-transition:all 2s;    
  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=event||window.event;    
  4. var tag= e.target||e.srcElement;    
  5. if(tag.nodeName=='BUTTON'){
  6. $('.songs_list').animate({'marginLeft':'0px'},'slow');    
  7. }
  8. });    
  9. $('.songs_cnt').mouseleave(function () {
  10. $('.songs_list').animate({'marginLeft':'-280px'},'slow');    
  11. });    
  12. $('.songs_list li').each(function () {
  13. $(this).click(function () {
  14. $('#aud').attr('src','music/' $(this).text() '.mp3');    
  15. $('#gc ul').empty();    
  16. fn($(this).text());    
  17. $('.songs_list li').removeClass('active');    
  18. $(this).addClass('active');    
  19. });    
  20. })

はい、ここまで来ました。この歌のシンク効果にはいくつかの機能上の違いはありますが、HTML5 を使用したオーディオ マークによる歌のシンクの効果については、今日もここに到達しました。

関連ラベル：
audio html5
ソース：php.cn
前の記事：HTML5_html5 チュートリアル スキルの