Web Audio API - get Buffer from MediaElementAudioSourceNode

3,661 views
Skip to first unread message

Max Gherkins

unread,
Jul 8, 2012, 4:24:29 PM7/8/12
to Chromium HTML5
Hey,

is there a way to use the AudioBuffer from a
MediaElementAudioSourceNode as a BufferSourceNode?

I'd really love to use methods like noteOn and noteGrain on a audio
source retrieved from a <audio/> element.


So that you could have something like:

​var context = new webkitAudioContext();
var mediaSource = context.createMediaElementSource( myAudioElement );
var bufferSource = context.createBufferSource();

bufferSource.buffer = mediaSource.getBuffer() // <- fantasy code...

bufferSource.connect(context.destination);
bufferSource.noteOn(0);

Is that possible by any chance ?

Of course there's the possibilty of loading the AudioData directly
into the buffer via XHR request, but the request underlies some
restrictions (hello CORS) which the audio element does not.


Thank you in advance!


Cheers

Max




PhistucK

unread,
Jul 12, 2012, 3:01:07 AM7/12/12
to Max Gherkins, Chromium HTML5
I am not familiar with the Web Audio API enough, but if you add the "crossorigin" attribute to the audio element, does that give you more capabilities?

PhistucK




Max




--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.


Max Gherkins

unread,
Jul 12, 2012, 3:51:39 AM7/12/12
to chromiu...@chromium.org, Max Gherkins
Hello,

thanks for your reply.
The audio element actually loads cross-domain content without problems. 
I don't even need to add the attribute.

The question is if it's possible the get the audio buffer from an audio element to use it in a buffersourcenode, which would bring the benefit 
of using methods like noteOn(), noteGrain() etc.
(I don't even know if there's a way to do this)

Of course i could load the audiodata directly via XHR request, but this again wouldn't work with cross domain requests...



Cheers


Max
To unsubscribe from this group, send email to chromium-html5+unsubscribe@chromium.org.

PhistucK

unread,
Jul 12, 2012, 5:18:37 AM7/12/12
to Max Gherkins, chromiu...@chromium.org
I know it is possible, but I thought it enables more features.
Just like adding it to <video> allows you to add screenshots of the video to <canvas>.

PhistucK




To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

Peter Beverloo

unread,
Jul 12, 2012, 5:27:38 AM7/12/12
to Max Gherkins, chromiu...@chromium.org
On Thu, Jul 12, 2012 at 8:51 AM, Max Gherkins <m...@web-development.cc> wrote:
Of course i could load the audiodata directly via XHR request, but this again wouldn't work with cross domain requests...

You can use XMLHttpRequest to load audio fragments to be used with the Web Audio API. See this article for more information:

For cross-domain requests using XMLHttpRequest, you can utilize CORS:

This does mean that you have to be in control of the server, as you'll have to send a Access-Control-Allow-Origin header as part of your response. The article goes into more detail on that.

Peter

To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

Max Gherkins

unread,
Jul 12, 2012, 5:36:06 AM7/12/12
to chromiu...@chromium.org, Max Gherkins
Hey,

thanks for your reply!

i'm aware of the possibility to load audio data via XHR and there's nothing wrong with that. 

I was just wondering if you could extract the audio buffer from an <audio>-element using the web audio api.

cheers

Max

Max Gherkins

unread,
Jul 12, 2012, 5:37:12 AM7/12/12
to chromiu...@chromium.org, Max Gherkins
ah, ok. I didn't get that :)


I'll give it try - thank you ! 

Chris Wilson

unread,
Jul 12, 2012, 1:36:11 PM7/12/12
to Max Gherkins, chromiu...@chromium.org
No, I don't think you can extract the buffer directly from an <audio> element in the way you're suggesting.  You may not have a full buffer (e.g. when the <audio> is being streamed).



To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

Max Gherkins

unread,
Jul 12, 2012, 5:12:34 PM7/12/12
to chromiu...@chromium.org, Max Gherkins
Thanks, you might be right that there's no way to extract the buffer.
But events like "loadeddata" would help to detect when the data is fully buffered, wouldn't they?

camwest

unread,
Aug 31, 2012, 12:27:49 PM8/31/12
to chromiu...@chromium.org, Max Gherkins
I would also like to be able to get a buffer from a MediaElementAudioSourceNode. I'd like to create a visualization waveform of the audio file loaded into player.

PhistucK



To unsubscribe from this group, send email to chromium-html...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.

To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msg/chromium-html5/-/wG4Rp-naKsYJ.

To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

Chris Wilson

unread,
Aug 31, 2012, 2:12:36 PM8/31/12
to camwest, chromiu...@chromium.org, Max Gherkins
If you want a visualization of the entire file (i.e. you're loading an entire file, not streaming), can you not just load it via XHR and CreateBuffer?  I doubt the actual buffer bits could be shared with <audio> players in many implementations anyway, and the confusion resulting in this call not always working (when it's streaming) would be hard to explain.  You can, of course, do live visualizations with RealtimeAnalyserNodes.

I guess what I'm saying is - it makes sense, if you really want this low-level access, to just use web audio end-to-end; you need to directly access the buffer anyway, so playing it yourself doesn't seem like a hard thing to take on.  Or am I missing something about the scenario?

Benjamin Rumble

unread,
May 5, 2014, 8:36:38 PM5/5/14
to chromiu...@chromium.org, m...@web-development.cc

Jari Pennanen

unread,
Oct 2, 2014, 10:58:16 AM10/2/14
to chromiu...@chromium.org, m...@web-development.cc
No it's not possible even now.

That example you linked uses the "MediaElementAudioSourceNode" which doesn't have start() and stop() methods etc. like in buffer. Reason we need the buffer is that it's programmatically better.

Yuan Yuan

unread,
Jul 25, 2018, 7:29:37 PM7/25/18
to Chromium HTML5, m...@web-development.cc
Hi Max,

I know it has been a long time since 2012. :)
I'm facing the same problem and just wondering whether you have got any solution or not.

Thanks,

Yuan

Y Simon

unread,
Jul 14, 2020, 6:06:16 AM7/14/20
to Chromium HTML5, m...@web-development.cc
Sure,

It is now 2020, still....
Reply all
Reply to author
Forward
0 new messages