How to customize the controls of the html audio element?

Question

How to customize the controls of the html audio element?

Navigation

#1 by (2 votes)

0

What I want to do is customize the controls of the html audio element. I need to display only one icon (the speaker) in the Front End, and it should only be the function of turning the mp3 audio on and off.

An example of what I need is google translator. The button to hear the pronunciation of the translation made.

I accept another suggestion that gives the desired result.

At the moment the audio presents this layout:

Asrequired:

ThecodeI'musing:

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

html

asked by anonymous 01.09.2018 / 21:16

1 answer

Register multiple images in the database on the same line | Mysql | PHP How do I transform some rows into columns?

score 2 · Accepted Answer

This is a template that can help you.

/* 
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>

Source: link

You can use tb any library ready type link

Or you can do on hand, this article gives a tips: and here too: link

Another similar question in Stackoverflow in English: link