Double your audio experience with Webaudio by playing the sound twice

Question

Double your audio experience with Webaudio by playing the sound twice

While working on WebAudio experimentation, I encountered an issue with loading a sound using the JavaScript code below.

function playAudio(){
    var audio = document.getElementById('music');
    var audioContext = new webkitAudioContext();
    var analyser = audioContext.createAnalyser();
    var source = audioContext.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(audioContext.destination);
    audio.play();
}

In addition to playing the sound, I want to visualize it using canvas by utilizing the analyser. The function works correctly the first time it is used, but upon executing it a second time, an error occurs.

> playAudio(); // successfully plays sound
> playAudio(); // error 
InvalidStateError: Failed to execute 'createMediaElementSource' on 'AudioContext': invalid HTMLMediaElement.

The identified cause of this error lies within this specific line of code:

var source = audioContext.createMediaElementSource(audio);

Even though I am creating a new audio context, attempting to reuse the same audio element in the HTML leads to this error.

javascript audio web-audio-api

Answer 1

Answer №1

Utilizing a dynamic approach for creating the audio element (as demonstrated in this fiddle, http://jsfiddle.net/ikerr/WcXHK/), I successfully achieved the ability to play the song in a repetitive manner.

function createAudioElement(urls) {
    var audioElement = document.createElement("audio");

    audioElement.autoplay = true;
    audioElement.loop = false;

    for (var i = 0; i < urls.length; ++i) {
        var typeStr = "audio/" + urls[i].split(".").pop();

        if (audioElement.canPlayType === undefined ||
            audioElement.canPlayType(typeStr).replace(/no/, "")) {
            var sourceElement = document.createElement("source");
            sourceElement.type = typeStr;
            sourceElement.src = urls[i];
            audioElement.appendChild(sourceElement);
            console.log("Using audio asset: " + urls[i]);
        }
    }

    return audioElement;
}

var audioContext = new webkitAudioContext();

function playAudio(){

    var audio = createAudioElement(['http://www.soundjay.com/button/button-1.mp3' ]);      

    if(audio){
        var source = audioContext.createMediaElementSource(audio);
        var analyser = audioContext.createAnalyser();
        source.connect(analyser);
        analyser.connect(audioContext.destination);
        audio.play();
    }
}

playAudio(); // works fine, i can hear a sound
playAudio();
//setTimeout(playAudio,2000);

Demo : http://jsfiddle.net/raathigesh/fueg3mk7/10/

Answer 2

Utilizing a dynamic approach for creating the audio element (as demonstrated in this fiddle, http://jsfiddle.net/ikerr/WcXHK/), I successfully achieved the ability to play the song in a repetitive manner.

function createAudioElement(urls) {
    var audioElement = document.createElement("audio");

    audioElement.autoplay = true;
    audioElement.loop = false;

    for (var i = 0; i < urls.length; ++i) {
        var typeStr = "audio/" + urls[i].split(".").pop();

        if (audioElement.canPlayType === undefined ||
            audioElement.canPlayType(typeStr).replace(/no/, "")) {
            var sourceElement = document.createElement("source");
            sourceElement.type = typeStr;
            sourceElement.src = urls[i];
            audioElement.appendChild(sourceElement);
            console.log("Using audio asset: " + urls[i]);
        }
    }

    return audioElement;
}

var audioContext = new webkitAudioContext();

function playAudio(){

    var audio = createAudioElement(['http://www.soundjay.com/button/button-1.mp3' ]);      

    if(audio){
        var source = audioContext.createMediaElementSource(audio);
        var analyser = audioContext.createAnalyser();
        source.connect(analyser);
        analyser.connect(audioContext.destination);
        audio.play();
    }
}

playAudio(); // works fine, i can hear a sound
playAudio();
//setTimeout(playAudio,2000);

Demo : http://jsfiddle.net/raathigesh/fueg3mk7/10/

Double your audio experience with Webaudio by playing the sound twice

Answer №1

Similar questions

Bring in a 3-dimensional model using JSONLoader in three.js

When attempting to display a sub view in Express, a 404 error is encountered

What sets cross-fetch apart from isomorphic-fetch?

I'm interested in clicking on an image within a div to trigger a page refresh and then automatically hide the div once the page has refreshed

Numerous SVGs sharing identical IDs

Would you like to learn how to extract data from a specific textbox using jQuery and save it to a variable when the textbox is in

I'm having trouble with my AJAX Update Panel. Can someone please help me figure out what I'm doing wrong?

"Bootstrap is functioning properly on my local environment, but it seems to

Text input setting for jQuery UI Slider

The step-by-step guide to testing an Angular promise using Jasmine

CSS file not loading in an ExpressJS application

Expo: A guide on integrating expo code into an existing Android project

Obtaining JSON information within the AngularJS Scope

Loading a Vuetify component dynamically within a Vue 3 environment

Enable the ability to upload multiple images on a single page using droparea.js

Ways to identify when a person has scrolled a specific distance

React-scripts testing now displays error messages without a traceback

Having trouble with enter key input not triggering?

Exploring the World of Vue.js Object Imports

Error: Chrome is reporting an "Unexpected token :" while Firefox is showing a "SyntaxError: missing ; before statement" issue