1-Exploring Sound Generation with the Web Audio API

Discover the fundamentals of the Web Audio API and learn how to create and manipulate sound in web applications. This detailed guide explains key concepts like oscillators, waveforms, frequency, and volume control, paving the way for building interactive and immersive audio experiences.

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

Web Audio API sound generation audio programming oscillators waveforms audio context gain node frequency control web audio tutorial interactive sound immersive audio audio synthesis audio effects sound manipulation

video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Audio API Example</title>
</head>
<body>
    <h1>Web Audio API Sound Generator</h1>
    <button id="playButton">Play Sound</button> <!-- Button to trigger the sound -->

    <script>
        // Create a new AudioContext (this is needed to interact with Web Audio API)
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();

        // Function to create and play a sound
        function playSound() {
            // Create an oscillator (a sound wave generator)
            const oscillator = audioContext.createOscillator();

            // Set the type of wave (sine wave in this case)
            oscillator.type = 'sine';  // Other types can be 'square', 'triangle', 'sawtooth'

            // Set the frequency of the sound (in Hz)
            oscillator.frequency.setValueAtTime(440, audioContext.currentTime); // A4 note (440Hz)

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

            // Set the volume (gain) to 0.1 (low volume)
            gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);

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

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

            // Start the oscillator (this will play the sound)
            oscillator.start();

            // Stop the oscillator after 1 second (duration of the sound)
            oscillator.stop(audioContext.currentTime + 1);
        }

        // Add an event listener to the button to trigger the playSound function when clicked
        document.getElementById('playButton').addEventListener('click', playSound);
    </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