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!
