Como adicionar elementos de áudio para uma página html5
Talvez nenhum recurso do HTML5 era mais esperado do que os elementos de mídia, e, finalmente, você pode construir páginas web HTML5 que apresentam elementos de áudio sem necessidade de um plugin externo.
o tag permite embutir um arquivo de áudio diretamente no navegador, usando um código como este:
Se o navegador que você está usando não suporta o tag, o código entre e será apresentado em vez disso, para que possa fornecer um link comum para permitir que o usuário fazer o download do áudio. Ou você pode incorporar um player de Flash para navegadores mais antigos.
o tag suporta vários atributos padrão:
Reprodução automática: O arquivo de áudio é reproduzido imediatamente quando o navegador carrega a página. No entanto, é considerado rude para reproduzir áudio sem a permissão explícita do usuário.
controles: O navegador apresenta uma interface simples controle incluindo play / pause, controle de volume, e algum tipo de indicador de posição. É bom para dar ao usuário algum tipo de controle ou através do mecanismo de controle interno ou código javascript.
pré-carga: O arquivo de áudio começa a carregar na memória assim que a página é carregada, mas não jogar até que o usuário ativa o jogador. Isso pode impedir que o buffer que poderia ocorrer se o áudio não é pré-carregado.
src: Indica o endereço do arquivo. Note-se que o tag é o preferido, pois permite múltiplas opções.
o tag é suportado de alguma forma por todos os principais navegadores, incluindo o Internet Explorer 9 (IE9). No entanto, os formatos de arquivo de áudio reais não são codificados no padrão, de modo que diferentes navegadores (naturalmente) apoiar diferentes formatos. A maioria dos navegadores suportam o padrão Ogg open source, mas alguns (nomeadamente Safari e IE9) preferem Mp3. Se você fornecer uma versão de cada um, é provável que qualquer navegador tarde-modelo vai apoiar o seu áudio. Use o tag para incluir várias fontes de áudio:
O navegador vai tentar cada fonte, a fim até encontrar um que pode usar.
Note-se que o auditivo elemento pode ser controlado através de código javascript. O seguinte código (invocado em body.onload) Adiciona um elemento canção para a página sem exibir o elemento de áudio:
var-função canção init () {canção = document.createElement ( `audio`) - song.setAttribute ( `src`, `DoYou.ogg`) -} // inicialização final
O código cria um elemento chamado canção e pré-carrega um arquivo Ogg em que a canção. O seguinte código HTML cria um botão de reprodução:
Claro, este botão pode ser denominado em qualquer maneira que você deseja criar sua própria interface. Depois de ter um elemento de áudio identificado em sua página, você pode aplicar as seguintes funções javascript para ele:
Toque: Como você pode imaginar, este reproduz o arquivo. Surpreendentemente, não há nenhum comando de parada. Você nem precisa de pausar ou ajustar o volume para zero.
Video: HTML5 - Aula 12 - Audio e Video
pausa: Isso pausa o som. O próximo comando peça começa neste local.
setAttribute: Esta função permite modificar qualquer um dos atributos que normalmente definidas no HTML tag. Isto é usado principalmente para anexar uma src ao elemento de áudio.
Você também pode acessar um número de propriedades úteis:
hora atual: Isso indica onde (em segundos) a canção está jogando atualmente. Você pode lê-lo para encontrar a posição atual, ou configurá-lo para avançar para uma parte específica da sua música.
Video: Reproductor de Audio en HTML5 [Parte 1: HTML]
volume: O volume vai de 0 (silencioso) a 100 (no máximo). Você pode definir ou recuperar este atributo através de código javascript.
