HTML5を使用してWebミュージックプレーヤーを作成する方法-見出し-php.cn

機能紹介

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

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

2. 音量と再生進行状況バーを調整

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

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

HTML5を使用してWebミュージックプレーヤーを作成する方法

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

 <audio id="music1">浏览器不支持audio标签
<source src="media/Beyond - 光辉岁月.mp3"></source>
</audio>
<audio id="music2">浏览器不支持audio标签
<source src="media/Daniel Powter - Free Loop.mp3"></source>
</audio>
<audio id="music3">浏览器不支持audio标签
<source src="media/周杰伦、费玉清 - 千里之外.mp3"></source>
</audio>

ログイン後にコピー

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

 <div id="playList">
<ul>
<li id="m0">Beyond-光辉岁月</li>
<li id="m1">Daniel Powter-Free Loop</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];

ログイン後にコピー

再生と一時停止:

これで、再生ボタンの機能を完了できます。まず、音楽の再生ステータスをマークするフラグを設定し、次に配列のインデックスのデフォルト値を設定します。再生ステータスを設定します。判断して、対応する関数を呼び出し、リスト内の対応する項目のフラグの値とスタイルを変更します。

var flag = true;
var index = 0;
function playMusic(){
if(flag&&mList[index].paused){
mList[index].play();
document.getElementById("m"+index).style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
progressBar();
playTimes();
play.style.backgroundImage = "url(media/pause.png)";
flag = false;
}else{
mList[index].pause();
flag = true;
play.style.backgroundImage = "url(media/play.png)";
}
}

ログイン後にコピー

上記の HTML ページのコードは、再生と一時停止を含む複数の関数を呼び出します。は 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 minute=parseInt(cur/60);
if (minute<10) {
if(cur%60<10){
playTime.innerHTML="0"+minute+":0"+cur%60+"";
}else{
playTime.innerHTML="0"+minute+":"+cur%60+"";
}
} else{
if(cur%60<10){
playTime.innerText= minute+":0"+cur%60+"";
}else{
playTime.innerText= minute+":"+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 = mousePos1+"px";
progressBtn.style.left = 60+ mousePos1 +"px";
}
})

ログイン後にコピー

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

volBtn.addEventListener("mousedown",function(event){
var e = event || window.event;
var that =this;
//阻止球的默认拖拽事件
e.preventDefault();
document.onmousemove = function(event){
var e = event || window.event;
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;
document.onmouseup = null;
}
}
})

ログイン後にコピー

曲の切り替え

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

まず、前へおよび次へボタンを使用して切り替える方法を見てみましょう。音楽を切り替えるときに注意する必要がある問題がいくつかあります。まず、現在再生中の音楽を停止して、次の音楽に切り替える必要があります。バーと再生時間をクリアして再計算する必要があります。3 番目に、曲情報もそれに応じて変更する必要があり、プレーヤーの下のプレイリストスタイルも変更する必要があります。上記の 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 = "white";
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)";
}
}
//下一曲
function 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 = "white";
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)";
}
}

ログイン後にコピー

以下のコードは、リストをクリックして曲を切り替えるものです。

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 = "white";
mList[index].play();
cleanProgress();
progressBar();
changeInfo(index);
playTimes();
}
m1.onclick = function (){
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.color = "white";
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 = "Free Loop";
singer.innerHTML = "Daniel Powter";
}
if (index==2) {
musicName.innerHTML = "千里之外";
singer.innerHTML = "周杰伦、费玉清";
}
}

ログイン後にコピー

次に、2つのタイマーをクリアします:

//将进度条置0
function cleanProgress(timer1){
if(timer1!=undefined){
clearInterval(timer1);
}
progress.style.width="0";
progressBtn.style.left="60px";
}
function qingkong(timer2){
if(timer2!=undefined){
clearInterval(timer2);
}
}

ログイン後にコピー

次に、再生中の音楽を停止し、再生時間を復元します。

function stopM(){
if(mList[index].played){
mList[index].pause();
mList[index].currentTime=0;
flag=false;
}
}

ログイン後にコピー

この時点で、HTML5 で書かれた音楽プレーヤーがほぼ完成しました。完成後の効果はまだ非常に優れています。急いで集めてください。上記のチュートリアルに基づいて HTML5 を使用して独自のプレーヤーを作成できることを願っています。