Présentation de l'utilisation des balises audio dans les compétences du didacticiel html5 music player_html5

Copier le code

Le code est le suivant :

Obtenir les objets HTMLVideoElement et HTMLAudioElement

Copier le codeLe code est le suivant :

//L'audio peut créer des objets directement via new
Media = newAudio("http://www.abc.com/test.mp3");
//L'audio et la vidéo L'objet peut être obtenu via la balise
Media = document.getElementById("media");

Méthodes et propriétés Media :
HTMLVideoElement et HTMLAudioElement héritent tous deux de HTMLMediaElement

Copier le codeLe code est le suivant :

//Statut d'erreur
Media.error / /null : normal
Media.error.code; //1. Terminaison de l'utilisateur 2. Erreur réseau 3. Erreur de décodage 4. URL invalide
//État du réseau
Media.currentSrc //Renvoie l'URL. de la ressource actuelle
Media.src = value; //Renvoie ou définit l'URL de la ressource actuelle
Media.canPlayType(type); //Si les ressources dans un certain format peuvent être lues
Media. networkState; //0. Cet élément n'est pas disponible Initialisation 1. Normal mais n'utilise pas le réseau 2. Téléchargement de données 3. Aucune ressource trouvée
Media.load(); //Recharge la ressource spécifiée par src
Media. .buffered; //Retour à la zone tampon, TimeRanges
Media.preload; //aucun : Ne pas précharger les métadonnées : Précharger les informations sur la ressource automatiquement :
//Ready state
Media.readyState //1; :HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //S'il recherche
//Statut de lecture
Media.currentTime = valeur //La position de lecture actuelle, l'attribution d'une valeur peut changer la position
Media.startTime; / / Généralement 0, s'il s'agit d'un streaming multimédia ou d'une ressource qui ne démarre pas à 0, ce n'est pas 0
Media.duration //La ressource actuelle; la longueur du flux renvoie une valeur infinie
Media.paused; // Faut-il mettre en pause
Media.defaultPlaybackRate = value; //Vitesse de lecture par défaut, vous pouvez définir
Media.playbackRate = value //Vitesse de lecture actuelle, modification immédiatement après le réglage
Media.played; //Retourne à la zone qui a été lue, TimeRanges , voir ci-dessous pour cet objet
Media.seekable; //Retourne la zone recherchée TimeRanges
Media.ended / /S'il faut terminer
Media.autoPlay; //S'il faut lire automatiquement
Media.loop ; //S'il faut lire en boucle
Media.play( //Play
Media.pause()); ; //Pause
//Control
Media.controls;//S'il existe une barre de contrôle par défaut
Media.volume = value; //Volume
Media.muted = value;
//Objet TimeRanges (area)
TimeRanges.length; //Nombre de segments de zone
TimeRanges start(index) //La position de départ de la zone de section d'index
TimeRanges.end(index ) //La position finale de la zone de section d'index
Event :
eventTester = function(e){
Media .addEventListener(e,function(){
console.log((newDate() .getTime(),e);
});
}
eventTester("loadstart"); / /Le client commence à demander des données
eventTester("progress"); demande des données
eventTester("suspend"); //Téléchargement retardé
eventTester("abort"); //Client Le client met activement fin au téléchargement (pas à cause d'une erreur),
eventTester(" error"); //Une erreur s'est produite lors de la demande de données
eventTester("stalled"); //La vitesse du réseau a calé
eventTester(" play"); //Déclenché lorsque play() et la lecture automatique commencent à jouer
eventTester("pause"); //Déclenché par pause()
eventTester("loadedmetadata"); //Longueur de la ressource obtenue avec succès
eventTester("loadeddata"); "waiting"); //En attente de données, pas d'erreur
eventTester("playing"); //Démarrer la lecture
eventTester("canplay"); chargement
eventTester("canplaythrough"); //Peut être joué, toutes les chansons ont été chargées
eventTester("seeking"); //Recherche
eventTester( "seeked" //Recherche terminée
eventTester("timeupdate"); //Durée de lecture modifiée
eventTester("ended"); //Lecture terminée
eventTester("ratechange"); // Modification du taux de lecture
eventTester("durationchange) "); //Changement de longueur de ressource
eventTester("volumechange"); //Changement de volume


自己写的一段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);
} ;