Dominar HTML5 áudio Markup
Dito de forma simples, existem dois elementos principais meios para HTML5, ambos os quais são absurdamente fácil de usar. O elemento de áudio é chamado, e o elemento de vídeo é chamado. Em HTML5, o navegador determina qual os jogadores são built-in e, portanto, disponível para uso. Você precisa planejar o seu uso de áudio e vídeo em conformidade.
Aqui está uma versão simplificada do que a marcação de áudio parece:
aqui o src atribuir pontos para o arquivo de áudio que você gostaria de ter jogado de volta. Ele especifica a localização para o objeto de áudio para reprodução. O local deve ser um URI válido (Uniform Resource Identifier) que, tal como um URL, identifica onde o navegador deve procurar o arquivo de áudio.
o controlesentrada está em para uma série de atributos de controle que você pode usar para gerenciar a reprodução de áudio e comportamento, como se segue (apresentados por ordem alfabética):
reprodução automática: Diz ao navegador para iniciar a reprodução de áudio assim que o arquivo objeto é carregado. O único valor legal para esse atributo é reprodução automática, mas nenhum valor é estritamente necessário em HTML5.
controles: Diz ao navegador para exibir um widget na tela para controlar a reprodução de áudio (geralmente com pausar / reproduzir botões, uma barra de progresso e controles de volume). Tal como acontece com autoplay, o único valor legal para esse atributo é controles, mas nenhum valor é estritamente necessário em HTML5.
laço: Diz ao navegador para voltar para o início e continuar a jogar quando se chega ao final do arquivo objeto. Aqui, também, o único valor legal para esse atributo é laço, e nenhum valor é estritamente necessário.
pré-carga: Diz ao navegador se deve pré-carregar o arquivo de objeto, e se assim como ele deve ser pré-carregado. Os valores possíveis incluem
Nenhum: Não carregar qualquer parte do arquivo de áudio quando a página é carregada
metadados: Carrega apenas os metadados de áudio quando a página é carregada. Ele também configura a reprodução, mas não tem os dados carregados ainda.
auto: Carrega todo o arquivo de áudio quando a página é carregada
o pré-carga atributo é ignorado se reprodução automática é presente.
A seção Alternativas é muito interessante e bastante útil no apoio navegadores mais antigos. visitantes da página ver, ou correr, o conteúdo dentro das tags somente se o seu navegador não suporta o elemento de áudio (porque o seu navegador ignora tags que não reconhecem), mas navegadores HTML5-savvy são inteligentes o suficiente para ignorar essas direções alternativas.
Este é o lugar onde você pode chamar plug-ins para jogadores específicos e formatos de arquivos diferentes, porque você sabe que apenas os visitantes que não pode usar o built-in HTML5 capacidades de reprodução de áudio vai encontrar essa marcação.
O exemplo aqui aproveita isso para mostrar-lhe como chamar outros formatos de arquivo no caso do seu formato escolhido não podem ser reproduzidos. Como mostrado, um navegador que não tem suporte de áudio HTML5 iria exibir a palavra Alternativas na tela!
Aqui está um pouco de marcação que não irá reproduzir um .ogg arquivo de áudio até que o usuário aciona o botão Play nos controles na tela, com looping contínuo, enquanto a página permanece na tela. Ele também fornece WAV e MP3 alternativas para navegadores mais antigos:
Por padrão, se você não incluir um src atributo na tag de abertura, a meta para o primeiro elemento é jogado em um navegador que reconhece o elemento HTML5. Esta configuração faz com que seja fácil de empilhar suas opções de reprodução na seção alternativas, começando com o que você mais deseja, e assim por diante.
Se os jogadores para os três formatos não estão disponíveis, nenhum som será reproduzido em tudo. Assim que o navegador encontra um jogador para corresponder ao tipo de arquivo de som (.ogg primeiro, .wav segundo, .mp3 terceiro), o navegador usa o aparelho para reproduzir o som, e, em seguida, o navegador continua a processar o restante do documento HTML que se segue.
Esta figura mostra o que esta página dentro de um arquivo HTML devidamente construído com algum texto e informações adicionais parece na tela no Chrome.
