Como fazer um MP3 player com HTML

Escrito por fred larrey | Traduzido por camila rodrigues
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer um MP3 player com HTML
Um MP3 Player para seu site (gold mp3 player image by patrimonio designs from Fotolia.com)

Se você estiver criando um site, saber como controlar a mídia com HTML é uma obrigação. Um MP3 player básico pode ser criados usando a tag HTML "embed". Com ela você pode acessar qualquer arquivo MP3 no seu disco rígido ou em seu servidor e fazer com que o usuário do seu site o reproduza, ajuste o volume e salte para o trecho que quiser da música.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Editor de texto

Lista completaMinimizar

Instruções

  1. 1

    Abra seu editor de texto favorito. Qualquer editor de texto irá funcionar.

  2. 2

    Digite o seguinte código HTML: <embed src="minha_música.mp3" width="300" height="42" ></embed>

    Certifique-se de substituir "minha_música.mp3" (com as aspas) pelo arquivo que você gostaria de executar.

  3. 3

    Vá em "Arquivo", depois em "Salvar como" e navegue até o diretório onde está seu arquivo MP3. Na caixa de texto "Nome do arquivo", nomeie seu arquivo com a extensão ".html" (e não ".txt" ou ".doc"). Clique em "Salvar".

  4. 4

    Navegue até o diretório onde você salvou o arquivo ".html" e dê um duplo-clique nele. Seu navegador executará a canção e você ouvirá o arquivo começar a tocar. Você verá um reprodutor com um botão "play/pause/stop", um controle de volume e uma barra de progresso que lhe diz em que trecho da música você está.

Dicas & Advertências

  • Se você quiser adicionar mais músicas, basta copiar e colar mais "" tags (como o que você escreveu no Passo 2), e apenas mudar o nome depois de "src =". Certifique-se de que todas suas músicas estão no mesmo diretório que o seu arquivo ".html".

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