Blog > Javascript > Construindo um Beatbox Manipulável com JS

Construindo um Beatbox Manipulável com JS

Tulio Faria29 de maio de 2017

Agora que já entendemos como dar play em áudio com JS, como manipular para compor uma batida, faremos com que o usuário escolha a forma como seja tocado, ou seja, um Beatbox Manipulável com JS

Vamos começar utilizando um pouco da estrutura do HTML usado anteriormente (os áudios importados e o play) e implementar esse código. Criaremos um div.

A ideia é ter vários checkbox para cada instrumento, por exemplo, temos um prato e vários checkbox, os quais podemos marcar. Onde estiver marcado será tocado o áudio e onde não estiver não será tocado. Para não precisarmos criar manualmente todo os inputs, podemos criar um script JS que terá um contador que gera vários checkbox.

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

    <div id="track1" rel="prato">
      <h2>Prato</h2>
    </div>
    <div id="track2" rel="prato-fechado">
      <h2>Prato-fechado</h2>
    </div>
    <div id="track3" rel="bumbo">
      <h2>Bumbo</h2>
    </div>

    <script>
      const numItems = 10
      function generationTrack(trackId){
        const track = document.getElementById('track'+trackId)

        for (let i=0; i<10; i++){
          track.innerHTML += '<input type="checkbox id="i-'+trackId+'-'+i+'" />'
        }
      }

      generateTrack(1)
      generateTrack(2)
      generateTrack(2)
    </script>
  </body>
<html>

O objetivo é que o usuário possa escolher quando quer que cada item toque, por exemplo, com o bumbo batendo em um ritmo e o prato nos intervalos.

Para que isso aconteça, cada tick da música tem que checar se naquela linha aquele áudio está marcado.

<script>
  //gera o check-box
  const numItems = 10
  function generationTrack(trackId){
    const track = document.getElementById('track'+trackId)

    for (let i=0; i<10; i++){
      track.innerHTML += '<input type="checkbox id="i-'+trackId+'-'+i+'" />'
    }
  }
  generateTrack(1)
  generateTrack(2)
  generateTrack(2)
  //fim gerar check-box

  const bpm = 90
  let current = 0
  function tick(){
    const currentItem = current++ % numItems

    console.log(currentItem)
  }

  setInterval(tick, (60*1000)/bpm)
</script>

Note que ele está caminhando entre os itens, mas temos que andar entre os tracks e pegar os que vão ser tocados. Para isso vamos implementar o script criando um for com i iniciado em 1 e i menor ou igual a 3, então podemos checar se aquele item em especifico está marcado. Quando for true, daremos play, e por último 'startar' quando apertarmos no play:

<script>
  const bpm = 90
  let current = 0
  let isPlaying = false
  let timer = null
  function tick(){
    const currentItem = current++ % numItems
    for(let i=1; i<=3; i++){
      const item = document.getElementById('i-'+i+'-'+currentItem)
      const track = document.getElementById('track' +i)
      if (item.checked){
        const audio = document.getElementById(track.attributes.rel.value)
        audio.currentTime = 0
        audio.play()
      }
    }
  }
  const play = document.getElementById('play')
  play.addEventListener('click', function(){
    if (isPlaying){
      clearInterval(timer)
      play.innerHTML = 'Play'
    } else {
      timer = setInterval(tick, (60*1000)/bpm)
      play.innerHTML = 'Stop'
    }

    isPlaying = !isPlaying
  }
</script>

Todo check ativo irá gerar um som e os inativos serão ignorados. No botão, sempre que estiver tocando vai ter o stop e quando tiver parado vai ter play. Assim geramos um beat-box que o usuário escolhe a forma em que vai ser tocado utilizando o checkbox.

Poderíamos transformar esses checkbox em caixinhas e isso deixaria muito mais parecido com softwares como fruitLoops, que são bem simples de criar batidas. Esse código está bastante flexível, se quisermos colocar mais itens só aumentar o número de itens no 'numItems'.

Baixe 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

Construindo um Beatbox Manipulável com JS

Ú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