Using Ajax to embed audio file in HTML?

[abrtlt]

I would like to have a web page in which, when the user clicks on any
of several specific elements, a specific audio file is played, without
reloading the page.
The specific audio file name is obtained from a PHP script (accessing
a MySQL database) that could be called using XMLHttpRequest and
JavaScript would write in a "div" tag an "embed and play" HTML tag
containing the audio file name.
I am not sure this would work, as the embed tag is HTML and will not be
executed as the page has already been loaded. In any case, unless I am
mistaken, JavaScript in the web page can handle only a text or XML
response, and thus I can get the audio file name, but not the file
itself. I can't pre-embed all audio files in the page because there are
too many (that is why I use MySQL to index them).
Is there any way to get round this?
Thanks!

Andrew

 

[Jeremy]

I would like to have a web page in which, when the user clicks on any
of several specific elements, a specific audio file is played, without
reloading the page.
The specific audio file name is obtained from a PHP script (accessing
a MySQL database) that could be called using XMLHttpRequest and
JavaScript would write in a "div" tag an "embed and play" HTML tag
containing the audio file name.
I am not sure this would work, as the embed tag is HTML and will not be
executed as the page has already been loaded. In any case, unless I am
mistaken, JavaScript in the web page can handle only a text or XML
response, and thus I can get the audio file name, but not the file
itself. I can't pre-embed all audio files in the page because there are
too many (that is why I use MySQL to index them).
Is there any way to get round this?
Thanks!

Andrew

According to specifications, there is no reason why a dynamically
created <object> element shouldn't work:

var obj = document.createElement("object");
obj.type = "audio/mpeg3";
obj.data = "http://my.audio.url";
document.body.appendChild(obj);

In practice, I've no idea how well that would work. It seems to work
flawlessly in Firefox, although no controls are presented (or if they
are I can't see them).

Jeremy

 

[abrtlt]

According to specifications, there is no reason why a dynamically
created <object> element shouldn't work:

var obj = document.createElement("object");
obj.type = "audio/mpeg3";
obj.data = "http://my.audio.url";
document.body.appendChild(obj);

In practice, I've no idea how well that would work. It seems to work
flawlessly in Firefox, although no controls are presented (or if they
are I can't see them).

Jeremy

Thanks. Yes, you must be right. I have a non-Ajax PHP /Javascript page
that works fine by reloading and shows (with IE) neither controls nor
separate mp3 player (I don't want them) if I use <EMBED> but starts a
WMP window if I use <OBJECT>.
Andrew

 

[Jeremy]

Thanks. Yes, you must be right. I have a non-Ajax PHP /Javascript page
that works fine by reloading and shows (with IE) neither controls nor
separate mp3 player (I don't want them) if I use <EMBED> but starts a
WMP window if I use <OBJECT>.
Andrew

You have to be careful with IE and <object> to get it to work properly.
Some finesse usually does the trick (google Flash Satay for an article
on getting <object> to work well). In any case, you should avoid
<embed> as it's not a valid element.

Jeremy