Criando um simples player de áudio com Javascript

Criando um componente de áudio conseguimos reproduzir músicas apenas com JS.

Publicado em

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.

Gunnar Correa
Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. Fundador da SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.

Deixe um comentário
Aguarde...