How can I define SoundManager2 as a Media Element Source in Web Audio API

Question

I know that web audio api can take an <audio> element as it's media source, (for frequency data, etc), however SoundManager2 does not seem to create an <audio> tag, and as such I'm not sure what I would provide as the source, in order to play sounds using SoundManager2, and use that as a source to provide visualizations using web audio.

The reason for the split is because SoundManager2 is well documented and can relay information such as bytes loaded, schedule events at certain times in audio, and other such things that either don't yet exist or are simply hard to find out about in the web audio api. However I would like to avoid the requirement of flash for visualizations in SoundManager and use Web Audop API for that side of things.

Any help would be appreciated, thanks.

Answer 1

I do not know how this would works in soundmanager2, but in plain javascript it is pretty simple. You just create a MediaElementNode and assing an audio or video tag to it. So my guess is that you must specify the html object to soundmanager2. (you can either do this by creating an audio element in javascript: player = new Audio(); or by adding the <audio id="player"></audio> tags to your html and get them with document.getElementById('player');

Basic example:

function init() {
    player = new Audio();
    window.context = new webkitAudioContext()||AudioContext();
    audioSource = context.createMediaElementSource(player);
    audioSource.connect(context.destination);
}

Source jsfiddle with example

I hope this will give you a step in the right direction, to find how to do this in soundmanager2.

Answer 2

The <audio> element is really buried in SoundManager2, but you can find it like this:

soundManager.onready = function() {
    audioElement = soundManager.sounds[soundManager.soundIDs[0]]._a;
    webAudioSource = audioContext.createMediaElementSource(audioElement);
}

Like in @MarijnS95's example, you'll need to connect the Media Element Source Node to the Audio Context Destination Node in order to hear it. This is because Web Audio hijacks the element's audio output. But SoundManager will still be able to control the play/pause/timing functionality and now you can make visualizations / process the sound with web audio.