Invista em você! Saiba como a DevMedia pode ajudar sua carreira.
HTML5 Audio Player - Dica
Veja nessa dica como criar e inserir um player de áudio com html5 em seu website/sistema web.
Confira nosso ebook gratuito
Artigos
HTML e CSS
HTML5 Audio Player - Dica
Assim como funciona com vídeos, a nova versão do html, o html5 permite que os usuários insiram arquivos de áudio para serem reproduzidos diretamente no browser, sem o uso de nenhum plugin ou hack, apenas usando a nova tag
.
A sua sintaxe é bem simples e é necessário apenas saber o caminho dentro do sistema local/ftp ou a url do arquivo de áudio específico, veja um exemplo de uso na Listagem 1.
Listagem 1: Usando a tag Audio no HTML5
Tag Audio HTML5
Quando usamos a palavra “controls” dentro da tag áudio, o navegador do usuário insere os controles de áudio, como o botão play, pause e volume. Inserimos também, dentro da tag, um texto para se caso o navegador do usuário não suportar a tag, irá aparecer essa mensagem para ele, dizendo que o browser dele não suporta.
Abaixo segue uma tabela de compatibilidade dos navegadores com os tipos de arquivos de áudio suportados por eles.
Browser MP3 Wav Ogg
Internet Explorer 9+ SIM NÃO NÃO
Chrome 6+ SIM SIM SIM
Firefox 3.6+ NÃO SIM SIM
Safari 5+ SIM SIM NÃO
Opera 10+ NÃO SIM SIM
O mime-type para cada tipo de arquivo de áudio é:
audio/mpeg
audio/ogg
audio/wav
Existem também outras formas de incrementar ainda mais o seu arquivo de áudio, é possível usar atributos como:
controls
autoplay
loop
Seu uso fica da seguinte forma:
Listagem 2: Adicionando atributos
Tag Audio HTML5
Em casos de o arquivo de áudio ser um arquivo muito grande, é importante que ele seja pré-carregado, dessa forma quando o usuário clicar no “Play” a exibição do arquivo será muito mais rápida, para isso existe o atributo preload, esse atributo possui 3 valores:
none: não carrega o arquivo
auto: carrega o arquivo
metadata: carrega os meta dados do arquivo
Listagem 3: Usando o atributo preload
Tag Audio HTML5
Esses foram alguns exemplos de uso da tag áudio em html5, espero que tenha ficado claro e que todos tenham entendido o funcionamento dessa nova tag.
Até a próxima.
Veja também
HTML5 - As tags AUDIO e VIDEO
Vídeo e áudio - Novidades do HTML 5 - Parte 3
Confira outros conteúdos:
CSS Border
CSS Border
HTML Icons: utilizando ícones em páginas HTML
HTML Icons: utilizando ícones em...
autor
Por Ricardo
Em 2013
Fonte da notícia Cumbica e Região #Agora - Policial de folga intervém em assalto e M4t4 suspeito no Trevo de Bonsucesso Foto Cumbica e Re...
Ouça a rádio timblesom tocando as músicas que você gosta de ouvir na https://newwave.com.ua/en/station/rdio-timblesom-guarulhos-69681 É co...
Nenhum comentário:
Postar um comentário