Comentario: Este artículo le dará una descripción detallada del uso de la etiqueta de audio del reproductor de música HTML5. Los amigos que les gusta HTML5 pueden referirse a él. Espero que te sea útil.
<audio> propiedades de la etiqueta: src: music urlpreload: precipitación de preload: bucle automático: controles de bucle: barra de control propia del navegador
<audioid = "Media" src = "http://www.abc.com/test.mp3" Controles> </audio>
<Dídide> Propiedades de la etiqueta: SRC: URL de Video Poster: Video Cover, imagen que se muestra cuando no hay reproducción precarga: precarga Autoplay: Autoplay Loop: CONTROLES DE LA BOCA: Ancho de la barra de control del navegador: Altura de video: Video Altura: Video
<videoid = "Media" src = "http://www.abc.com/test.mp4" controlsheigt = "400px"> </video>
Objetos HTMLVideoElement y Htmlaudioelement
// El audio puede crear objetos directamente a través de nuevos
Medios = newaudio ("http://www.abc.com/test.mp3");
// Tanto el audio como el video pueden obtener objetos a través de etiquetas
Medios = document.getElementById ("medios");
Métodos y propiedades de medios:
Htmlvideoelement y htmlaudioelement se heredan de htmlmediaelement
// Estado de error
Media.Error; // nulo: normal
Media.error.code; // 1. Terminación del usuario 2. Error de red 3. Error de decodificación 4. URL Inválida
// estado de red
Media.CurrentSrc; // devuelve la URL del recurso actual
Media.src = valor; // devolver o establecer la URL del recurso actual
Media.CanPlayType (tipo); // ¿puede jugar un recurso de cierto formato?
Media.networkState; // 0. Este elemento no se inicializa 1. Normal pero no usa la red 2. Los datos se descargan 3. Recurso no se encuentra
Media.load (); // Recargar el recurso especificado por SRC
Media. Buffed; // Regreso al área buffered, Timeranges
Media.preload; // Ninguno: Not Metadatos de precarga: Información de recursos de precarga Auto:
// Estado listo
Media.ReadyState; // 1: have_nothing 2: have_metadata 3.have_current_data 4.have_future_data 5.have_enough_data
Medios de comunicación; // ¿Está buscando?
// estado de reproducción
Media.CurrentTime = Value; // La posición de reproducción actual, la asignación puede cambiar la posición
Media.Starttime; // Generalmente 0, si se trata de un medio de transmisión o un recurso que no comienza desde 0, no es 0.
Duración de medios; // El flujo de longitud de recursos actual devuelve infinito
Medios. // si hacer una pausa
Media.DefaultPlayBackRate = Value; // Velocidad de reproducción predeterminada, se puede configurar
Media.playbackRate = value; // La velocidad de reproducción actual se cambiará inmediatamente después de configurar
Medios de comunicación; // Vuelve al área jugable, Timeranges, ver a continuación para este objeto
Medios. Seekable; // Regreso al área donde puede buscar temporizadores de tiempo
Medios.Edent; // termina
Media.auToplay; // ¿Se reproduce automáticamente?
Media.loop; // si jugar bucle
Media.play (); //Jugar
Media.Pause (); //Pausa
//control
Media.controls; // ¿Existe una barra de control predeterminada?
Media.volume = valor; //Volumen
Media.MUTE = VALOR; //Silenciar
// objeto Timeranges (región)
Timeranges.length; // Número de segmentos de área
Timeranges.Start (índice) // La posición de inicio del área de la sección de índice
Timeranges.end (índice) // La posición final del área de la sección de índice
evento:
eventTester = function (e) {
Media.adDeventListener (e, function () {
console.log ((newdate ()). getTime (), e);
});
}
EventTester ("LoadStart"); // El cliente comienza a solicitar datos
eventtester ("progreso"); // El cliente solicita datos
eventtester ("suspender"); // Descarga retrasada
eventtester ("abort"); // El cliente termina activamente la descarga (no causada por un error),
eventtester ("error"); // se encontró un error al solicitar datos
eventtester ("estancado"); // Detener la velocidad de la red
EventTester ("Play"); // activado cuando play () y la autoplay comienzan a reproducir
eventtester ("pausa"); // pausa () dispara
EventTester ("LoadedMetadata"); // Obtener con éxito la longitud de los recursos
EventTester ("LoadedData"); //
eventtester ("esperando"); // Esperando datos, no un error
eventtester ("jugando"); // Comienza la reproducción
EventTester ("CanPlay"); // puede jugar, pero puede detenerse debido a la carga en el medio
eventtester ("canplaythrough"); // se puede reproducir, todas las canciones están cargadas
eventtester ("buscar"); //Búsqueda
eventtester ("buscado"); // Búsqueda completada
EventTester ("TimeUpdate"); // Cambios de tiempo de reproducción
eventtester ("finalizado"); // La reproducción termina
EventTester ("Ratechange"); // La tasa de reproducción cambia
EventTester ("DurationChange"); // Cambios de longitud de recursos
EventTester ("Volumechange"); // Cambio de volumen
Un párrafo de JS escrito por mí mismo:
$ (function () {
var p = nuevo jugador ();
P.Read ("Play");
$ ("#stop"). Click (function () {
p.pause ();
});
$ ("#start"). Click (function () {
p.play ();
});
$ ("#show"). Click (function () {
alerta (P.Duration ());
});
setInterval (function () {
$ ("#CurrentTime"). Text (p.CurrentTime ());
}, 1000);
});
function Player () {};
Player.prototype = {
Box: nuevo objeto (),
Leer: function (id) {
this.box = document.getElementById (id);
},
Play: function () {
this.box.play ();
},
pausa: function () {
this.box.Pause ();
},
src: function (url) {
this.box.src = url;
},
CurrentTime: functer () {
return (this.box.CurrentTime/60) .tofixed (2);
}
};
Jugador.prototype.duration = function () {
return (this.box.duration/60) .tofixed (2);
};