5-Dynamic Sound Synthesis with Web Audio API: Advanced Techniques and Applications

Explore the intricate details of dynamic sound generation using the Web Audio API. This comprehensive guide delves into oscillators, gain nodes, real-time interaction, pitch modulation, performance optimization, and advanced audio techniques like spatial audio and convolution effects. Perfect for developers aiming to create immersive audio experiences in web applications.

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

Web Audio API dynamic sound synthesis oscillators gain nodes pitch modulation interactive audio real-time audio audio graph spatial audio convolution effects sound design audio optimization immersive audio applications

video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Sound Source with Web Audio API</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        input[type="range"] {
            width: 300px;
        }
        div {
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Dynamic Sound Source with Web Audio API</h1>
    <div>
        <button id="start">Start Sound</button>
        <button id="stop">Stop Sound</button>
    </div>
    <div>
        <label for="frequency">Frequency: </label>
        <input type="range" id="frequency" min="100" max="2000" value="440">
        <span id="freq-value">440 Hz</span>
    </div>
    <div>
        <label for="volume">Volume: </label>
        <input type="range" id="volume" min="0" max="1" step="0.01" value="0.5">
        <span id="vol-value">0.5</span>
    </div>
    <div>
        <label for="pitch">Pitch: </label>
        <input type="range" id="pitch" min="0.5" max="2" step="0.01" value="1">
        <span id="pitch-value">1.00</span>
    </div>
    <script>
        // Initialize Web Audio API components
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        let oscillator = null; // Oscillator for generating sound
        let gainNode = audioContext.createGain(); // Gain node to control volume
        let pitchNode = null; // PlaybackRate control

        // References to DOM elements
        const startButton = document.getElementById('start');
        const stopButton = document.getElementById('stop');
        const frequencySlider = document.getElementById('frequency');
        const volumeSlider = document.getElementById('volume');
        const pitchSlider = document.getElementById('pitch');
        const freqValue = document.getElementById('freq-value');
        const volValue = document.getElementById('vol-value');
        const pitchValue = document.getElementById('pitch-value');

        // Function to start the sound
        function startSound() {
            if (oscillator) return; // Prevent multiple oscillators
            oscillator = audioContext.createOscillator(); // Create a new oscillator
            oscillator.type = 'sine'; // Set waveform type
            oscillator.frequency.value = parseFloat(frequencySlider.value); // Set initial frequency

            // Create a playback rate adjustment node
            pitchNode = audioContext.createGain();
            oscillator.playbackRate = parseFloat(pitchSlider.value);

            // Connect nodes: oscillator -> pitchNode -> gainNode -> destination
            oscillator.connect(pitchNode).connect(gainNode).connect(audioContext.destination);
            gainNode.gain.value = parseFloat(volumeSlider.value); // Set initial volume
            oscillator.start(); // Start the oscillator
        }

        // Function to stop the sound
        function stopSound() {
            if (oscillator) {
                oscillator.stop(); // Stop the oscillator
                oscillator.disconnect(); // Disconnect to free resources
                oscillator = null; // Reset oscillator variable
            }
        }

        // Update frequency dynamically based on slider value
        frequencySlider.addEventListener('input', () => {
            const frequency = parseFloat(frequencySlider.value);
            freqValue.textContent = `${frequency} Hz`;
            if (oscillator) {
                oscillator.frequency.value = frequency; // Update frequency in real-time
            }
        });

        // Update volume dynamically based on slider value
        volumeSlider.addEventListener('input', () => {
            const volume = parseFloat(volumeSlider.value);
            volValue.textContent = volume.toFixed(2);
            gainNode.gain.value = volume; // Update gain in real-time
        });

        // Update pitch dynamically based on slider value
        pitchSlider.addEventListener('input', () => {
            const pitch = parseFloat(pitchSlider.value);
            pitchValue.textContent = pitch.toFixed(2);
            if (oscillator) {
                oscillator.detune.value = (pitch - 1) * 100; // Adjust pitch in real-time
            }
        });

        // Attach event listeners to buttons
        startButton.addEventListener('click', startSound);
        stopButton.addEventListener('click', stopSound);
    </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