3-Real-Time Frequency Control with Sine Wave Oscillator Using Web Audio API

This interactive application allows users to control the frequency of a sine wave oscillator in real-time through a frequency slider. The Web Audio API is used to generate sound, and users can adjust the pitch by moving the slider. The sound can be started and stopped with the provided buttons, with the oscillator being reset each time. Ideal for sound experiments, educational purposes, and musical exploration.

1-10-web audio api-web api-orbisounds voice lab

Web Audio API frequency control sine wave oscillator real-time sound adjustment interactive audio pitch control sound synthesis audio effects frequency slider audio context gain node Web Audio sound wave generator interactive sound experiment

video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frequency Adjustment with Sine Wave</title>
</head>
<body>

    <!-- Button to start the sound -->
    <button id="startButton">Start Sound</button>

    <!-- Button to stop the sound -->
    <button id="stopButton">Stop Sound</button>

    <!-- Slider to adjust the frequency of the sine wave -->
    <input type="range" id="frequencySlider" min="20" max="2000" value="440" step="1">
    <label for="frequencySlider">Frequency (Hz): <span id="frequencyValue">440</span></label>

    <script>
        // Create an instance of AudioContext
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();

        // Variable to hold the oscillator node
        let oscillator;

        // Create a gain node to control the volume of the sound
        const gainNode = audioContext.createGain();

        // Connect the gain node to the audio context's destination (the speakers)
        gainNode.connect(audioContext.destination);

        // Function to create a new oscillator
        function createOscillator() {
            // Create a new oscillator node
            oscillator = audioContext.createOscillator();

            // Get the current value of the frequency slider
            const frequency = document.getElementById('frequencySlider').value;

            // Set the oscillator type to 'sine' for a basic sine wave
            oscillator.type = 'sine';

            // Set the frequency of the oscillator to the current value of the slider
            oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);

            // Set the gain to 0.5 (half the maximum volume)
            gainNode.gain.setValueAtTime(0.5, audioContext.currentTime);

            // Connect the oscillator to the gain node
            oscillator.connect(gainNode);
        }

        // Add an event listener for the start button to begin playing the sound
        document.getElementById('startButton').addEventListener('click', function() {
            // Create and start a new oscillator when the button is clicked (if not already playing)
            if (!oscillator || oscillator.context.state === 'closed') {
                createOscillator();
                oscillator.start();
            }
        });

        // Add an event listener for the stop button to stop the sound
        document.getElementById('stopButton').addEventListener('click', function() {
            if (oscillator) {
                // Stop the oscillator when the stop button is clicked
                oscillator.stop();
                oscillator = null; // Reset oscillator after stopping
            }
        });

        // Add an event listener for the frequency slider to adjust the frequency
        document.getElementById('frequencySlider').addEventListener('input', function(event) {
            // Get the current value from the slider and update the frequency
            const newFrequency = event.target.value;
            if (oscillator) {
                oscillator.frequency.setValueAtTime(newFrequency, audioContext.currentTime);
            }
            // Update the frequency display
            document.getElementById('frequencyValue').textContent = newFrequency;
        });
    </script>

</body>
</html>

CODE SIMULATION

kod

Facebook | Twitter | Linkedin | Whatsapp

index 1-10-web audio api ses oynatma: ba web audio api i frekans ayarı: birden fazla se dinamik ses kay