HTML5 を使用して Web ミュージックプレーヤーを実装する-H5 チュートリアル-php.cn

この記事では主に HTML5 Web ミュージックプレーヤーのサンプルコードを紹介します。内容が非常に優れているので、参考にしてください。

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

1 機能紹介

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

1. 一時停止、前の曲と次の曲を再生します

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

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

最後に見てみましょう。まずは効果です:

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

<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 つの audio タグに対応しています:

<p id="playList">
    <ul>
        <li id="m0">Beyond-光辉岁月</li>
        <li id="m1">Daniel Powter-Free Loop</li>
        <li id="m2">周杰伦、费玉清-千里之外</li>
    </ul>
</p>

ログイン後にコピー

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

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

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

ログイン後にコピー

2 再生と一時停止:

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

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

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)";
}
}

ログイン後にコピー

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

3 プログレスバーと再生時間:

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);
}

ログイン後にコピー

4 再生の進行状況と音量を調整します:

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

再生の進行状況を調整する機能はイベントオブジェクトを使用して実装されています。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;
}
}
})

ログイン後にコピー

5曲切り替え

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

まず、前へおよび次へボタンを使用して切り替える方法を見てみましょう。音楽を切り替えるときに注意する必要がある問題がいくつかあります。まず、現在再生中の音楽を停止して、次の音楽に切り替える必要があります。バーと再生時間をクリアして再計算する必要があります。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();
}

ログイン後にコピー

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

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

まず、曲情報を切り替えます:

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;
}
}

ログイン後にコピー

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

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 = "black";
document.getElementById("m1").style.color = "black";
document.getElementById("m2").style.color = "black";
}

ログイン後にコピー

この時点で、音楽プレーヤーがほぼ完成しました。アニメーションの効果を見てみましょう: