Giancarlo Braga 0 Denunciar post Postado Outubro 24, 2011 Adicionando áudio à página com HTML 5 Você já precisou incluir áudio na sua página mas não sabia como, ou então desistiu pois teria que mexer em complicados arquivos de flash para conseguir isso? Pois então, há uma alternativa utilizando o HTML 5. A novidade é a tag AUDIO, que permite que você inclua música na sua página sem maiores problemas. A única real limitação é que até o momento desta publicação(24/10/2011) ainda alguns navegadores da atualidade tem problemas para fazer isso funcionar em determinados formatos de arquivos de áudio. Atualmente são suportados três principais formatos: .ogg, .wav e .mp3. A tabela abaixo, no site w3schools, nos mostra uma comparação de compatibilidade de cada formato com seu respectivo navegador. http://www.w3schools.com/html5/html5_audio.asp'>http://www.w3schools.com/html5/html5_audio.asp Por ser uma página HTML 5, devemos seguir um requisito fundamental. Você deverá incluir este comando no começo do código HTML: , isto é para que a página seja validada corretamente como HTML 5. Se na sua página já houver algum outro tipo de DOCTYPE, apenas substitua. Tome cuidado para que isso não dê conflitos com outros componentes na sua página, principalmente os que fazem uso de jQuery. O parâmetro ‘controls’ é para mostrar os controles de ‘play, pause, stop’ e controle de volume. E o parâmetro ‘preload’ permitirá carregar o áudio durante o carregamento da página. O exemplo do código vem a seguir: <audio src="musica.wav" preload="preload" controls="controls"> Seu navegador definitivamente não suporta este controle. </audio> Para os navegadores totalmente incompatíveis com HTML 5(independente do formato do aúdio – como o IE 7 ou 8), é conveniente digitar algo sinalizando a falha ou incluir uma solução alternativa(como um Flash por exemplo) entre as tags . Em todo o caso, se a incompatibilidade do seu navegador for por causa do formato do áudio e não porque é incompatível com o HTML 5, há uma maneira ótima de contornar. No exemplo mesmo estamos utilizando o formato de áudio WAV, este não funcionará no Internet Explorer de acordo com a tabela apresentada mais acima. Para isso, felizmente o controle permite a inserção de múltiplos arquivos de áudio, podendo ser um de cada. <audio preload="preload" controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> <source src="song.wav" type="audio/mpeg" /> Seu navegador definitivamente não suporta este controle. </audio> Dessa forma poderá funcionar em vários browsers(desde que este seja compatível com HTML5 – Vide tabela de compatibilidade), apenas exigindo que você faça as conversões dos formatos de áudio em .ogg, .wav e .mp3. Ressalto que eventualmente que ao invés de um texto de incompatibilidade, você poderá usar um comando Flash para que tenhamos uma redundância a qualquer navegador. Uma vez que é compatível com o Safari, é viável o funcionamento do controle de áudio em dispositivos móveis da Apple que não contam com suporte ao Flash, como iPhone e Ipad. Veja o funcionamento aqui: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all'>http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio_all Fonte de pesquisa: http://www.w3schools.com/ Post no meu blog: http://www.giancarlobraga.com/blog/?p=13 Espero que tenha sido útil. Giancarlo Braga. Compartilhar este post Link para o post Compartilhar em outros sites
