Gerando sons com a Web Audio API do JavaScript \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 05 Horas 52 Min 44 Seg Tempo restante da oferta: 05 52 44 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Gerando sons com a Web Audio API do JavaScript [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # Gerando sons com a Web Audio API do JavaScript Veja como podemos gerar sons com JavaScript usando a Web Audio API. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/01114033/11.png) Olá, Web Developers! Sabiam que podemos gerar sons com JavaScript? Isso graças à Web Audio API, que nos fornece poderosas funcionalidades para se trabalhar com áudio. Podemos fazer coisas como adicionar efeitos a um arquivo de áudio ou criar músicas a partir do JavaScript. [ ![TypeScript - Avançado](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/typescript.svg) Curso TypeScript - Avançado Conhecer o curso ](https://www.treinaweb.com.br/curso/typescript-avancado) ## Começando com um beep Para começar, vamos gerar um simples *beep*. ```js let context = new AudioContext(), oscillator = context.createOscillator(); oscillator.type = 'sine'; oscillator.connect(context.destination); oscillator.start(); ``` Primeiro nós instanciamos o `AudioContext`, que é o principal objeto para podermos gerar um som. A partir dele nós criamos um oscilador, que é responsável por emitir um sinal contínuo, que será o nosso som. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) Precisamos indicar o tipo de onde que nosso oscilador irá gerar. Indicamos que queremos uma onda senoidal (*sine*). Depois conectamos o nosso oscilador ao `context.destination`, que representa o destino final do áudio. Se você está no computador, provavelmente isso indica as suas caixas de som. Por fim, executamos a função `start()` para iniciar o som. Para parar o som, basta executar `oscillator.stop()`. Ao parar o som você pode notar um pequeno clique. Isso acontece basicamente quando paramos o som em um lugar qualquer que não seja o ponto zero da onda, como mostrado na imagem abaixo. ![Onda Senoidal](https://dkrn4sk0rn31v.cloudfront.net/2018/09/27143604/sin-wave-click.png) ## Encerrando o som Um modo de acabar com esse som de clique ao pararmos o som (e que pode ser bem desconfortável) é alterar a nossa onda, como se estivéssemos diminuindo ela. Para isso, usamos a função `exponentialRampToValueAtTime()`, que vai alterando de forma exponencial o valor do nosso som. Vamos então fazer uma pequena alteração em nosso código: ```js let context = new AudioContext(), oscillator = context.createOscillator(), contextGain = context.createGain(); oscillator.connect(contextGain); contextGain.connect(context.destination); oscillator.start(0); ``` Agora criamos um ganho, um objeto que nos permitirá trabalhar com a função `exponentialRampToValueAtTime()`. Ligamos ele ao oscilador e depois ligamos ao destino de saída do som. Para parar o som, ao invés de simplesmente executarmos a função `stop()`, vamos executar o seguinte código: ```js contextGain.gain.exponentialRampToValueAtTime( 0.00001, context.currentTime + 0.04 ) ``` O que fizemos aqui foi alterar o valor do ganho, que basicamente seria como se estivéssemos abaixando o volume aos poucos. Veja que o primeiro parâmetro que passamos é bem próximo de zero. Isso porque essa função não pode receber um valor zerado ou negativo. O segundo parâmetro é o tempo em que queremos que a alteração seja feita. Abaixo você pode conferir que não importa mais em que momento pare o som, ele não terá mais aquele clique. ## Efeitos ao parar o som Quando paramos o som, passamos um tempo bem pequeno para que a alteração no ganho fosse realizada (0.4). Dependendo do tempo que passarmos, podemos ter efeitos interessantes. Isso acaba nos dando sensações diferentes. E essa sensação fica ainda mais evidente quando iniciamos e já encerramos o som logo em seguida. Sons bens mais agradáveis do que aquele som contínuo, não é mesmo? ## Diferentes ondas, diferentes osciladores O que criamos até agora foi um som a partir de um oscilador usando uma onda senoidal. Há outros tipos de ondas, como podemos ver na seguinte imagem: ![](https://dkrn4sk0rn31v.cloudfront.net/2018/09/28064635/signals.png) Para alterar o tipo de onda, basta passarmos um dos seguintes códigos: ```js oscillator.type = 'sine'; oscillator.type = 'square'; oscillator.type = 'triangle'; oscillator.type = 'sawtooth'; ``` [ ![JavaScript - Trabalhando com eventos no navegador](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Trabalhando com eventos no navegador Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-trabalhando-com-eventos-no-navegador) ## Tocando notas Até o momento nós só tocamos um simples *beep*. Mas se quisermos tocar algo, precisamos tocar notas musicais diferentes. Cada nota é um som emitido a uma determinada frequência. Abaixo temos uma tabela que indica cada nota e sua respectiva frequência: ![](https://dkrn4sk0rn31v.cloudfront.net/2018/09/28065939/Captura-de-Tela-2018-09-28-a%CC%80s-06.58.35.png) Para alterar a frequência, basta indicar um valor em `oscillator.frequency.value`. Para tocar um “Dó” (C4): ```js const C4 = 261.6, D4 = 293.7, E4 = 329.6, F4 = 349.2, G4 = 392.0, A4 = 440.0, B4 = 493.9; oscillator.frequency.value = C4; ``` No exemplo, passei a frequência para uma constante apenas para o nosso código ficar mais legível. É bem mais simples e legível deixar o nome das notas do que deixar o número da frequência. ## Evoluindo Caso queira se aprofundar, procure saber mais sobre bibliotecas e frameworks como o `Tone.js`, uma ferramenta completa com várias funcionalidades para se trabalhar com música interativa no navegador. - [https://tonejs.github.io/](https://tonejs.github.io/ "https://tonejs.github.io/") - [https://alemangui.github.io/pizzicato/](https://alemangui.github.io/pizzicato/ "https://alemangui.github.io/pizzicato/") - [https://howlerjs.com/](https://howlerjs.com/ "https://howlerjs.com/") - [http://hoch.github.io/WAAX/](http://hoch.github.io/WAAX/ "http://hoch.github.io/WAAX/") [ ![React Native - Firebase Messaging](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react-native.svg) Curso React Native - Firebase Messaging Conhecer o curso ](https://www.treinaweb.com.br/curso/react-native-firebase-messaging) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Web API ](https://www.treinaweb.com.br/blog/tag/web-api) - [ #audio ](https://www.treinaweb.com.br/blog/tag/audio) - [ #música ](https://www.treinaweb.com.br/blog/tag/musica) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/gerando-apis-clients-com-as-ferramentas-de-openapi-do-net-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 6 anos atrás ## [ Gerando APIs clients com as ferramentas de OpenAPI do .NET ](https://www.treinaweb.com.br/blog/gerando-apis-clients-com-as-ferramentas-de-openapi-do-net) Aprenda como gerar APIs clientes com a global tool Microsoft.dotnet-openapi. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/12/04134730/CERTIFICADO-SSL-CERTBOT-400x280.png) [ Infraestrutura e Sistemas Operacionais ](https://www.treinaweb.com.br/blog/categoria/infraestrutura-e-sistemas-operacionais) 7 anos atrás ## [ Gerando certificados SSL gratuitos com Certbot ](https://www.treinaweb.com.br/blog/gerando-certificados-ssl-gratuitos-com-certbot) Acessar um site que tenha HTTPS é quase um pré requisito hoje em dia. Além de ser recomendável pelos principais navegadores, acessar um site com HTTPS te dá mais segurança e até ajuda no rankeamento do seu site nos resultados de busca do Google, porém geralmente esse certificado é pago. Vamos conhecer nesse artigo como funciona o Certbot e como ele pode ser utilizado para gerar um certificado de forma gratuita. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/20171324/CAPA-ESTUDOS-400x280.png) [ Estudos ](https://www.treinaweb.com.br/blog/categoria/estudos) 7 anos atrás ## [ Como melhorar sua rotina de estudos ](https://www.treinaweb.com.br/blog/como-melhorar-sua-rotina-de-estudos) Confira neste artigo como melhorar sua rotina de estudos e se manter motivado. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Guias ](https://www.treinaweb.com.br/blog/categoria/guias) 3 anos atrás ## [ Guia da linguagem Go ](https://www.treinaweb.com.br/blog/guia-da-linguagem-go) Nesse guia de Go você aprenderá o necessário para criar os seus primeiros softwares com a linguagem de programação Go. Acesse agora mesmo! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Trabalhando com funções na Golang ](https://www.treinaweb.com.br/blog/trabalhando-com-funcoes-na-golang) Neste artigo vamos aprender sobre as funções na Golang. Veremos o que são, qual a sua importância em nossos programas e como utilizá-las. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/MUDANCA-CARREIRA-TI-1-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 6 anos atrás ## [ Por que investir em uma carreira de tecnologia? ](https://www.treinaweb.com.br/blog/por-que-investir-em-uma-carreira-de-tecnologia) Para você que está pensando investir em uma carreira de tecnologia, porém ainda tem algumas dúvidas, vale a pena dar uma conferida neste artigo! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/o-que-e-mindfulness-e-como-pode-nos-ajudar-na-area-de-ti-1-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 6 anos atrás ## [ O que é mindfulness e como pode nos ajudar na área de TI? ](https://www.treinaweb.com.br/blog/o-que-e-mindfulness-e-como-pode-nos-ajudar-na-area-de-ti) Conheça mindfulness, como sua prática ajuda na vida pessoal e profissional. E como aplicar ele no seu dia a dia na área de tecnologia da informação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/18163744/BABEL-1-1-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é Babel? ](https://www.treinaweb.com.br/blog/o-que-e-babel) Veja neste artigo o que é Babel. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/04160957/EXECUTAVEL-APLICACAO-JAVA-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 7 anos atrás ## [ Criando um executável para uma aplicação Java ](https://www.treinaweb.com.br/blog/criando-um-executavel-para-uma-aplicacao-java) Aprenda como transformar uma aplicação Java Desktop em um arquivo executável. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/07161636/introducao-a-aws-400x280.png) [ Amazon ](https://www.treinaweb.com.br/blog/categoria/amazon) 8 anos atrás ## [ Introdução à Amazon Web Services (AWS) ](https://www.treinaweb.com.br/blog/introducao-a-amazon-web-services-aws) A Amazon Web Services (AWS) é uma das principais plataformas de computação em nuvem do mercado. Aprenda os principais conceitos e veja como criar sua conta de teste. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 3 anos atrás ## [ Criando CRUD com Prisma ORM e NestJS ](https://www.treinaweb.com.br/blog/criando-crud-com-prisma-orm-e-nestjs) Neste artigo vamos implementar um CRUD com Prisma ORM e NestJS, abordando as principais operações básicas com o banco de dados. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/08/DEPLOY-SPRING-DIGITAL-OCEAN-400x280.jpg) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 3 anos atrás ## [ Deploy de uma aplicação Spring Boot na DigitalOcean ](https://www.treinaweb.com.br/blog/deploy-de-uma-aplicacao-spring-boot-na-digitalocean) Aprenda nesse artigo como realizar o Deploy de uma aplicação Spring Boot em uma VPS da DigitalOcena, usando ferramentas como o Nginx. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **05h 52min 44s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58