Gambaran keseluruhan penggunaan tag audio dalam html5 music player_html5 kemahiran tutorial

Salin kod

Kod adalah seperti berikut:

Dapatkan objek HTMLVideoElement dan HTMLAudioElement

Salin kodKodnya adalah seperti berikut:

//Audio boleh mencipta objek secara terus melalui baharu
Media = newAudio("http://www.abc.com/test.mp3"); boleh diperolehi melalui tag
Media = document.getElementById("media");


Kaedah dan sifat media:

HTMLVideoElement dan HTMLAudioElement kedua-duanya diwarisi daripada HTMLMediaElement

Salin kodKod adalah seperti berikut:

//Status ralat

Media.error; /null: normal
Media.error.code; //1. Penamatan pengguna 2. Ralat rangkaian 3. Ralat penyahkodan 4. URL tidak sah
//Status rangkaian
Media.currentSrc; daripada sumber semasa
Media.src = nilai; //Kembalikan atau tetapkan URL sumber semasa
Media.canPlayType(type); //Sama ada sumber dalam format tertentu boleh dimainkan
Media. networkState; //0. Elemen ini tidak tersedia Permulaan 1. Biasa tetapi tidak menggunakan rangkaian 2. Memuat turun data 3. Tiada sumber ditemui
Media.load(); //Muat semula sumber yang ditentukan oleh src
Media .buffered; //Kembali ke kawasan buffer, TimeRanges
Media.preload; //tiada: Jangan pramuat metadata: Pramuat maklumat sumber secara automatik:
//Keadaan sedia
Media.readyState; :TIADA_TIADA 2:PUNYA_METADATA 3.DATA_SEMASA 4.DATA_MASAPAN 5.CUKUP_DATA
Media.mencari; //Sama ada mencari
//Status main balik
Media semasa;. memberikan nilai boleh menukar kedudukan
Media.startTime; / / Secara amnya 0, jika ia adalah media penstriman atau sumber yang tidak bermula dari 0, ia bukan 0
Media.duration; aliran panjang mengembalikan tak terhingga
Media.pased; // Sama ada untuk menjeda
Media.defaultPlaybackRate = nilai; //Kelajuan main balik lalai, anda boleh menetapkan
Media.playbackRate = nilai; serta-merta selepas menetapkan
Media.played; //Kembali ke kawasan yang telah dimainkan, TimeRanges , lihat di bawah untuk objek ini
Media.seekable; //Kembali kawasan yang boleh dicari TimeRanges
Media.ended; /Sama ada untuk menamatkan
Media.autoPlay; //Sama ada untuk memainkan secara automatik
Media.loop ; //Sama ada untuk memutarkan
Media.play(); //Play
Media.pause() ; //Jeda
//Kawalan
Media.controls;//Sama ada bar kawalan lalai
Media.volume = nilai; //Volume
Media.muted = nilai;
//Objek TimeRanges (luas)
TimeRanges.length; //Bilangan segmen kawasan
TimeRanges(indeks) //Kedudukan permulaan kawasan bahagian indeks
TimeRanges.end(index ) //Kedudukan akhir kawasan bahagian indeks
Acara:
eventTester = function(e){
Media .addEventListener(e,function(){
console.log((newDate() ).getTime(),e);
});
eventTester("loadstart"); sedang meminta data
eventTester("suspend"); //Delayed download
eventTester("abort"); //Client Pelanggan secara aktif menamatkan muat turun (bukan disebabkan oleh ralat),
eventTester(" ralat"); //Ralat ditemui semasa meminta data
eventTester("terhenti"); //Kelajuan rangkaian terhenti
eventTester("play"); //Dicetuskan apabila play() dan autoplay mula dimainkan
eventTester("pause"); //Dicetuskan oleh pause()
eventTester("loadedmetadata"); //Berjaya memperoleh panjang sumber
eventTester("loadeddata"); "menunggu"); //Menunggu data, bukan ralat
eventTester("playing"); //Mulakan main balik
eventTester("canplay"); loading
eventTester("canplaythrough"); //Boleh dimainkan, semua lagu telah dimuatkan
eventTester("seeking"); //Searching
eventTester( "seeked"); 🎜> EventTester ("TimeUpdate"); "); //Perubahan panjang sumber
eventTester("volumechange"); //Volume change


自己写的一段js：

复制代码

代码如下:>

🎜 $(function() {

var p = new Player();
p.read("play");
$("#stop").klik(function() {
p .pause();
});
$("#start").klik(function() {
p.play();
$("# tunjukkan").klik(fungsi() {
alert(p.duration());
});
setInterval(function() {
$("#currentTime").text( p.currentTime());
},1000;
fungsi Player() {};
Player.prototype = {
box : new Object(),
read : function(id) {
this.box = document.getElementById(id);
},
mainkan : function() {
this.box.play();
},
jeda : 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);
};