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>