Überblick über die Verwendung von Audio-Tags im HTML5-Musikplayer_HTML5-Tutorial-Fähigkeiten

Code kopieren

Der Code lautet wie folgt:

HTMLVideoElement- und HTMLAudioElement-Objekte abrufen

Code kopierenDer Code lautet wie folgt:

//Audio kann Objekte direkt über new erstellen
Media = newAudio("http://www.abc.com/test.mp3");
//Sowohl Audio als auch Video Das Objekt kann über das Tag
Media = document.getElementById("media");

Medienmethoden und -eigenschaften abgerufen werden:
HTMLVideoElement und HTMLAudioElement erben beide von HTMLMediaElement

Code kopierenDer Code lautet wie folgt:

//Fehlerstatus
Media.error / /null: normal
Media.error.code; //1. Benutzerbeendigung 2. Netzwerkfehler 3. Dekodierungsfehler 4. Ungültige URL
//Netzwerkstatus
Media.currentSrc; der aktuellen Ressource
Media.src = value; //Die URL der aktuellen Ressource zurückgeben oder festlegen
Media.canPlayType(type); //Ob Ressourcen in einem bestimmten Format abgespielt werden können
Medien. networkState; //0. Dieses Element ist nicht verfügbar. Initialisierung 1. Normal, aber das Netzwerk wird nicht verwendet. 3. Keine Ressource gefunden.
Media.load(//Die von src angegebene Ressource neu laden .buffered; //Zurück zum gepufferten Bereich, TimeRanges
Media.preload; //none: Metadaten nicht vorladen: Ressourceninformationen automatisch vorladen:
//Ready state
Media.readyState; :HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //Ob gesucht wird
//Wiedergabestatus
Media.currentTime = value; Durch Zuweisen eines Werts kann sich die Position ändern
Media.startTime; / / Im Allgemeinen 0, wenn es sich um Streaming-Medien oder eine Ressource handelt, die nicht bei 0 beginnt, ist es nicht 0
Media.duration; //Die aktuelle Ressource Länge Stream gibt unendlich zurück
Media.paused; // Ob angehalten werden soll
Media.defaultPlaybackRate = value; //Standard-Wiedergabegeschwindigkeit, Sie können festlegen
Media.playbackRate = value; //Aktuelle Wiedergabegeschwindigkeit, ändern unmittelbar nach der Einstellung
Media.played; //Zurück zum Bereich, der abgespielt wurde, TimeRanges, siehe unten für dieses Objekt
Media.seekable; //Zurückgeben des durchsuchbaren Bereichs TimeRanges; /Ob
Media.autoPlay beendet werden soll; //Ob die automatische Wiedergabe erfolgen soll
Media.play( //Play
Media.pause()); ; //Pause
//Control
Media.controls;//Ob es eine Standardkontrollleiste gibt
Media.volume = value; //Volume
Media.muted = value;
//TimeRanges (area) object
TimeRanges.length; //Anzahl der Bereichssegmente
TimeRanges start(index) //Die Startposition des Indexabschnittsbereichs
TimeRanges.end(index ) //Die Endposition des Indexabschnittsbereichs
Event:
eventTester = function(e){
Media .addEventListener(e,function(){
console.log((newDate() ).getTime(),e);
}
eventTester("loadstart"); / /Der Client beginnt mit der Anforderung von Daten
eventTester("progress"); fordert Daten an
eventTester("suspend"); //Verzögerter Download
eventTester("abort"); //Client Der Client bricht den Download aktiv ab (nicht aufgrund eines Fehlers),
eventTester(" error"); //Beim Anfordern von Daten ist ein Fehler aufgetreten
eventTester("stalled"); //Die Netzwerkgeschwindigkeit ist ins Stocken geraten
eventTester(" play"); //Wird ausgelöst, wenn play() und Autoplay mit der Wiedergabe beginnen
eventTester("pause"); //Ausgelöst durch pause()
eventTester("loadedmetadata"); //Erfolgreich erhaltene Ressourcenlänge
eventTester("loadeddata"); "waiting"); //Warten auf Daten, kein Fehler
eventTester("playing"); //Wiedergabe starten
eventTester("canplay"); //Kann abgespielt werden, kann aber aufgrund von Loading
eventTester("canplaythrough"); //Kann abgespielt werden, alle Songs wurden geladen
eventTester("seeking"); //Suche läuft
eventTester( "seeked"); //Suche abgeschlossen
eventTester("timeupdate"); //Wiedergabezeit geändert
eventTester("ended"); //Wiedergabe beendet
eventTester("ratechange"); //Wiedergaberate geändert
eventTester("durationchange "); //Änderung der Ressourcenlänge
eventTester("volumechange"); //Volumenänderung


自己写的一段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);
});
function Player() {};
Player.prototype = {
box : new Object(),
read : function(id) {
this.box = document.getElementById(id);
},
play : function() {
this.box.play();
},
pause : 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);
};