Can an SVG contain audio using javascript?

Question

I have an SVG with some basic javascript interactivity, and I would love to be able to put some audio into it as well.

To clarify:

• This is for an SVG that is by itself, not inlined in HTML
• I would prefer to avoid having to use a javascript library, but i can if it's necessary.

Any insight on how this could be accomplished?

Answer 1

If you require a browser with support for HTML5 audio, then it's possible to just put the audio elements in the svg (use the XHTML namespace for the audio element and its children). Last time I tried it didn't require a foreignObject wrapper. Here's an example showing how to do that (works in chrome, firefox and opera).

It's also possible to create HTML5 audio elements with javascript and use them inside the SVG.

Answer 2

There are SVG <audio> and <video> element tags defined in SVG 1.2 Tiny. Opera supports them but no other UA does as yet.

A solution that will work most places except IE 9/10 would be to use a <foreignObject> element with an html <audio> element as a child.

I don't think there's a good answer if you need IE9/10 support as it doesn't support <foreignObject>