CODEWITHSUNDEEP
javascriptjqueryhtml
Thomas Vander Stichele
Thomas Vander Stichele

Reputation: 36549

How can I add a Video/Audio object to the DOM?

I create a new HTML5 Audio() object in Javascript code in my page. I want to place this audio object inside a table cell.

typeof() tells me that Audio() gives me an object, and so .append() on the table cell jquery object does not work.

I'd like to place the object into the page and show its controls so the user can interact with it - is that possible without actually writing the 

<audio src...></audio>

HTML ?

Upvotes: 2

Views: 2743

Answers (1)

gilly3
gilly3

Reputation: 91557

The way you do it in jQuery, you use html syntax:

td.append("<audio>");

The angle brackets tell jQuery to create a new element. I'm not sure what method jQuery uses behind the scenes (whether innerHTML or doc.createElement()), but the non-jQuery approach would be:

var audioElement = td.appendChild(document.createElement("audio"));

To use the new Audio() syntax, the non-jQuery code is similar:

var audioElement = td.appendChild(new Audio);

Edit: I just tested, and jQuery seems to have no problem with this in Chrome:

td.append(new Audio());

Here's a jQuery demo: http://jsfiddle.net/gilly3/WRqyM/1

Update: IE9 doesn't seem to work. :-( IE9 just doesn't show up unless the audio has a src. I've updated the jsfiddle.

Upvotes: 3

Related Questions