Come produrre un suono di sinusoide con JavaScript e jQuery, scegliendo la frequenza: guida completa e codice esemplificativo

Le onde sonore sono delle vibrazioni di tipo meccanico che si propagano attraverso un mezzo, come ad esempio l’aria, l’acqua o i solidi. Quando una sorgente sonora, come ad esempio una persona che parla o un altoparlante, emette dei suoni, le onde sonore si propagano a partire dalla sorgente in tutte le direzioni.

Le onde sonore hanno alcune caratteristiche fondamentali, tra cui:

Frequenza: la frequenza è il numero di oscillazioni (o cicli) delle onde sonore che si verificano in un secondo ed è espressa in Hertz (Hz). La frequenza determina la tonalità del suono: le onde sonore con frequenza più bassa corrispondono a suoni gravi, mentre quelle con frequenza più alta corrispondono a suoni acuti.
Ampiezza: l’ampiezza è l’altezza massima raggiunta dall’onda sonora rispetto alla sua posizione di riposo ed è espressa in decibel (dB). L’ampiezza determina l’intensità del suono: le onde sonore con ampiezza maggiore corrispondono a suoni più intensi.
Lunghezza d’onda: la lunghezza d’onda è la distanza tra due punti successivi dell’onda che si trovano nella stessa fase di oscillazione ed è espressa in metri. La lunghezza d’onda è inversamente proporzionale alla frequenza: onde sonore con frequenza maggiore hanno lunghezza d’onda minore e viceversa.
Velocità di propagazione: la velocità di propagazione delle onde sonore dipende dal mezzo attraverso cui si propagano e dalle sue proprietà fisiche, come la densità e la compressibilità. Ad esempio, le onde sonore si propagano più velocemente attraverso i solidi rispetto all’aria.

Le onde sonore possono essere rappresentate graficamente tramite un’onda sinusoidale, dove l’asse delle ascisse rappresenta il tempo e quello delle ordinate rappresenta l’ampiezza dell’onda.

In questo articolo vedremo come creare un piccolo script per generare un suono della frequenza desiderata:

Forma dell’onda generata

<form>
  <label for="freq-input">Inserisci la frequenza del suono Hz:</label>
  <input type="number" id="freq-input" name="freq-input"  value="250" required="">
  <button type="button" id="play-btn">Play</button>
  <button type="button" id="stop-btn">Stop</button>
</form>

Questo è il codice html del form per gestire la frequenza del suono, il primo input di type number può essere modificato dall'utente al fine di scegliere la frequenza desiderata.

I bottoni Play e Stop richiamano le funzioni javascript seguenti:

Copy code
// Definiamo la variabile oscillator come globale
let oscillator;

// Funzione per avviare la riproduzione del suono
function playSound() {
  let freq = $("#freq-input").val();
  let audioContext = new AudioContext();
  oscillator = audioContext.createOscillator();
  oscillator.frequency.value = freq;
  oscillator.connect(audioContext.destination);
  oscillator.start();
}

// Funzione per fermare la riproduzione del suono
function stopSound() {
  oscillator.stop();
}

// Gestione degli eventi dei bottoni
$(document).ready(function() {
  $("#play-btn").click(playSound);
  $("#stop-btn").click(stopSound);
});

Dichiaro la variabile globale oscillator, in quanto deve essere accessibile da entrambe le funzioni, playSound() e stopSound().

Inoltre il codice su wordpress va inserito all'interno del seguente blocco altrimenti $ risulta non definito.

     jQuery(function($) {
        // codice del blocco superiore
     });

Infine ho aggiunto anche un canvas un elemento html che mi permette di disegnare tramite javascript la forma dell'onda generata.

function canvas_creation( freq ) {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  
  // Impostiamo lo stile del grafico
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 2;
  ctx.strokeStyle = "#000000";
  
  // Disegniamo il grafico della sinusoide
  ctx.beginPath();
  for (let x = 0; x < canvas.width; x++) {
    let y = canvas.height / 2 + Math.sin(x * freq / canvas.width * 2 * Math.PI) * canvas.height / 2;
    if (x === 0) {
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  }
  ctx.stroke();
}

Il codice finale è il seguente:

<form>
  <label for="freq-input">Inserisci la frequenza del suono Hz:</label>
  <input type="number" id="freq-input" name="freq-input"  value="250" required="">
  <button type="button" id="play-btn">Play</button>
  <button type="button" id="stop-btn">Stop</button>
</form>
<div class="contenitore" style="margin:0 auto;">
<p> Forma dell'onda generata </p>
<canvas id="canvas" width="600" height="200"></canvas>
</div>

<script>
// Funzione per avviare la riproduzione del suono
      jQuery(function($) {
// Definiamo la variabile oscillator come globale
let oscillator;
 // Recuperiamo il canvas e il contesto 2D del canvas
function canvas_creation( freq ) {
  let canvas = document.getElementById("canvas");
  let ctx = canvas.getContext("2d");
  
  // Impostiamo lo stile del grafico
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 2;
  ctx.strokeStyle = "#000000";
  
  // Disegniamo il grafico della sinusoide
  ctx.beginPath();
  for (let x = 0; x < canvas.width; x++) {
    let y = canvas.height / 2 + Math.sin(x * freq / canvas.width * 2 * Math.PI) * canvas.height / 2;
    if (x === 0) {
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  }
  ctx.stroke();
}

function playSound() {
  let freq = $("#freq-input").val();
  let audioContext = new AudioContext();
  oscillator = audioContext.createOscillator();
  oscillator.frequency.value = freq;
  oscillator.connect(audioContext.destination);
 canvas_creation(freq);
  oscillator.start();
}

// Funzione per fermare la riproduzione del suono
function stopSound() {
  oscillator.stop();
}

// Gestione degli eventi dei bottoni


$(document).ready(function() {
  $("#play-btn").click(playSound);
  $("#stop-btn").click(stopSound);
});
        
     });
</script>

Lascia un commento Annulla risposta