Você está aqui: JavaScript ::: Web Audio API ::: OscillatorNode

Como criar um oscilador de onda senoidal em JavaScript usando a Web Audio API e um OscillatorNode

Quantidade de visualizações: 475 vezes

Nesta dica mostrarei como podemos usar a Web Audio API, em particular um nó OscillatorNode, para criar um oscilador de onda senoidal em HTML e JavaScript. Um oscilador de onda senoidal usa a função seno ou senóide para a representação do som.

Veja na imagem abaixo a representação de um som no formato senoidal:

Quando criamos um OscillatorNode nós temos que informar o contexto de áudio (um objeto AudioContext), o formato da onda e a frequência em Hz. Em nosso exemplo eu coloquei a frequência em 440 Hz, representando a nota Lá na quarta oitava do piano. Depois do código há uma explicação mais detalhada sobre a frequência, comprimento e amplitude de uma onda senoidal.

Veja o código JavaScript completo para exemplo:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Como criar um oscilador em JavaScript</title>
</head>
<body>

<h3>Clique o botão Iniciar para iniciar a execução
  do Oscilador</h3>

<button id="iniciar_btn" 
  onclick="iniciar()">Iniciar</button>
<button id="parar_btn" disabled="disabled" 
  onclick="parar()">Parar</button>

<script language="javascript">
  'use strict';
  
  // obtemos referências para os botões de iniciar
  // e parar o oscilador
  var btn_iniciar = document.getElementById("iniciar_btn");
  var btn_parar = document.getElementById("parar_btn");
  
  // vamos declarar o contexto de áudio
  var contexto;
  
  // para representar o oscilador
  var oscilador;
  
  // função usada para iniciar o oscilador de onda
  // senoidal
  function iniciar(){
    // vamos criar um objeto AudioContext
    var AudioContext = window.AudioContext 
      || window.webkitAudioContext;
    // e obtemos o contexto de áudio     
    contexto = new AudioContext();
	
    // vamos criar o oscilador na frequência
    // de 440Hz
    oscilador = new OscillatorNode(contexto, {
      type: 'sine',
      frequency: 440
    });
    
    // conectamos o oscilador à saída
    oscilador.connect(contexto.destination);
    // e começamos a fazer barulho
    oscilador.start();
    
    // vamos desabilitar o botão de iniciar
    btn_iniciar.disabled = true;
	
    // vamos habilitar o botão de parar
    btn_parar.disabled = false;
  }
  
  // função usada para interromper o oscilador
  function parar(){
    // vamos interromper o oscilador
    oscilador.stop();	
	
    // vamos desabilitar o botão de parar
    btn_parar.disabled = true;
	
    // vamos habilitar o botão de iniciar
    btn_iniciar.disabled = false;
  }
</script>
  
</body>
</html>

A frequência descreve o número de vibrações por unidade de tempo, ou seja, quantos ciclos completos a onda percorre em uma unidade de tempo, que pode ser o segundo, o minuto ou qualquer outra unidade que você achar conveniente. A unidade que usaremos para descrever as frequências é o Hertz (Hz).

1 Hz corresponde a um ciclo de vibração por segundo. Por exemplo, quando colocamos um diapasão na forma de garfo em vibração, suas hastes vibrarão a uma frequência de 440 Hz, ou 440 ciclos por segundo, correspondentes à nota musical Lá. Essa nota pode ser perfeitamente descrita pela sua frequência (440 Hz), comprimento de onda (0,77 m) e uma amplitude que vai depender da energia utilizada para colocá-lo em vibração e que descreve a intensidade da variação da pressão do ar.

Link para compartilhar na Internet ou com seus amigos:

JavaScript ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas

Como calcular o comprimento da hipotenusa em JavaScript dadas as medidas do cateto oposto e do cateto adjascente

Quantidade de visualizações: 877 vezes

Nesta dica mostrarei como é possível usar a linguagem JavaScript para retornar o comprimento da hipotenusa dadas as medidas do cateto oposto e do cateto adjascente. Vamos começar analisando a imagem a seguir:

Veja que, nessa imagem, eu já coloquei os comprimentos da hipotenusa, do cateto oposto e do cateto adjascente. Para facilitar a conferência dos cálculos, eu coloquei também os ângulos theta (que alguns livros chamam de alfa) e beta já devidamente calculados.

Então, sabendo que o quadrado da hipotenusa é igual à soma dos quadrados dos catetos (Teorema de Pitógoras):

\[c^2 = a^2 + b^2\]

Tudo que temos a fazer a converter esta fórmula para código JavaScript. Veja:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<html>
<head>
  <title>Estudos JavaScript</title>
</head>
 
<body>

<script type="text/javascript">
  var a = 20; // medida do cateto oposto
  var b = 30; // medida do cateto adjascente
  
  // agora vamos calcular o comprimento da hipotenusa
  var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
 
  // e mostramos o resultado
  document.writeln("O comprimento da hipotenusa é: " + c);
</script>

</body>
</html>

Ao executar este código JavaScript nós teremos o seguinte resultado:

O comprimento da hipotenusa é: 36.05551275463989

Como podemos ver, o resultado retornado com o código JavaScript confere com os valores da imagem apresentada.

JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como converter uma string em um valor de ponto-flutuante em JavaScript usando a função parseFloat()

Quantidade de visualizações: 7774 vezes

Em algumas situações nós precisamos receber uma string informada pelo usuário e convertê-la para um valor real válido. Um valor em JavaScript é o mesmo que um valor com casas decimais, ou seja, um valor de ponto-flutuante.

Esta tarefa pode ser realizada com o auxílio da função parseFloat(). Veja uma página HTML completa demonstrando o seu uso:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Strings em JavaScript</title>
</head>
<body>

<script type="text/javascript">
  var valor1 = "87.32";
  var valor2 = "Arquivo";
  var valor3 = "65,54";
 
  // vamos exibir os resultados
  document.write(parseFloat(valor1) + "<br>");
  document.write(parseFloat(valor2) + "<br>");
  document.write(parseFloat(valor3));
</script>
  
</body>
</html>

Ao executarmos este código JavaScript nós teremos o seguinte resultado:

87.32
NaN
65

Note que apenas a primeira string pôde ser convertida para um valor fracionário com sucesso.

JavaScript ::: Desafios e Lista de Exercícios Resolvidos ::: JavaScript Básico

Exercício Resolvido de JavaScript - Como somar dois números em JavaScript - O operador de adição da linguagem JavaScript

Quantidade de visualizações: 1444 vezes

Pergunta/Tarefa:

Escreva um programa JavaScript para somar dois números, ou seja, dois valores numéricos inteiros. O usuário deverá informar os dois valores. Para efetuar a leitura dos números você pode usar a função window.prompt() e, para exibir o resultado, use a função window.alert().

Sua saída deverá ser parecida com:

Informe o primeiro número:
7
Informe o segundo número:
3
A soma dos números é:
10

Resposta/Solução:

Veja a resolução comentada deste exercício em JavaScript:

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

<!doctype html>
<html>
<head>
  <title>Exercícios de JavaScript</title>
</head>
<body>

<script type="text/javascript">
  // vamos ler dois números do usuário
  var num1 = Number.parseInt(window.prompt(
    "Informe o primeiro número:"));
  var num2 = Number.parseInt(window.prompt(
    "Informe o segundo número:"));

  // agora vamos somar os dois números
  var soma = num1 + num2;

  // e mostramos o resultado
  window.alert("A soma dos números é: " + soma);  
</script>
  
</body>
</html>

Mais Desafios de Programação e Exercícios e Algoritmos Resolvidos de JavaScript

Como testar se uma string está vazia em JavaScript - Desafio de Programação em JavaScript

Como somar dois números em JavaScript - O operador de adição da linguagem JavaScript - Exercícios Resolvidos de JavaScript

Como encontrar o menor valor em um array de inteiros em JavaScript - Exercícios Resolvidos de JavaScript

Como subtrair dois números em JavaScript - O operador de subtração da linguagem JavaScript - Exercício Resolvido de JavaScript

Como testar se uma variável é do tipo string em JavaScript - Desafio de Programação em JavaScript

Como multiplicar dois números em JavaScript - O operador de multiplicação da linguagem JavaScript - Desafio de Programação em JavaScript

Ler três números inteiros e indicar se eles estão em ordem crescente ou decrescente - Exercícios Resolvidos de JavaScript

Como testar se o argumento de uma função JavaScript é do tipo String - Exercícios Resolvidos de JavaScript

Veja mais Dicas e truques de JavaScript

Como obter a quantidade de argumentos fornecidos a uma função

Como ocultar um input type file e usar um botão ou uma imagem para permitir que o usuário selecione o(s) arquivo(s)

Usando childNodes para retornar uma coleção de nós filhos de um determinado elemento HTML

Como converter uma string em um valor inteiro em JavaScript usando a função parseInt()

Como obter a quantidade de arquivos que o usuário selecionou em um input type file

Como verificar se cookies estão habilitados no navegador do usuário usando JavaScript

Como usar o método getElementById() do objeto document para localizar um elemento HTML baseado em seu id usando JavaScript

Como usar o método toLocaleString para exibir a data e a hora de acordo com as configurações do computador do usuário

Como testar se uma palavra (ou frase) é palíndroma em JavaScript

Criando controles de formulários HTML dinamicamente usando o método createElement()

Dicas e truques de outras linguagens

VB.NET - Como usar o laço Do...While...Loop do VB.NET

Delphi - Como usar a função ReverseString() do Delphi para inverter o texto de uma palavra ou frase em Delphi - Invertendo o conteúdo de uma string usando Delphi

Delphi - Como calcular o seno de um número ou ângulo em Delphi usando a função Sin()

Java - Exercícios Resolvidos de Java - Como contar de 10 até 0 usando recursividade em Java - Funções recursivas em Java

C++ - Como usar o tipo de dados long ou long int da linguagem C++

C# - Como testar se uma string é null ou vazia em C# usando a função IsNullOrEmpty() da classe String

Java - Exercícios Resolvidos de Java - Escreva um programa (algorítmo) Java que usa o laço do...while para ler um número indeterminado de idades. A condição de parada do laço é o valor da idade igual a 0

PHP - PHP para iniciantes - Como contar a quantidade de palavras em uma string usando as funções explode() e count() do PHP

Java - Exercícios Resolvidos de Java - Usando um laço for para solicitar ao usuário que informe 10 valores inteiros e mostrar quantos valores negativos foram informados

Java - Como criar uma classe Java e usar new para criar novas instâncias da mesma

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e Fornecedores

Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais

Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades
Tenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby

Você está aqui: JavaScript ::: Web Audio API ::: OscillatorNode

Como criar um oscilador de onda senoidal em JavaScript usando a Web Audio API e um OscillatorNode

JavaScript ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas

Como calcular o comprimento da hipotenusa em JavaScript dadas as medidas do cateto oposto e do cateto adjascente

JavaScript ::: Dicas & Truques ::: Strings e Caracteres

Como converter uma string em um valor de ponto-flutuante em JavaScript usando a função parseFloat()

JavaScript ::: Desafios e Lista de Exercícios Resolvidos ::: JavaScript Básico

Exercício Resolvido de JavaScript - Como somar dois números em JavaScript - O operador de adição da linguagem JavaScript

Questões de Concurso para Engenharia Civil

Exercícios Resolvidos

Bancos de Dados

Questões de Concurso

Frameworks

Projetos e Códigos Fonte

Especializações

Calculadoras

Ferramentas

Todas as Linguagens, Frameworks, Biliotecas e Bancos de Dados

Compre pelo WhatsApp: +55 (062) 98553-6711

E-Book 650 Dicas e Truques de Python - Com comentários em Português

PDF COM 1.200 PÁGINAS

Apenas R$ 32,90