CODEWITHSUNDEEP
htmlaudio
Sean
Sean

Reputation: 1

Web Audio API: How to load another audio file?

I want to write a basic script for HTML5 Web Audio API, can play some audio files. But I don't know how to unload a playing audio and load another one. In my script two audio files are playing in the same time,but not what I wanted.

Here is my code:

var context, 
    soundSource, 
    soundBuffer;

// Step 1 - Initialise the Audio Context
context = new webkitAudioContext();

// Step 2: Load our Sound using XHR
function playSound(url) {
    // Note: this loads asynchronously
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.responseType = "arraybuffer";

    // Our asynchronous callback
    request.onload = function() {
        var audioData = request.response;
        audioGraph(audioData);
    };

    request.send();
}

// This is the code we are interested in
function audioGraph(audioData) {
    // create a sound source
    soundSource = context.createBufferSource();

    // The Audio Context handles creating source buffers from raw binary
    soundBuffer = context.createBuffer(audioData, true/* make mono */);

    // Add the buffered data to our object
    soundSource.buffer = soundBuffer;

    // Plug the cable from one thing to the other
    soundSource.connect(context.destination);

    // Finally
    soundSource.noteOn(context.currentTime);
}

// Stop all of sounds
function stopSounds(){
    // How can do this?
}


// Events for audio buttons
document.querySelector('.pre').addEventListener('click', 
    function () {
        stopSounds();
        playSound('http://thelab.thingsinjars.com/web-audio-tutorial/hello.mp3');
    }
);
document.querySelector('.next').addEventListener('click',
    function() {
        stopSounds();
        playSound('http://thelab.thingsinjars.com/web-audio-tutorial/nokia.mp3');
    }
);

Upvotes: 0

Views: 3038

Answers (1)

Boris Smus
Boris Smus

Reputation: 8472

You should be pre-loading sounds into buffers once, at launch, and simply resetting the AudioBufferSourceNode whenever you want to play it back.

To play multiple sounds in sequence, you need to schedule them using noteOn(time), one after the other, based on buffer respective lengths.

To stop sounds, use noteOff.

Sounds like you are missing some fundamental web audio concepts. This (and more) is described in detail and shown with samples in this HTML5Rocks tutorial and the FAQ.

Upvotes: 2

Related Questions