Criando um simples player de áudio com Javascript

CursoSimplificando o desenvolvimento de APIs PHP com Swagger

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.