0

O que pretendo fazer é personalizar os controles do elemento html audio. Preciso apresentar no Front End apenas um ícone (o auto-falante), e este deve ter apenas a função de ligar e desligar o audio mp3.

Um exemplo do que eu preciso é o google translator. O botão para ouvir a pronuncia da tradução feita.

Aceito outra sugestão que dê o resultado desejado.

No momento o audio apresenta este layout:

inserir a descrição da imagem aqui

Como preciso:

inserir a descrição da imagem aqui

O código que estou usando:

 <audio controls src="audio.mp3" >
<p>Seu navegador não suporta o elemento audio </p>
</audio>

1 Resposta 1

2

Esse é um modelo que pode te ajudar.

/* 
Esse modelo também funciona para vídeo basta trocar a tag <audio> por <video>:
 
  <video width="1280" height="720" >
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
  </video> 
  
*/

// Pega o ID do audio
var podcastAudio = document.getElementById('podcast-audio');

var playBtn = document.getElementById('podcast-play');

var pauseBtn = document.getElementById('podcast-pause');

// Play audio & mostra pause btn
var playShow = function() {
  podcastAudio.play();
  playBtn.style.display = "none";
  pauseBtn.style.display = "inline-block";
};

// Pause audio & mostra play btn
var pauseShow = function() {
  podcastAudio.pause();
  playBtn.style.display = "inline-block";
  pauseBtn.style.display = "none";
};
.player-ctrl {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #569ef7;
  height: 100vh;
  width: 100%;
}
i {
  font-size: 50px;
  color: white;
  line-height: 50px;
  padding: 13px;
}
h1 {
  font-family: sans-serif;
  padding-left: 20px;
  color: #222;
  font-weight: 300;
}
a {
  background-color: #fb5f70;
  border-radius: 5px;
  padding: 20px;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<div class="player-ctrl">

  <!-- Play Button -->
  <a id="podcast-play" onclick="playShow()"><i class="ion-ios-play"></i></a>

  <!-- Pause Button -->
  <a id="podcast-pause" onclick="pauseShow()" style="display:none;"><i class="ion-ios-pause"></i></a>
  <h1>Click me</h1>
</div>


<!-- Audio player -->
<audio id="podcast-audio">
    <source src="https://s3.amazonaws.com/cmb-portfolio-16/closer.m4a" type="audio/mp4">
</audio>

Fonte: https://codepen.io/coreybrown89/pen/QKyKYy

Vc pode usar tb alguma biblioteca pronta tipo http://www.jplayer.org/

Ou pode fazer na mão, esse artigo da uma dicas: https://webdesign.tutsplus.com/pt/tutorials/create-a-customized-html5-audio-player--webdesign-7081 e aqui também: https://www.theparticlelab.com/building-a-custom-html5-audio-player-with-jquery/

Outra pergunta similar no Stackoverflow em inglês: https://stackoverflow.com/questions/4126708/is-it-possible-to-style-html5-audio-tag/33948255#33948255

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .