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: 433 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 ::: Formulários

Formulários HTML - Como marcar ou desmarcar todas as checkboxes de um formulário HTML de uma só vez usando JavaScript

Quantidade de visualizações: 18229 vezes
Nesta dica mostrarei como é possível clicar em um botão (pode ser um link também) e chamar uma função JavaScript que marca ou desmarca todos os elementos HTML checkbox de uma só vez. Para isso usaremos o método getElementsByName() para retornar todas as checkbox e em seguida manipular sua propriedade checked.

Veja a imagem abaixo:



E agora o código HTML e JavaScript completo:

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

<html>
<head>
<title>Estudando JavaScript</title>
</head>
<body>
 
<form name="teste">
  <input type="checkbox" name="linguagem">Java
  <input type="checkbox" name="linguagem">Delphi
  <input type="checkbox" name="linguagem">C++
</form>
 
<a href="javascript:marcar()">Marcar Todas</a> | 
<a href="javascript:desmarcar()">Desmarcar Todas</a>
 
<script language="JavaScript">
  function marcar(){
    var boxes = document.getElementsByName("linguagem");
    for(var i = 0; i < boxes.length; i++)
      boxes[i].checked = true;
  }
   
  function desmarcar(){
    var boxes = document.getElementsByName("linguagem");
    for(var i = 0; i < boxes.length; i++)
      boxes[i].checked = false;
  }
</script>
 
</body>
</html>



JavaScript ::: Dicas & Truques ::: Tratamento de Erros

Como retornar o nome ou tipo de exceção de um erro em JavaScript usando a propriedade name do objeto Error

Quantidade de visualizações: 6934 vezes
Em várias situações nós precisamos saber o nome do tipo de erro de tempo de execução em JavaScript. Para isso nós podemos usar a propriedade name do objeto Error.

Veja um código JavaScript completo 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>Estudos JavaScript</title>
</head>
<body>

<script language="javascript">
  // o trecho de código a seguir vai provocar
  // um erro de tempo de execução em JavaScript
  try{
    // y não foi definido
    var x = y;
  }
  catch(e){
    document.write("Tipo do erro: " + e.name);
  }
</script>
  
</body>
</html>

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

Tipo do erro: ReferenceError

A propriedade name do objeto Error pode retornar os seguintes valores:

EvalError - Um erro provocado pela função eval.
RangeError - Um erro provocado por um número fora da faixa permitida.
ReferenceError - Uma referência ilegal provocou o erro.
SyntaxError - Um erro de sintáxe.
TypeError - Um erro provocado por uma conversão de tipos.
URIError - Provocado por um erro na função encodeURI().


JavaScript ::: DOM (Document Object Model) ::: window Object (Objeto window)

Como usar o objeto window em suas aplicações HTML + JavaScript

Quantidade de visualizações: 8650 vezes
O objeto window representa a janela do browser, uma janela em um frame ou janela de diálogo contendo um documento HTML. Este objeto fornece várias informações a respeito da janela (name, navigator, location, history, etc.), permite acesso ao documento contido na janela e suporta vários métodos úteis (alert(), confirm(), addEventListener(), attachEvent(), etc).

Veja uma página HTML na qual temos um código JavaScript que acessa a janela atual e usa seu método alert() para exibir uma mensagem ao usuário:

----------------------------------------------------------------------
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">
  // vamos exibir uma mensagem ao usuário
  window.alert("JavaScript é muito bacana!");
</script>

</body>
</html>

O objeto window pode também representar uma janela contida em um frame ou em um elemento iframe, ou ainda em uma janela secundária (criada com os métodos open(), showModalDialog() ou showModelessDialog()). Eis algumas observações que devem ser bem memorizadas:

a) Se a janela estiver contida em um frame ou elemento iframe, ela é uma janela filha da janela que contém o elemento frame. Para obter a janela mãe só precisamos usar a propriedade parent da janela filha. Veja:

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

<script type="text/javascript">
  // vamos obter a janela mãe
  var janela_mae = window.parent;
</script>

b) Se a janela for aberta por meio dos métodos open(), showModalDialog() ou showModelessDialog(), então a janela que a criou pode ser acessada por meio da propriedade opener.

Os membros da janela atual podem ser acessados diretamente, sem a necessidade de passarmos pelo objeto window, ou seja, podemos usar alert() em vez de window.alert(), ainda que a última forma é a preferida.

O objeto window está disponível para acesso a partir de qualquer ponto de nossos códigos JavaScript. Assim, devemos nos esforçar ao máximo para não termos variáveis com o mesmo nome das propriedades e métodos deste objeto.

Dica escrita e testada no Internet Explorer (IE 8) e no Firefox 3.6.


Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica

Viscosidade dinâmica

A viscosidade cinemática de um óleo lubrificante é de 0,028m2/s, e seu peso específico relativo é de 0,85. Qual a sua viscosidade dinâmica, em Pa.s? Sabe-se que a aceleração gravitacional local é de 10m/s2.

A) 233Pa.s.

B) 85Pa.s.

C) 85000Pa.s.

D) 23,8Pa.s.

E) 2,38Pa.s.
Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica

Bombas hidráulicas

As bombas hidráulicas são um grupo de máquinas hidráulicas muito comum em sistemas de abastecimento e distribuição de água de uma cidade. Resumidamente, as bombas captam água bruta e a transportam para uma estação de tratamento para que ela seja adequada aos parâmetros de potabilidade antes do fornecimento para os usuários.

Sobre as bombas hidráulicas, o que é correto afirmar?

A) As bombas hidráulicas podem ser dividas em: centrífugas, rotativas, de êmbolo e do tipo de poços profundos.

B) As bombas hidráulicas podem ser dividas em: centrípetas, rotacionais, de pistão e do tipo poços largos-rasos.

C) As bombas hidráulicas podem ser divididas em bombas de deslocamento positivo e bombas centrífugas.

D) As bombas hidráulicas podem ser agrupadas junto com as turbinas hidráulicas no grupo de máquinas fixas.

E) As bombas centrífugas não são muito utilizadas, apesar de sua aplicação em baixas pressões e altas vazões.
Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica

Fórmula de Hazen-Williams

A fórmula de Hazen-Williams (1903) é resultado de um estudo estatístico com grande número de dados experimentais, recomendada para escoamento turbulento de transição, água a 20ºC e diâmetro maior ou igual a 50mm.

Calcule o diâmetro de uma tubulação de aço (C=90), com 1.000m de comprimento e perda de carga de 51m, cuja vazão é de 200l/s.

A) Aproximadamente 0,3m de diâmetro.

B) Aproximadamente 0,4m de diâmetro.

C) Aproximadamente 0,1m de diâmetro.

D) Aproximadamente 0,5m de diâmetro.

E) Aproximadamente 0,2m de diâmetro.
Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica

Número de Reynolds

O número de Reynolds (abreviado como Re) é utilizado para o cálculo do regime de escoamento de um fluido no interior de um tubo ou de um duto. Considere que um sistema hidráulico opera com óleo SAE 10W, de densidade igual a 920kg/m3 e viscosidade dinâmica de 0,018kg/(m.s), à temperatura de 55°C. Sabendo que o fluido escoa a uma velocidade média de 0,147m/s, e que o tubo tem 1m de diâmetro, qual é o número de Reynolds para o escoamento?

A) 7.513,33.

B) 2.300.

C) 112,65.

D) 715,33.

E) 1.126,50.
Verificar Resposta Estudar Cards Todas as Questões

Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais

Sistema domiciliar de abastecimento de água

Uma instalação hidrossanitária será construída numa residência. Ela apresenta dois banheiros, uma cozinha e uma área de serviços. Cada banheiro tem uma bacia com caixa de descarga, um chuveiro elétrico e um lavatório. A cozinha apresenta duas pias, e a área de serviços tem um tanque e duas torneiras de uso geral.



Com base nesses dados, qual é vazão estimada de água fria em função dos pesos atribuídos às peças de utilização, em litros por segundo?

A) 0,57.

B) 0,65.

C) 0,68.

D) 0,78.

E) 0,91
Verificar Resposta Estudar Cards Todas as Questões

Desafios, Exercícios e Algoritmos Resolvidos de JavaScript

Veja mais Dicas e truques de JavaScript

Dicas e truques de outras linguagens

Códigos Fonte

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e FornecedoresSoftware 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 funcionalidadesControle 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: Delphi
6º lugar: C
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2024 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 31 usuários muito felizes estudando em nosso site.