Como colocar áudio em sites

Kari Redfield • Oct 11, 2021

Você dedicou um bom tempo planejando um site para seu cliente PME. Você criou um design lindo com ótimas fotos, vídeo estrategicamente implantado. Agora vamos a algo que poderá tornar o site ainda melhor: vamos mostra como colocar áudio em sites para dar um toque especial que vai fazer a diferença.

O áudio pode ser uma excelente maneira de se destacar da concorrência, ajudar os visitantes a se lembrarem de informações (sabe aqueles jingles que ficam na sua cabeça?) e construir uma conexão emocional com uma marca.

Talvez algo que você não saiba é que, quando usado da maneira certa, o áudio pode até ajudar nas classificações de SEO e pode ser um componente importante da experiência de um site.

Aqui estão várias opções de como colocar áudio em sites.

1. HOSPEDAGEM DE ÁUDIO

Uma maneira fácil de inserir áudio em um site é usar um site de hospedagem de som, como o SoundCloud ou o Mixcloud.

Tudo o que você precisa fazer é enviar o arquivo e receber um código HTML incorporado. Em seguida, copie e cole o código incorporado no código da página web ou no editor de sites. Isso funciona para a maioria das plataformas CMS e construtores de sites.

2. ADICIONANDO UM WIDGET DE ÁUDIO NA DUDA

A plataforma de construção de sites flexível da Duda apresenta inúmeras ferramentas especiais que tornam muito fácil colocar áudio em sites, enquanto mantém o controle sobre sua aparência e funções.

Primeiro, siga as etapas acima para adicionar o arquivo de áudio a um site de hospedagem de som. Em seguida, para adicioná-lo à sua página da web, selecione o widget de áudio no menu e adicione o link para o arquivo de áudio.

Com a Duda, você pode definir o layout, o ícone de reprodução e as opções de tamanho usando o Design Editor.

Para acessar o Design Editor:

Clique com o botão direito do mouse no widget e clique em Editar Design.
Se estiver usando o Mixcloud, você tem layout, exibição de miniaturas, esquema de cores claras / escuras e opções de tamanho.
Se você estiver usando o SoundCloud, terá opções de layout, cor do ícone de reprodução e tamanho.

3. Use HTML5

Para colocar áudio em sites você também pode codificar com o elemento <audio> HTML5.

Quando você o codifica com o comando <audio> e o atributo de origem (src), o padrão são as configurações padrão de áudio do navegador.

Ou você pode definir alguns elementos de como o áudio será reproduzido, como dizer para reproduzir automaticamente ou reproduzir sem som para que o usuário possa escolher ligar o som.

Aqui está um exemplo da W3Schools:

Ou mutado:

O texto entre as tags de áudio só será mostrado se o navegador não suportar o elemento de áudio HTML5.

4. Adicione JavaScript

Se você for colocar áudio em um site em vez de usar o widget Duda, recomendamos o uso de JavaScript além de HTML5.

O JavaScript fornece mais controle para garantir que o áudio seja integrado ao site e funcione como pretendido.

Por exemplo, ele permite que você exiba reproduzir, pausar, silenciar e outros botões de controle.

Outros exemplos: você pode definir o padrão para desligar o som e permitir que o som seja ativado com um controlador fácil de encontrar (isso é altamente recomendado porque o som pode distrair).

Seu script pode até ser programado para reproduzir certos sons em resposta às ações do usuário, como durante um questionário.

Aqui está um exemplo do JavaScript Tutor para adicionar um botão de reprodução e um controlador de pausa e script ao código HTML:

 <audio controls id="music">
<source src="mj.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
 
<p>Click the buttons to play or pause the music.</p>
 
<button onclick="play()" type="button">Play </button>
<button onclick="pause()" type="button">Pause</button>
 
<script>
var myMusic= document.getElementById("music");
function play() {
myMusic.play();
}
 
function pause() {
myMusic.pause();
}
</script>

COMO COLOCAR ÁUDIO EM UM SITE

Quando você estiver pronto para levar um site para o próximo nível, adicione alguns elementos sonoros a ele. A Duda simplifica a sua vida na hora de colocar áudio em sites. E se precisar de ainda mais controle, você pode usar JavaScript.

Faça um teste gratuito na plataforma de criação de sites Duda

< Older Post

Newer Post >

Zoom in to the Duda interface, showing the

How to add site SSL to a Duda website: A step-by-step guide

By Renana Dar • 07 May, 2024

SSL, or Secure Sockets Layer encryption ensures that the data transmitted between your site and its visitors remains private and secure. In this guide, we’ll walk you through exactly how to add an SSL to a Duda website.

A website shows a picture of a tropical island in the middle of the ocean.

Interactive websites are helping small businesses compete in new leagues

By Shawn Davis • 02 May, 2024

Third party aggregation platforms are vacuuming up small business profits with no recourse. What if it didn’t have to be this way? See how one SaaS company is giving SMBs the tools they need to fight back.

How verticalized SaaS companies can accelerate their growth in 2024

By Itai Sadan • 29 Apr, 2024

Uncover the playbook for vertical SaaS success in 2024! Dive into the transformative power of multi-product strategies with insights from Itai Sadan, CEO and cofounder of Duda. Learn how to skyrocket revenue, boost customer loyalty, and dominate your market niche.