html5 音楽プレーヤーでのオーディオ タグの使用の概要_html5 チュートリアル スキル

コードをコピーします

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

HTMLVideoElement および HTMLAudioElement オブジェクトを取得します

コードをコピーしますコードは次のとおりです:

//オーディオは new
Media = newAudio("http://www.abc.com/test.mp3");
//オーディオとビデオの両方
Media = document.getElementById("media");

メディアのメソッドとプロパティ:
HTMLVideoElement と HTMLAudioElement は両方とも HTMLMediaElement

から継承します。

コードをコピーしますコードは次のとおりです:

//エラーステータス
Media.error / /null: 正常
Media.error.code; //1. ユーザー終了 2. ネットワーク エラー 3. デコード エラー 4. 無効な URL
// ネットワーク ステータス
Media.currentSrc;現在のリソースの
Media.src = value; //現在のリソースの URL を返すか設定します
Media.canPlayType(type); //特定の形式のリソースを再生できるかどうか
Media. networkState; //0。この要素は使用できません。 初期化 1. 通常ですが、ネットワークを使用していません。 3. リソースが見つかりません。
Media.load() // src で指定されたリソースを再読み込みします。
Media .buffered; //バッファ領域に戻ります、TimeRanges
Media.preload; //none: メタデータをプリロードしません: リソース情報をプリロードします auto:
//準備完了状態
Media.readyState; :HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //シーク中かどうか
//再生ステータス
Media.currentTime = value;値を割り当てると位置が変更される可能性があります
Media.startTime; // 通常は 0、ストリーミング メディアまたは 0 から始まらないリソースの場合は 0 ではありません
Media.duration;ストリームの長さは無限を返します
Media.paused; // 一時停止するかどうか
Media.defaultPlaybackRate = value; // デフォルトの再生速度を設定できます
Media.playbackRate = value; // 現在の再生速度を変更します設定直後
Media.played; //再生済みの領域 TimeRanges に戻ります。このオブジェクトについては以下を参照してください。
Media.seekable; //シーク可能な領域 TimeRanges を返します。 /終了するかどうか
Media.autoPlay; //自動再生するかどうか
Media.loop ; //再生するかどうか
Media.play(); //Play
Media.pause() ; //一時停止
//コントロール
Media.controls;//デフォルトのコントロールバーがあるかどうか
Media.volume = value; //ボリューム
Media.muted = value;
//TimeRanges (エリア) object
TimeRanges.length; //エリアセグメントの数
TimeRanges.start(index) //インデックスセクションの開始位置 area
TimeRanges.end(index) ) //インデックスセクション領域の終了位置
Event:
eventTester = function(e){
Media .addEventListener(e,function(){
console.log((newDate() ).getTime(),e);
}
eventTester("loadstart") / /クライアントはデータのリクエストを開始します
eventTester("progress");データを要求しています
eventTester("suspend"); //遅延ダウンロード
eventTester("abort"); //クライアントはダウンロードを積極的に終了します (エラーのためではありません)、
eventTester(" error"); //データのリクエスト時にエラーが発生しました
eventTester("stalled"); //ネットワーク速度が停止しました
eventTester(" play"); //play() と autoplay の再生開始時にトリガーされます
eventTester("pause"); //pause() によってトリガーされました
eventTester("loadedmetadata") //リソース長の取得に成功しました
eventTester("loadeddata"); "waiting"); //データを待機中ですが、エラーではありません
eventTester("playing") //再生を開始します
eventTester("canplay"); //再生可能ですが、次の理由により一時停止される可能性があります。 reading
eventTester("canplaythrough"); //再生可能、すべての曲がロードされました
eventTester("seeking"); //検索中
eventTester( "seeked"); 🎜>eventTester("timeupdate"); // 再生時間が変更されました
eventTester("ended"); // 再生が終了しました
eventTester("ratechange") // 再生レートの変更
eventTester("durationchange") "); //リソース長変更
eventTester("volumechange"); //ボリューム変更


自己書の一段js：

复制代码

代码如下:

$(function() {
var p = new Player();
p.read("play");
$("#stop").click(function() {
p .pause();
});
$("#start").click(function() {
p.play();
}); show").click(function() {
alert(p.duration());
});
setInterval(function() {
$("#currentTime").text( p.currentTime());
},1000);
関数 Player() {};
Player.prototype = {
box : new Object(),
read : function(id) {
this.box = document.getElementById(id);
},
play : function() {
this.box.play();
},
一時停止 : function() {
this.box.pause();
},
src:function(url){
this.box.src=url;
},
currentTime:function(){
return (this.box.currentTime/60).toFixed(2);
}
};
Player.prototype.duration=function(){
return (this.box.duration/60).toFixed(2);
};