Hoje eu quero falar um pouco sobre WebAudioAPI e como podemos gerar sons dinamicamente no browser. Vamos começar fazendo uma função que toca um som e depois vamos fazer uma variação do formato de onda. Todo som que eu quiser reproduzir aqui eu preciso de um contexto de áudio. Eu consigo trazer ele de duas formas: utilizando o áudio contexto ou nos browser de webkit, webkit audiocontext:

<html>
  <head>
    <tittle>WebAudioAPI</tittle>
  </head>
  <body>
    <script>
      const contexto = (window.AudioContext || window.webkitAudioContext)
    </script>
  </body>
</html>

Agora, com o contexto pronto, precisamos criar um oscilador, que é uma forma de gerar essa onda dinâmica:

const osc = contexto.createOscillator()

Com isso conseguimos começar a brincar com o oscilador, por exemplo:

osc.type = 'sine'

osc.frequency.value = 440

No exemplo, colocamos ele em uma frequência de 440 hertz e agora vamos linkar com o destino do contexto e iniciar o oscilador e depois pedimos para ele pausar depois de dois segundos:

osc.connect(context.destination)

osc.start()

osc.stop(contexto.currentTime + 2)

Ao rodar por dois segundos, ele emitirá um som. Agora vamos criar um select, dentro dele podemos variar o tipo de onda:

<select id=”type” onchange=”play()”>
    <option>-</option>
    <option value=”sine”>Sine</option>
    <option value=”square”>Square</option>
    <option value=”sawtooth”> Sawtooth </option>
    <option value=”triangle”> Triangle </option>
</select>

Agora, dentro de script, colocaremos uma function play:

<script>

    function play(){
        const contexto = (window.AudioContext || window.webkitAudioContex)t
        const osc =  contexto.createOscillator()
        osc.type = document.getElementById('type').value
        osc.frequency.value = 440
        osc.connect(context.destination)
        osc.start()
        osc.stop(contexto.currentTime +2)
    }
</script>

Assim já conseguimos criar um sintetizador de áudio, sem precisar de um arquivo de áudio. Podemos, por exemplo, pegar a frequência de cada nota e trabalhar em cima dela.

Confira o video:

Curta o DevPleno no Facebook, se inscreva no canal no YouTube e cadastre seu e-mail para não perder as atualizações. Abraço!