HTML5 Web ミュージック プレーヤーのサンプル コード

この記事では、HTML5 Web ミュージック プレーヤーのサンプル コードを紹介し、皆さんに共有します。詳細は次のとおりです。

audio タグと video タグは HTML5 で導入され、他のプラグインを使用せずにオーディオとビデオを直接再生できるようになりました。次に、H5 の audio タグとそれに関連する属性およびメソッドを使用して、単純な音楽プレーヤーを作成します。主に以下の機能が含まれます。

1. 一時停止、前の曲、次の曲の再生

2. 音量と再生プログレスバーを調整します

3. リストに従って現在の曲を切り替えます

まずは最終結果を見てみましょう:

この音楽プレーヤーの構造は主に、曲情報、プレーヤー、プレイリストの 3 つの部分に分かれています。プレーヤー部分に注目してみましょう。まず、再生のためにプレーヤーに 3 つのオーディオ タグを配置します。

 <audio id=music1>ブラウザは audio タグをサポートしていません<source src=media/Beyond - The Glorious Years.mp3></source></audio><audio id=music2>ブラウザは audio タグをサポートしていません<source src=media /Daniel Powter - Free Loop.mp3></source></audio><audio id=music3>ブラウザは audio タグをサポートしていません<source src=media/Jay Chou、Fei Yuqing-何千マイルも離れたところ.mp3></source></audio>

以下のプレイリストも 3 つのオーディオ タグに対応しています。

 <div id=playList> <ul> <li id=m0>栄光の年を越えて</li> <li id=m1>ダニエル・パウターフリー・ループ</li> <li id=m2>ジェイ・チョウ、フェイ・ユーチン-千マイルの外</li> </ul></div>

次に、上記の機能を徐々に実装していきます。まず、再生ボタンを押すと、曲の進行に合わせてプログレスバーが進み、再生時間も徐々に増加します。再生ボタンが一時停止ボタンに変わると、プレイリストのスタイルもそれに応じて変化します。

この関数を実行する前に、まず 3 つのオーディオ タグの ID を取得し、後で使用できるようにそれらを配列に保存する必要があります。

 var music1= document.getElementById(music1);var music2= document.getElementById(music2);var music3= document.getElementById(music3);var mList = [music1,music2,music3];

これで、再生ボタンの機能を完了できます。まず、音楽の再生ステータスをマークするフラグを設定し、次に配列のインデックスのデフォルト値を設定します。

次に、再生ステータスを判断し、対応する関数を呼び出し、フラグの値とリストの対応する項目スタイルを変更します。

 function playMusic(){if(flag&&mList[index].paused){ mList[index].play(); document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index) .style .color = ホワイト;progressBar(); play.style.backgroundImage = url(media/pause.png); フラグ = false;}else{ mList[index].pause() フラグ = true;

上記のコードは複数の関数を呼び出します。そのうち、再生と一時停止は audio タグに付属のメソッドであり、他の関数は独自に定義されています。これらの関数がどのように実装され、どのような関数に対応するのかを見てみましょう。

1 つ目はプログレス バー機能です。この関数は、曲の全体の長さを取得し、現在の再生の進行状況にプログレス バーの全長を乗算して、プログレス バーの位置を計算します。

 function progressBar(){var lenth=mList[index].duration;timer1=setInterval(function(){ cur=mList[index].currentTime;//現在の再生時間を取得します progress.style.width=+parseFloat(cur/ lenth)*300+px; progressBtn.style.left= 60+parseFloat(cur/lenth)*300+px;},10)}

以下は再生時間を変更する関数です。ここではタイミング関数を設定し、時々実行して再生時間を変更します。取得した曲の長さは秒単位で計算されるため、if ステートメントを使用して長さの判定を変換し、再生時間を分と秒で表示するように変更する必要があります。

 function playTimes(){timer2=setInterval(function(){ cur=parseInt(mList[index].currentTime);//秒 var minutes=parseInt(cur/60); if (分<10) { if(cur% 60 <10){ playTime.innerHTML=0+分+:0+cur%60+ }else{ playTime.innerHTML=0+ minutes+:+cur%60+; } } else{ if(cur%60<10){ playTime.innerText= minutes+:0+cur%60+; cur%60+; } } },1000);}

次に、進行状況バーを使用して再生の進行状況を調整し、音量を調整する機能を完了しましょう。

再生の進行状況を調整する機能はイベント オブジェクトを使用して実装されます。offsetX 属性は IE イベントでのみ使用できるため、効果を表示するには IE ブラウザを使用することをお勧めします。まず、プログレス バーにイベント リスナーを追加します。プログレス バー上でマウスをクリックすると、マウスの位置が取得され、位置をプログレス バーの全長で割った値に基づいて現在の再生の進行状況が計算されます。曲が決まっています。

 //再生の進行状況を調整 total.addEventListener(click,function(event){var e =event || window.event;document.onmousedown = function(event){ var e =event || window.event; var MousePos1 = e. offsetX; var maxValue1 = total.scrollWidth; mList[index].currentTime = (mousePos1/300)*mList[index].duration; progress.style.width = マウス位置 1+ピクセル; 進行状況Btn.style.left = 60+ マウス位置 1 +ピクセル;}})

以下は、ボリュームを調整するためにドラッグを使用する機能です。そのアイデアは、ボリューム バーのボタン ボールにイベント モニタリングを追加し、それに基づいてボリューム バー全体に対するボタン ボールの位置を計算することです。最後に、計算に従って、結果にボリュームを乗算して、現在のボリュームを取得します。

 volBtn.addEventListener(mousedown,function(event){var e =event || window.event;var that =this;//ボールのデフォルトのドラッグイベントを防止する e.preventDefault();document.onmousemove = function(event){ var e = イベント || var MousePos2 = e.offsetY;var maxValue2 = vol.scrollHeight;if(mousePos2<0){mousePos2 = 0;}if(mousePos2>maxValue2){mousePos2=maxValue2;}mList[index].volume = (1-mousePos2/maxValue2);console.log(mList[index ].volume);volBtn.style.top = (mousePos2)+px;volBar.style.height = 60-(mousePos2)+px;document.onmouseup = function(event){ document.onmousemove = null;}}})

最後に、より複雑な曲切り替え機能を実装します。

まず、前ボタンと次ボタンを使用して切り替える方法を見てみましょう。音楽を切り替えるときに注意すべき点がいくつかあります。まず、現在再生中の音楽を停止し、次の音楽に切り替える必要があります。次に、進行状況バーと再生です。時間をクリアして再計算する必要があります。第三に、それに応じて曲情報も変更する必要があり、プレーヤーのプレイリスト スタイルも変更する必要があります。上記の 3 つのポイントを理解したら、関数の実装を開始できます。

 //前の曲 function prevM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();--index;if(index==-1){index=mList.length - 1;}clearListBgc();document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = ホワイト;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.backgroundImage = url(media/play.png);}else{ play.style.backgroundImage = url(media/pause.png);}} //次の曲関数 nextM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();++index;if(index = =mList.length){index=0;}clearListBgc();document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = ホワイト;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.backgroundImage = url(media/play.png);}else{ play.style.backgroundImage = URL(メディア/一時停止.png);}}

以下のコードは、リストをクリックすることで曲を切り替えます。

 m0.onclick = function (){clearInterval(timer1);clearInterval(timer2);qingkong();flag = false;stopM();index = 0;pauseall();play.style.backgroundImage = url(media/pause. png);clearListBgc();document.getElementById(m0).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = ホワイト;mList[index].play();cleanProgress();progressBar();changeInfo(index);playTimes();}m1.onclick = 関数(){clearInterval(timer1);clearInterval(timer2);flag = false;qingkong();stopM();index = 1;pauseall();clearListBgc();play.style.backgroundImage = url(media/pause.png);document.getElementById(m1).style.backgroundColor = #A71307;document.getElementById(m+index).style。色=ホワイト;mList[index].play();cleanProgress();changeInfo(index);progressBar();playTimes();}m2.onclick = function (){clearInterval(timer1);clearInterval(timer2);flag = false ;qingkong();stopM();index = 2;pauseall();play.style.backgroundImage = url(media/pause.png);clearListBgc();document.getElementById(m2).style.backgroundColor = #A71307;document.getElementById(m+index).style.color =white;mList[index].play() ;cleanProgress();changeInfo(index);progressBar();playTimes();}

プレイリストによる曲の切り替えの考え方は、ボタンによる切り替えの考え方に似ています。対応するリスト項目に従って現在再生する曲を設定するだけです。

上記の曲を切り替える関数ではいくつかのメソッドが呼び出されます。これらのメソッドの使用法を見てみましょう。

1 つ目は、曲情報を切り替えることです。

 function changeInfo(index){if (index==0) { musicName.innerHTML = 栄光の日々; singer.innerHTML = Beyond;}if (index==1) { musicName.innerHTML = フリー ループ; }if (index==2) { musicName.innerHTML = 数千マイル離れたところ; singer.innerHTML = ジェイ・チョウ、フェイ・ユーチン;}}

次に、両方のタイマーをクリアします。

 //進行状況バーを 0 に設定します function cleanProgress(timer1){if(timer1!=unknown){ clearInterval(timer1);}progress.style.width=0;progressBtn.style.left=60px;} function qingkong(timer2) { if (timer2!=unknown){ clearInterval(timer2);}}

音楽の再生を停止し、再生時間を再開します。

関数 stopM(){if(mList[index].played){mList[index].pause(); mList[index].currentTime=0;}}

最後に、以下のプレイリストのスタイルを変更します。

 function clearListBgc(){document.getElementById(m0).style.backgroundColor = #E5E5E5;document.getElementById(m1).style.backgroundColor = #E5E5E5;document.getElementById(m2).style.backgroundColor = #E5E5E5;document.getElementById (m0).style.color = 黒;document.getElementById(m1).style.color = 黒;document.getElementById(m2).style.color = 黒;}

この時点で、音楽プレーヤーは基本的に完成しました。アニメーションの効果を見てみましょう。

著者: ジェリー・エデュケーション

出典: http://www.cnblogs.com/jerehedu/

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。