ElementsKit é um complemento Elementor completo que vem com quase todos os tipos de recursos para sites WordPress, incluindo o widget Elementor Audio Player.

Usando o widget Reprodutor de áudio, você pode incorporar música em seu site com um controle de reprodutor de áudio fácil de usar. O widget inclui algumas opções para fazer upload de áudio, muitas opções de áudio e controle e muito mais.

Recursos do widget do reprodutor de áudio: #

• Faça upload de áudio por meio da biblioteca de mídia WordPress.
• Incorporar áudio usando URL.
• Opções de áudio, incluindo reprodução automática, loop e mudo.
• Controle de reprodução e pausa.
• Controle de volume.
• Controle da barra de progresso.
• Mostrar tempo de jogo e duração total.
• Personalize a aparência do reprodutor de áudio.

Etapa 1: ativar o widget do reprodutor de áudio #

Primeiramente, você precisa habilitar o widget no painel do WordPress. Para ativar o widget Reprodutor de áudio:

1. Navegar para ElementsKit > Widgets.
2. Encontre o Tocador de Áudio da lista e ative o widget.
3. Clique no SALVAR ALTERAÇÕES.

Etapa 2: arraste e solte o widget #

Depois disso, arraste e solte o widget ElementsKit Audio Player no editor Elementor.

Etapa 3: configurar o widget Elementor Audio Player #

Na guia Conteúdo, você pode carregue o áudio e configure o Opções de áudio e Opções de controle do reprodutor de áudio. Você pode usar as seguintes opções para configurar o reprodutor de áudio WordPress no Elementor.

3.1 Fonte #

Você pode fazer upload do arquivo de áudio ou usar um URL para adicionar áudio ao player. Existem duas opções disponíveis para a fonte de áudio.

Fonte – Auto-hospedado: #

Ao escolher Auto-hospedado como fonte de áudio, você pode fazer upload de um arquivo de áudio de sua biblioteca de mídia do WordPress.

Escolher “Auto-hospedado” como fonte > Clique no botão de upload > adicione um arquivo de áudio da biblioteca de mídia.

Fonte – Externa: #

Ao escolher a fonte externa, você pode incorporar áudio da internet com sua URL.

Escolher “Externo” como fonte > insira o URL do áudio no campo obrigatório.

3.2 Opções de áudio #

Aqui estão as opções de áudio disponíveis com o widget Audio Player:

1. Reprodução automática: Habilite a reprodução automática, para que o áudio seja reproduzido automaticamente quando a página carregar.
2. Laço: Habilite esta opção para reproduzir o áudio em loop.
3. Mudo: Quando ativado, o áudio é inicialmente silenciado quando o player é iniciado. Os usuários precisam ativar o som do áudio manualmente.

3.3 Opções de Controle #

Aqui estão as opções de controle disponíveis com o widget Audio Player:

1. A pausa: Habilita o controle play/pause (botão) para os usuários.
2. Barra de progresso: Para mostrar a barra de progresso do áudio no player.
3. Hora atual: Isso mostra o tempo de reprodução atual no reprodutor de áudio Elementor.
4. Duração total: Isso mostra a duração total do áudio.
5. Barra de volume: Para mostrar e controlar o nível de volume do áudio.
6. Ocultar volume em dispositivos de toque:
7. Layout do controle deslizante de volume: Existem dois layouts disponíveis para a barra de volume: Horizontal e Vertical.
8. Volume inicial: Defina o nível de volume inicial quando o player iniciar.

Etapa 4: personalizar estilos de reprodutor de áudio Elementor #

Você pode personalizar o botão Play Pause, a barra de progresso, os estilos de tempo e volume no widget Elementor Audio Player.

4.1 Botão de pausa na reprodução #

Para personalizar o botão Play Pause,

1. Ajusta a Tamanho do botão.
2. Escolha o botão Cor, Cor de fundo, Sombra da caixa, e Tipo de borda para o botão.
3. Colocou o Raio da Fronteira, Preenchimento, e Margem.

4.2 Barra de Progresso #

Para personalizar a barra de progresso,

1. Você pode ajustar o Altura da barra de progresso.
2. Escolha o Cor de fundo da barra de progresso.
3. Colocou o Tipo de borda, Largura da borda, e Cor da borda.
4. Ajusta a Raio da Fronteira da barra de progresso.

5. Barra de progresso carregada: Você pode escolher a cor de fundo da barra de progresso carregada.
6. Barra de progresso atual: Defina a cor de fundo e o raio da borda da barra de progresso atual.
7. Passar o tempo: Selecione Cor de fundo para passar o tempo.

4.3 Tempo #

Para personalizar os estilos de tempo do reprodutor de áudio Elementor,

1. Colocou o Tipografia para os dígitos do texto.
2. Escolha uma cor e ajuste a margem para o Hora atual.
3. Escolha uma cor e ajuste a margem para o Tempo de duração.

4.4 Volume #

Para personalizar os estilos dos botões de volume,

1. Você pode ajustar o Altura do botão de volume.
2. Escolha o Cor de fundo do botão de volume.
3. Colocou o Tipo de borda, Largura da borda, e Cor da borda.

4. Barra de volume: Ajuste a altura, largura, cor e estilos de borda da barra de volume.
5. Barra de volume atual: Defina a cor e o raio da borda da barra de volume atual.

Finalmente, você pode usar o reprodutor de áudio do seu site com todos os recursos úteis. O widget Elementor Audio Player vem com ElementKits Pro. Obtenha o plugin para adicionar áudio e música ao seu site WordPress da maneira mais fácil.