Como incorporar um MP3 player grátis em seu site: 3 maneiras

Como incorporar um MP3 player grátis em seu site: 3 maneiras

Se você deseja que os visitantes do seu site desfrutem de um arquivo MP3, uma das maneiras mais fáceis de fazer isso é incorporá-lo à página. Com um reprodutor de MP3 embutido, os visitantes não precisam baixar o áudio diretamente ou usar software adicional porque ele é reproduzido em linha.





Vamos detalhar diferentes métodos que você pode usar para incorporar um MP3 em seu site, incluindo o uso de HTML5 e Google Drive.





1. Incorpore um MP3 em seu site com HTML5

Se você se sentir confortável para editar o código do seu site, uma das maneiras mais fáceis de incorporar um arquivo MP3 é usar HTML5.





O HTML5 tag pode parecer básica à primeira vista, mas é poderosa, pois é compatível com todos os principais navegadores de desktop e móveis.

Para incorporar um MP3 com HTML5, use este código:



Your browser does not support the audio tag.

Simplesmente substitua URL MP3 AQUI com seu arquivo de áudio carregado. Não pode ser um arquivo armazenado em seu computador; deve estar disponível online.

Windows 10 diz que não há acesso à internet, mas há

Este código colocará um pequeno reprodutor de áudio na página, a partir do qual o usuário pode reproduzir, pausar, esfregar e ajustar o volume. Esta é a aparência no Firefox:





Esse código também inclui uma mensagem que será exibida no lugar do reprodutor de mídia, na improvável circunstância de o navegador do usuário não suportar o reprodutor.

Você pode aplicar atributos como Reprodução automática e ciclo , igual a:





Your browser does not support the audio tag.

Lembre-se de que a maioria dos navegadores não oferece suporte à reprodução automática porque é considerado uma prática inadequada forçar automaticamente o áudio para os usuários.

A personalização básica pode ser aplicada ao bloco do reprodutor de áudio via CSS, como fronteira e preenchimento . No entanto, você precisará usar JavaScript para definir o estilo adequado do próprio player para que seja consistente em todos os navegadores.

Mais informações sobre os atributos e personalização do player de áudio HTML5 podem ser encontradas em MDN Web Docs .

como descobrir quem deixou de te seguir no instagram

Relacionado: Efeitos HTML fantásticos que qualquer um pode adicionar aos seus sites

2. Incorpore um MP3 em seu site com o Google Drive

Google Drive é um provedor de armazenamento em nuvem excelente e gratuito . Você pode usá-lo para fazer upload de seu arquivo MP3 e criar um reprodutor de áudio.

Com o MP3 carregado para o Google Drive:

  1. Clique com o botão direito o arquivo e clique Obter link .
  2. Altere a restrição de acessibilidade para Qualquer pessoa com o link .
  3. Finalmente, clique Link de cópia .

Isso lhe dará um URL semelhante a este:

https://drive.google.com/file/d/123/view?usp=sharing

Substituir visualizar? usp = compartilhamento com antevisão , igual a:

https://drive.google.com/file/d/123/preview

Então, use um

Você pode ajustar, adicionar ou remover os atributos (como moldura e largura ) como necessário.

Isso irá incorporar o MP3 em seu site usando o player do Google Drive. Os usuários podem tocar, esfregar e ajustar o volume, assim como com o player HTML5. Esta é a aparência:

A principal diferença é a presença de um sair botão. Isso abre o MP3 no Google Drive, onde os usuários podem adicionar comentários, compartilhar o arquivo e muito mais.

3. Incorpore um MP3 em seu site com um CMS

Se você usar um sistema de gerenciamento de conteúdo (CMS) para o seu site, provavelmente ainda poderá usar os métodos acima. Dito isso, você pode não se sentir confortável editando o código HTML.

como mesclar 2 contas do Facebook

Qualquer bom CMS permitirá que você adicione áudio ao seu site facilmente por meio de sua interface. Por exemplo, no WordPress, você simplesmente precisa adicionar um bloco , selecione Áudio , e então também Envio o MP3, selecione-o em seu Biblioteca de mídia , ou Inserir do URL .

Esteja você usando o Google Sites, ExpressionEngine ou um serviço como o Squarespace, o processo para adicionar áudio será um pouco diferente, portanto, consulte a documentação de ajuda da empresa para obter orientação completa.

Deixe seus visitantes ouvirem MP3s com facilidade

Usando qualquer um dos métodos acima, os visitantes do seu site agora poderão ouvir arquivos MP3 por meio de um reprodutor de mídia com facilidade.

Dito isso, você nem sempre precisa usar arquivos MP3. Existem muitos outros formatos de áudio comuns, como WAV e FLAC, que você pode reproduzir inline em seu site.

Compartilhado Compartilhado Tweet O email Os 10 formatos de áudio mais comuns: qual deles você deve usar?

Você sabe sobre MP3, mas e quanto a AAC, FLAC, OGG ou WMA? Por que existem tantos formatos de arquivo de áudio e existe um melhor formato de áudio?

Leia a seguir
Tópicos relacionados
  • Internet
  • Desenvolvimento web
  • Ferramentas para webmasters
  • HTML5
Sobre o autor Joe Keeley(652 artigos publicados)

Joe nasceu com um teclado nas mãos e imediatamente começou a escrever sobre tecnologia. Ele tem um BA (Hons) em Negócios e agora é um escritor freelance em tempo integral que gosta de tornar a tecnologia simples para todos.

Mais de Joe Keeley

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever