クールなオーディオプレーヤーの作成に関する HTML5 グラフィックチュートリアル plug-in

上の写真は、このオーディオプレーヤーの UI インターフェイス図で、曲のプレイリストも非表示になっています。プレーヤーの UI 全体は、背景のポートレートと曲のスター評価を除いて、CSS とフォントフェイスで描画されます。これらはすべて CSS とフォントフェイスで描画されます。唯一難しそうなのは、CD とフォントフェイスの制作です。曲内 CD とディスクプレーヤーの両方には、再生中にアニメーション化されたインタラクティブな効果があります。これについては、後のセクションで説明します。プレーヤーで CD をクリックしてプレイリストを開きます~

このチュートリアルは主に Html5 の新しい

主な機能:

1. 再生、一時停止、前の曲、次の曲、音量の増減

2. CD をクリックしてプレイリストを開いたり閉じたりします

3. ローカルの音楽ファイルをプレーヤーにドラッグして再生できます

HTML 構造

コードをコピー

コードは次のとおりです:

< /li>

a

<スパンクラス="progress_bar">

b

e
c d

0:00

0:00

オーディオタグ

上記の構造では、HTML5 の新しい audio タグが見つかります。これは、名前が示すように、プレーヤーのコントローラーです。controls 属性は、ブラウザーがオーディオの再生コントロールを提供することを指定します。 Chrome ブラウザと同様に、この属性を

の下の audio タグに設定すると、コードは次のようになります:

<オーディオコントロール src="xxx.mp3">

ただし、ブラウザごとにオーディオタグのレンダリング効果が異なるため、この単純な方法はクロスブラウザでの使用には適しておらず、ブラウザのデフォルトのプレーヤーコントロールで提供される機能は非常に限られています。。したがって、通常はこの属性を設定しないことでブラウザのデフォルトの再生コントロールを非表示にし、追加のタグとスタイルを手動で追加してプレーヤーの UI インターフェイスをカスタマイズします。

再生コントロール

プレーヤーの UI インターフェイスが描画された後、最初に行う必要があるのは、3 つの主要なコントロールボタン (再生、前の曲、次の曲) に対応するイベントリスナーを追加することです。

コードをコピーします

コードは次のとおりです:

var myAudio = $(" #myAudio audio ")[0];
var $sourceList = $("#myAudio source");
var currentSrcIndex = 0;
var currentSr = "";

コードをコピーします

コードは次のとおりです:

$(".btn_play" ).click (function(){
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
} );
$(".btn_next").click(function(){
currentSrcIndex > $sourceList.length - 1 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source" ).eq (currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
$(".btn_previous").click (function( ){
--currentSrcIndex currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});

上記のボタンクリックイベントモニタリングでは、元の audio 要素の play() メソッドとpause() メソッドを呼び出して、オーディオの再生と一時停止を制御します。さらに、audio 要素は、現在再生中のファイルのファイルソースを表す currentSrc 属性を提供します。この属性を設定することで、現在再生中のソングトラックを制御します。

音量調節

次に、音量バーの両側にある 2 つの小さなスピーカーにイベントモニタリングを追加して、左右の 2 つの小さなスピーカーをクリックすると、現在の再生音量を増減できるようにします。プレーヤーの音量を設定するには、audio 要素で提供される volume 属性を呼び出すことができます。音量の最大値は 1 で、最小値は 0 です。ここでは、スピーカーをクリックするたびに音量を 0.1 ずつ増減して音量を制御します。もちろん、他の値を使用することもできます。ただし、JavaScript 言語では小数点以下を正確に制御できないことに注意してください。そのため、音量が 0.1 ずつ減少するたびに、実際に減少する音量は 0.1 よりわずかに大きくなり、音量減少ボタンを 9 回クリックすると 0.09 が残ります。 xxxx のボリュームを連続して再生すると、プレーヤーをミュートできない理由がわかります。。。もちろん、この問題は簡単に修正できます (以下を参照)。ちょっと思い出してください。

コードをコピーします

コードは次のとおりです。

$(".volume_control .減少") .click(function() {
var volume = myAudio.volume - 0.1;
volume myAudio.changeVolumeTo(volume);
} );
$(".volume_control .increase").click(function() {
var volume = myAudio.volume 0.1;
volume > 1 && (volume = 1);
myAudio .changeVolumeTo( volume);
});

さらに、スライダーを使用するか、音量バーの特定の位置をクリックして音量を制御する機能も実装する必要があります。上記の基礎があれば簡単に完成します。まず、ボリュームバーの特定の位置をクリックしてボリュームを制御する機能を見てみましょう。ボリュームバーの特定の位置をクリックし、ボリュームバーの開始点からその位置までの長さの値を計算します。この値をボリュームバーの全長で割ります (ここでは 100)。パーセンテージ値を取得し、そのパーセンテージ値に最大ボリューム値 1 を乗算して、ジャンプ先のボリューム値を取得し、それを割り当てます。音量。スライダーを使用して音量を制御する方法もこれに似ています。主なことは、音量バー上のスライダーの位置の値を計算する方法を知ることです。ここでは詳しく説明しませんが、ご質問がございましたら、以下にメッセージを残してください。

コードをコピーします

コードは次のとおりです:

$(".volume_control .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var volume = (posX - targetLeft)/100;
volume > 1 && (volume = 1);
volume myAudio.changeVolumeTo(volume );
});
$(".volume_control .slider").mousedown(starDrag = function(ev) {
ev.preventDefault();
var origLeft = $(this). Position().left; /*スライダーの初期位置*/
var origX = ev.clientX; /*マウスの初期位置*/
var target = this;
var progress_bar = $(". volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX; /*計算Mouse の移動距離*/
var curLeft = origLeft moveX /*マウスの移動距離をスライダーの移動距離として使用します*/
(curLeft (curLeft > 93) && (curLeft = 93);
target.style.left = curLeft "px";
progress_bar.style.width = curLeft 7 "%";
myAudio .changeVolumeTo(( curLeft 7)/100);
});
$(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$ (document).unbind("mouseup",stopDrag);
});
});

時間制御

これで、プレーヤーは基本的に動作するようになりましたが、オーディオの一部を特定の時点に直接スキップできるようにしたいと考えています。では、どうすればそれを達成できるのでしょうか? ? ！標準を策定する委員会のメンバーもバカではないので、このような一般的に使用される関数を省略することはできません。すぐに API を参照すると、audio 要素に、非常に簡潔でわかりやすい名前が付けられていることがわかります。 (実際、ほとんどの属性は簡単に理解できます)。この属性を設定すると、現在の再生時点を設定できます。

ここでは、オーディオの別の属性である継続時間も使用する必要があります。これは、現在再生中のファイルの合計時間の長さを指します。したがって、ボリューム制御の実装に応じて、次のようにすることができます:

1. プログレスバーの特定の位置をクリックし、プログレスバーの始点からその位置までの長さの、プログレスバーの全長に対するパーセンテージ値を計算します (たとえば、中央の位置をクリックします)プログレスバーの開始点からその位置までの長さは、プログレスバーの合計の長さの 50% を占めます) となり、パーセンテージとして記録されます。

2. 次に、ファイルの合計期間にパーセンテージを乗算して、ジャンプ先の時点の値を取得し、その値を currentTime に代入して、実装する関数を完成させます。

コードをコピーします

コードは次のとおりです。

$(".time_line . base_bar") .mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
varpercent = (posX - targetLeft)/ 140 * 100 ;
myAudio.currentTime = myAudio.duration *percentage / 100;
});

この時点で、プレーヤーは基本的に形を整えています。重要ではない UI インタラクションの実装がいくつか残っています (実際、それらが私にとって最も重要です、笑)。興味がある場合は、ソースコードを確認してください。質問がある場合は、以下にコメントを残すことができます。私たちがコミュニケーションをとり、もっと学ぶことができれば幸いです。