JavaScript: Changing src-attribute of a embed-tag

Question

I have the following scenario.

I show the user some audio files from the server. The user clicks on one, then onFileSelected is eventually executed with both the selected folder and file. What the function does is change the source from the embedded object. So in a way, it is a preview of the selected file before accepting it and save the user's choice. A visual aid.

HTML

<embed src="/resources/audio/_webbook_0001/embed_test.mp3" type="audio/mpeg" id="audio_file">

JavaScript

function onFileSelected(file, directory) {
   jQuery('embed#audio_file').attr('src', '/resources/audio/'+directory+'/'+file);
};

Now, this works fine in Firefox, but Safari and Chrome simply refuse to change the source, regardless of Operating System.

jQuery finds the object (jQuery.size() returns 1), it executes the code, but no change in the HTML Code.

Why does Safari prevent me from changing the <embed> source and how can I circumvent this?

Answer 1

You should remove the embed element and reinject it with the new src parameter set.

embed like object and similar are two elements which, due do their special uses (video, audio, flash, activex, ...), in some browsers are handled differently from a normal DOM element. Thus changing the src attribute might not trigger the action you expect.

The best thing is to remove the existing embed object an reinsert it. If you write some kind of wrapper function with the src attribute as parameter this should be easy

Answer 2

I was also facing same issue when I want to change "src"-attribute of "embed" element, so what I did, is given below:

var parent = $('embed#audio_file').parent();
var newElement = "<embed src='new src' id='audio_file'>";

$('embed#audio_file').remove();
parent.append(newElement);

And this will work fine in my application.

Conclusion: - You need to first remove the embed element and then you have to reinsert it with change in src.

Answer 3

There is a bug in Chrome, give it a star to have it fixed sooner: http://code.google.com/p/chromium/issues/detail?id=69648

Answer 4

JQuery follows the CSS-esque declaration:

Instead of doing

function onFileSelected(file, directory) {
   jQuery('embed#audio_file').attr('src', '/resources/audio/'+directory+'/'+file);
};

Rather do

function onFileSelected(file, directory) {
   jQuery('#audio_file').attr('src', '/resources/audio/'+directory+'/'+file);
};

That way, jQuery only retrieves object of id="audio_file".