Blog > Javascript > Como construir um beatbox com JavaScript

Como construir um beatbox com JavaScript

Tulio Faria29 de maio de 2017

Continuando nossos experimentos utilizando áudio no HTML (você deve ter percebido que me empolguei com este assunto), vamos mudar o exemplo do metrônomo para construir uma 'bateria' e poder criar uma música somente dando 'plays' de forma ordenada em alguns trechos. Então vamos lá!

Vamos ter um botão que será um play/stop. Ao dar o play, será tocado uma sequência de áudios para simular uma bateria em loop. Para que isso ocorra, temos que ter alguns áudios e também tratar isso em javaScript.

<html>
  <head>
    <tittle>beat-box</tittle>
  </head>

  <body>
    <button id="play">Play</button>
    <audio src="prato.wav" id="prato"></audio>
    <audio src="prato-fechado.wav" id="prato-fechado"></audio>
    <audio src="bumbo.wav" id="bumbo"></audio>
    <audio src="boca.wav" id="boca"></audio>
    <audio src="caixa.wav" id="caixa"></audio>

    <script></script>
  </body>
<html>

Dentro do Script, vamos tratar como fizemos no exemplo do metrônomo, então vamos criar o mesmo timer, criar uma função tick, porém fazer ela rodar a 90bpm (60*1000/90), isso dá a distância entre uma batida e outra.

A ideia é que a cada interação do tick, toque um áudio. Exemplo: Supondo que nossa música seja prato, bumbo, boca e caixa, o tick vai tocar essas 4 coisas para cada repetição que fizer. Para isso vamos pegar o music na posição currentAudio++.

<script>
  const  play = constGetElementById('play')

  let timer = null

  let currentAudio = 0

  const bpm = 90

  const music = ['prato', 'bumbo', 'boca', 'caixa']

  function tick(){
    console.log(music[(currentAudio++)%music.length])
  }

  play.addEventListener('click', function(){
    timer = setInterval(tick, (60 *1000 / bpm)
  })
</script>

Acabamos de criar uma técnica para fazer os áudios circularem. A cada interação vamos incrementar o currentAudio e quando esse currentAudio chegar em 4, ele voltará para o 0. Com isso já é possível fazer uma bateria apenas mudando o console.log por:

function tick(){
  const audioID = (music[(currentAudio++)%music.length]

  const audio = document.getElementById(audioID)

  audio.play()
}

Conseguimos tocar uma trilha, mas para a música ficar legal, podemos colocar essa trilha de uma forma diferente, por exemplo:

<script>
  const  play = constGetElementById('play')

  let timer = null

  let currentAudio = 0

  const bpm = 90

  const music = \[
    \['bumbo', 'bumbo', 'bumbo', 'bumbo', \],
    \['prato', 'prato-fechado', 'boca', 'caixa'\]
   \]

  function tick(){
    const current = (music\[(currentAudio++)%music\[0\].length\]

    const audioID1 = music\[0\]\[current\]

    const audioID2 = music\[1\]\[current\]

    const audio1 = document.getElementById(audioID1)

    audio1.play()

    audio1.currentTime = 0

    const audio2 = document.getElementById(audioID2)

    audio2.play()

    audio2.currentTime = 0
  }

  play.addEventListener('click', function(){
    timer = setInterval(tick, (60*1000/bpm)
  })
</script>

Você pode baixar os arquivos de áudio aqui: Download

Curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

Autor

Tulio Faria29 de maio de 2017

Como construir um beatbox com JavaScript

Últimas do Blog

Lista de sites para trabalhar remotamente como programador em 2022

4 formas de gerar um array (vetor) populado em Javascript

A habilidade mais importante que um programador deveria ter (e praticar)

Como as maratonas de programação da faculdade impactaram a minha carreira