ホームページ > 記事 > ウェブフロントエンド > クールなオーディオ プレーヤーの作成に関する HTML5 グラフィック チュートリアル plug-in_html5 チュートリアルのスキル
クールなオーディオ プレーヤーの作成に関する HTML5 グラフィック チュートリアル plug-in_html5 チュートリアルのスキル
- WBOYオリジナル
- 2016-05-16 15:46:531678ブラウズ
上の写真は、このオーディオ プレーヤーの UI インターフェイス図で、曲のプレイリストも非表示になっています。プレーヤーの UI 全体は、背景のポートレートと曲のスター評価を除いて、CSS とフォントフェイスで描画されます。これらはすべて CSS とフォントフェイスで描画されます。唯一難しそうなのは、CD とフォントフェイスの制作です。曲内 CD とディスク プレーヤーの両方には、再生中にアニメーション化されたインタラクティブな効果があります。これについては、後のセクションで説明します。プレーヤーで CD をクリックしてプレイリストを開きます~
このチュートリアルは主に Html5 の新しい
主な機能:1. 再生、一時停止、前の曲、次の曲、音量の増減
2. CD をクリックしてプレイリストを開いたり閉じたりします
3. ローカルの音楽ファイルをプレーヤーにドラッグして再生できます
HTML 構造
オーディオタグ
上記の構造では、HTML5 の新しい audio タグが見つかります。これは、名前が示すように、プレーヤーのコントローラーです。controls 属性は、ブラウザーがオーディオの再生コントロールを提供することを指定します。 Chrome ブラウザと同様に、この属性をの下の audio タグに設定すると、コードは次のようになります:
ただし、ブラウザごとにオーディオ タグのレンダリング効果が異なるため、この単純な方法はクロスブラウザでの使用には適しておらず、ブラウザのデフォルトのプレーヤー コントロールで提供される機能は非常に限られています。 。したがって、通常はこの属性を設定しないことでブラウザのデフォルトの再生コントロールを非表示にし、追加のタグとスタイルを手動で追加してプレーヤーの 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 インタラクションの実装がいくつか残っています (実際、それらが私にとって最も重要です、笑)。興味がある場合は、ソース コードを確認してください。質問がある場合は、以下にコメントを残すことができます。私たちがコミュニケーションをとり、もっと学ぶことができれば幸いです。