WebAudioAPI - Gerando um som no browser

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…

WebAudioAPI - Gerando um som no browser

2017-10-17

por: Tulio Faria

Categoria: DicasVideo-Tutorial

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

Deixe suas dúvidas e sugestões nos comentários. 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!

Em:

Dicas

Video-Tutorial

WebAudioAPI - Gerando um som no browser

WebAudioAPI - Gerando um som no browser

Categorias

Temas