Mestre marcação html5 áudio
Simplificando, há dois elementos de mídia primárias para HTML5, sendo que ambos são absurdamente fácil de usar. O elemento audio é nomeado , e o elemento de vídeo é chamado . Em HTML5, o navegador determina quais 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 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, assim como um URL, identifica onde o navegador deve procurar o arquivo de áudio.
o controles entrada está em para uma série de atributos de controle que você pode usar para gerenciar a reprodução de áudio e comportamento, como 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 ao início e continuar a jogar quando se chega ao fim do arquivo objeto. Aqui, também, o único valor legal para esse atributo é laço, e nenhum valor é estritamente necessário.
pré-carga: Diz o navegador se deve pré-carregar o arquivo objeto, e se assim como deve ser pré-carregado. Os valores possíveis incluem
Video: HTML5 video accessibility and the WebVTT file format - Audio Described
Nenhum: Não carregar qualquer parte do arquivo de áudio quando a página é carregada
Video: 105 HTML5 Controlando o som no elemento audio
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
Video: HTML5
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 do etiquetas apenas 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 tais 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 abertura tag, o alvo para o primeiro
Se os jogadores para os três formatos não estão disponíveis, nenhum som será tocado 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 jogador 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 se parece na tela no Chrome.
