Como usar Javascript para tocar arquivos MP3

Escrito por michael carroll | Traduzido por marco aurelio zancan
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como usar Javascript para tocar arquivos MP3
Use funções JavaScript para permitir que sons sejam tocados por visitantes de sites (Jupiterimages/Comstock/Getty Images)

Há várias maneiras para embutir e tocar um arquivos de MP3 em suas páginas virtuais. A obsoleta marcação "embed" no HTML, vários Flash players, e players baseados em Java são exemplos dessas maneiras. O padrão HTML5, com sua ênfase em scripts e na falta de confiança em programas de terceiros, oferece a maioria das maneiras compatíveis para embutir e tocar MP3s em ums página da internet. Embuta o arquivo MP3 com o objeto "audio" do HTML5, e então use a função JavaScript para tocá-lo.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Adicione o seguinte código ao corpo de seu documento HTML:

    <audio src="audio.mp3" id="mp3" preload="auto"></audio>

    Esse código embute e carrega o arquivo MP3, mas não o toca. O valor da marcação "src" contém o caminho e o nome do arquivo MP3.

  2. 2

    Adicione o seguinte código JavaScript entre as marcações "head" de seu documento HTML:

    <script type="text/javascript"> function playMP3(){ document.getElementById("mp3").play(); } </script>

    Ao ser chamada, essa função acessa o elemento "audio" pelo seu id ("mp3"), e usa o método play() para tocá-lo.

  3. 3

    Adicione um botão à pagina da web para chamar a função "playMP3", quando o usuário clicar nela. Adicione o seguinte código ao corpo do seu documento HTML:

    <input type="button" value="Clique para tocar o MP3" onClick="playMP3();" />

    Altere o elemento "value" para dar um título diferente ao botão.

  4. 4

    Use a seguinte função ao invés de "playMP3", para permitir que usuários pausem o arquivo depois de iniciá-lo:

    function playpauseMP3(){ if(document.getElementById("mp3").paused){ document.getElementById("mp3").play(); }else{ document.getElementById("mp3").pause(); } }

    Altere o atributo "onClick" da marcação "input" da etapa 3 para combinar esse código com o nome da função.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível