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 = 440No 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!
Mestre em Sistemas de Informação pela USP e criador do DevPleno. Iniciou sua carreira como professor com apenas 18 anos em um curso técnico, foram 11 anos em sala de aula formando desenvolvedores fullstack no sul de Minas Gerais.