Comentário: Este artigo fornecerá uma visão geral detalhada do uso da tag de áudio do HTML5 Music Player. Amigos que como HTML5 podem se referir a ele. Espero que seja útil para você.
<udio> Tag Properties: SRC: Music URLPRELOAD: AutoPlay de pré -carga: Loop de loop de loop: barra de controle do navegador: barra de controle do navegador
<AUDIOID = "Media" src = "http://www.abc.com/test.mp3" Controls> </audio>
<Tima> Tag Propriedades: SRC: URL do vídeo Poster: Capa de vídeo, imagem exibida quando não há pré -carga de reprodução: AutoPlay de pré -carga: Loop AutoPlay: Loop Controls: Barra de controle do navegador Largura da barra de controle: Altura da largura do vídeo: altura do vídeo Altura de vídeo
<Videoid = "Media" src = "http://www.abc.com/test.mp4" controlsheigt = "400px"> </video>
Obtenha objetos htmlvideoElement e htmlaudioElement
// áudio pode criar objetos diretamente através de novos
Media = newaudio ("http://www.abc.com/test.mp3");
// Tanto o áudio quanto o vídeo podem obter objetos através de tags
Mídia = document.getElementById ("mídia");
Métodos e propriedades de mídia:
HtmlvideoElement e htmlaudioElement são herdados da htmlmediaelement
// Status do erro
Media.error; // NULL: Normal
Media.error.code; // 1. Terminação do usuário 2. Erro de rede 3. Erro de decodificação 4. URL inválido
// status da rede
Media.CurrentsRC; // retorna o URL do recurso atual
Media.src = value; // retorna ou defina o URL do recurso atual
Media.CanplayType (Type); // pode reproduzir um recurso de um determinado formato
Media.networkstate; // 0. Este elemento não é inicializado 1. Normal, mas não usando a rede 2. Os dados estão sendo baixados 3. Recurso não encontrado
Media.load (); // Recarregue o recurso especificado por SRC
Media.Bufred; // retorna à área tamponada, timerange
Media.preload; // NENHUM: Não é pré -carregar metadados: Pré -carga Informações sobre recursos Auto:
// status pronto
Media.ReadyState; // 1: tem_nothing 2: Have_metadata 3.Have_Current_Data 4.Have_Future_Data 5.Have_enough_Data
Media.seking; // está procurando
// status de repetição
Media.CurrentTime = Value; // A posição de reprodução atual, a atribuição pode alterar a posição
Media.startTime; // geralmente 0, se for uma mídia de streaming ou um recurso que não começa a partir de 0, não é 0.
Media.Duration; // O fluxo de comprimento de recurso atual retorna infinito
Media.Paused; // seja para uma pausa
Media.DefaultPlaybackRate = Value; // Velocidade de reprodução padrão, pode ser definido
Media.PlaybackRate = Value; // A velocidade de reprodução atual será alterada imediatamente após a configuração
Media.Played; // retorna à área jogável, timeranges, veja abaixo este objeto
Media.seekable; // Volte para a área onde você pode procurar tíferas
Mídia.end; // é terminado
Media.autoPlay; // é reproduzido automaticamente
Media.loop; // se deve jogar loop
Media.Play (); //Jogar
Media.Pause (); //Pausa
//controlar
Media.Controls; // Existe uma barra de controle padrão
Media.Volume = Value; //Volume
Media.Muted = Value; //Mudo
// objeto TimeRanges (região)
TimeRanges.Length; // Número de segmentos de área
TimeRanges.start (índice) // A posição inicial da área de seção de índice
TimeRanges.end (índice) // A posição final da área de seção de índice
evento:
EventTester = function (e) {
Media.addeventListener (e, function () {
console.log ((newDate ()). gettime (), e);
});
}
EventTester ("loadstart"); // O cliente começa a solicitar dados
EventTester ("Progresso"); // O cliente está solicitando dados
EventTester ("Suspender"); // download atrasado
EventTester ("aborto"); // O cliente encerra ativamente o download (não causado por um erro),
EventTester ("Erro"); // foi encontrado um erro ao solicitar dados
EventTerster ("paralisado"); // Pare a velocidade da rede
EventTester ("Play"); // desencadeado quando o play () e o AutoPlay começam a jogar
EventTester ("Pausa"); // pausa () gatilhos
EventTester ("LoadEdMetadata"); // obtenha com sucesso o comprimento do recurso
EventTester ("LoadEdData"); //
EventTester ("Waiting"); // esperando por dados, não um erro
EventTerster ("tocando"); // Inicie a reprodução
EventTester ("Canplay"); // pode tocar, mas pode ser pausado devido ao carregamento no meio
EventTester ("CanPlaythrough"); // pode ser reproduzido, todas as músicas são carregadas
EventTester ("Buscando"); // pesquisando
EventTester ("procurado"); // Pesquisa concluída
EventTester ("TimeUpdate"); // mudanças no tempo de reprodução
EventTester ("Ended"); // A reprodução termina
EventTester ("Ratechange"); // A taxa de reprodução muda
EventTester ("DurationChange"); // alterações de comprimento de recurso
EventTester ("Volumechange"); // alteração de volume
Um parágrafo de JS escrito por mim mesmo:
$ (function () {
var p = new player ();
P.Read ("Play");
$ ("#STOP"). Clique (function () {
p.Pausa ();
});
$ ("#start"). clique (function () {
p.Play ();
});
$ ("#show"). Clique (function () {
alerta (p.Duration ());
});
setInterval (function () {
$ ("#currentTime"). Texto (p.currenttime ());
}, 1000);
});
função player () {};
Player.prototype = {
Caixa: novo objeto (),
Leia: 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: function () {
return (this.box.currenttime/60) .tofixado (2);
}
};
Player.prototype.Duration = function () {
return (this.box.duration/60) .tofixado (2);
};