Hoje vamos ver como criar um player de áudio utilizando apenas o Javascript, com os controles de reproduzir, pausar e parar. Esse player utiliza imagens como controles e não vamos utilizar o componente padrão do HTML.
Antes da gente começar, vamos criar nossos layout HTML e CSS, para isso crie os arquivos conforme o script abaixo
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Player</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="player-wrapper">
<div class="player">
<img src="img/play.png" alt="Play" id="play" width="48" height="48">
<img src="img/pause.png" alt="Pause" id="pause" width="48" height="48" width="48" height="48">
<img src="img/stop.png" alt="Stop" id="stop" width="48" height="48">
</div>
</div>
<script src="script.js"></script>
</body>
</html>style.css
:root {
--blue: #3d65ac;
--red: #ef3e39;
}
* {
box-sizing: border-box;
}
html {
background: rgb(61, 101, 172);
background-image: linear-gradient(145deg, rgba(61, 101, 172, 1) 0%, rgba(239, 62, 57, 1) 100%);
background-size: cover;
height: 100%;
}
.player {
background: rgb(44, 56, 75);
background: linear-gradient(145deg, rgba(44, 56, 75, 1) 0%, rgb(53, 147, 224) 100%);
border: 1px solid #bcc5d2;
border-radius: 5px;
padding: 20px;
width: 100%;
max-width: 250px;
margin: 0 auto;
margin-top: 15%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
.player img {
width: 48px;
height: 48px;
cursor: pointer;
margin-right: 25px;
width: auto;
}
.player img:active {
box-shadow: 0 0 10px #fff;
border-radius: 50%;
}
Agora vamos criar nosso Javascript, vamos inserir o código abaixo.
script.js
'use strict'
//Variável de controle
var play = false;
//Cria o componente de áudio especificando a URL
var audio = new Audio('audio/track-tribe.mp3');
document.querySelector('#play').addEventListener('click', () => {
if (play)
return;
//Reproduz o áudio
audio.play();
play = true;
});
document.querySelector('#pause').addEventListener('click', () => {
//Pausa o áudio
audio.pause();
play = false;
});
document.querySelector('#stop').addEventListener('click', () => {
//Pausa o áudio
audio.pause();
//Volta para o ínicio do track
audio.currentTime = 0;
play = false;
});Vamos entender os pontos chaves do nosso script.
//Cria o componente de áudio especificando a URL
var audio = new Audio('audio/track-tribe.mp3');
//Reproduz o áudio
audio.play();
//Pausa o áudio
audio.pause();
//Volta para o ínicio do track
audio.currentTime = 0;E assim finalizamos mais um artigo.
Deixe um comentário