JavaScript: cambiar el atributo src de una etiqueta de inserción

Question

Tengo la siguiente situación.

Muestro al usuario algunos archivos de audio del servidor. El usuario hace clic en uno, luego en el archivo seleccionado se ejecuta con la carpeta y el archivo seleccionados. Lo que hace la función es cambiar la fuente del objeto incrustado. Entonces, de alguna manera, es una vista previa del archivo seleccionado antes de aceptarlo y guardar la elección del usuario. 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); 
}; 

Ahora, esto funciona bien en Firefox, Safari y Chrome, pero simplemente se niegan a cambiar la fuente, independientemente del sistema operativo.

jQuery encuentra el objeto (jQuery.size() devuelve 1), ejecuta el código, pero no cambia en el código HTML.

¿Por qué Safari me impide cambiar la fuente <embed> y cómo puedo evitar esto?

Answer 1

Debe eliminar el elemento embed y reinyectarlo con el nuevo conjunto de parámetros src.

embed como object y similares son dos elementos que, debido a sus usos especiales (video, audio, flash, activex, ...), en algunos navegadores se manejan de forma diferente a un elemento DOM normal. Por lo tanto, cambiar el atributo src podría no desencadenar la acción que espera.

Lo mejor es eliminar el objeto existente embed y reinsertarlo. Si escribe algún tipo de función de contenedor con el atributo src como parámetro de esto debería ser fácil

Answer 2

jQuery sigue el CSS-esque declaración:

En vez de hacer

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

Más bien hacer

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

De esta forma, jQuery solo recupera el objeto de id = "archivo de audio".

Answer 3

también estaba enfrentando mismo problema cuando quiero cambiar -attribute "src" del elemento "embed", así que lo que hice, es la siguiente:

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

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

Y esto va a funcionar bien en mi solicitud .

Conclusión: - Primero tiene que quitar el elemento de inserción y luego tiene que volver a insertarlo con el cambio en src.

Answer 4

Hay un error en Chrome, darle una estrella para que lo arreglen pronto: http://code.google.com/p/chromium/issues/detail?id=69648