2008-10-09 10 views
79

Estoy escribiendo una aplicación dhtml que crea una simulación interactiva de un sistema. Los datos para la simulación se generan a partir de otra herramienta, y ya hay una gran cantidad de datos heredados.¿Forma de navegación cruzada entre navegadores para reproducir sonido desde Javascript?

Algunos pasos en la simulación requieren que reproduzcamos clips de audio "en voz alta". No he podido encontrar una manera fácil de lograr esto en varios navegadores.

Soundmanager2 viene bastante cerca de lo que necesito, pero solo reproducirá archivos mp3, y los datos heredados también pueden contener algunos archivos .wav.

¿Alguien tiene alguna otra biblioteca que pueda ayudar?

+5

Me alegro de que hayas encontrado tu solución, pero independientemente de eso, es posible que quieras considerar la conversión de esos archivos .wav a archivos .mp3. Si baja un poco la calidad del sonido, puede obtener los tamaños de archivo desde 1/3 hasta 1/10 del tamaño de un archivo de onda. Podría hacer que las cosas sean un poco más receptivas al reproducir sonidos. – infocyde

Respuesta

62

Usted tiene que incluir un plug-in como el Real Audio o QuickTime para manejar el archivo .wav, pero esto debería funcionar ...

//====================================================================== 
var soundEmbed = null; 
//====================================================================== 
function soundPlay(which) 
    { 
    if (!soundEmbed) 
     { 
     soundEmbed = document.createElement("embed"); 
     soundEmbed.setAttribute("src", "/snd/"+which+".wav"); 
     soundEmbed.setAttribute("hidden", true); 
     soundEmbed.setAttribute("autostart", true); 
     } 
    else 
     { 
     document.body.removeChild(soundEmbed); 
     soundEmbed.removed = true; 
     soundEmbed = null; 
     soundEmbed = document.createElement("embed"); 
     soundEmbed.setAttribute("src", "/snd/"+which+".wav"); 
     soundEmbed.setAttribute("hidden", true); 
     soundEmbed.setAttribute("autostart", true); 
     } 
    soundEmbed.removed = false; 
    document.body.appendChild(soundEmbed); 
    } 
//====================================================================== 
+14

Nunca entiendo los votos a la baja. Esto funciona. Lo tengo desplegado en mi aplicación. ¿Por qué merece un voto negativo? – dacracot

+1

Como la persona que hizo la pregunta, me pregunto también. Me parece una solución bastante buena/simple. ¿Alguien podría comentar sobre lo que está mal? –

+2

No sé por qué no votaron, tal vez por el uso de las palabras "audio real" o "quicktime" .. ?? ¿Tal vez la persona que te votó negativamente no tenía idea de cómo se hizo? En cuanto a mí, +1, su código es casi el mismo que el utilizado en el complemento jQuery indicado en la respuesta más aceptada ... – karlipoppins

8

Creo que la forma más simple y conveniente sería reproducir el sonido con un pequeño clip de Flash. Aprecio que no es una solución JavaScript, pero es la forma más fácil de lograr su objetivo

Algunos enlaces adicionales de los últimos similar question:

+1

Pero no puedo encontrar ninguna solución flash que reproduzca archivos WAV. Parece que flash solo es compatible con MP3. Voy a ver el plugin de scriptaculous, pero odio incluir toda una biblioteca extra para esta funcionalidad. –

9

El código de dacracots es limpio, básico, pero quizás escrito sin pensarlo dos veces. Por supuesto, comprueba primero la existencia de una incrustación anterior y guarda las líneas de creación de incrustaciones duplicadas .

var soundEmbed = null; 
//===================================================================== 

function soundPlay(which) 
{ 
    if (soundEmbed) 
     document.body.removeChild(soundEmbed); 
    soundEmbed = document.createElement("embed"); 
    soundEmbed.setAttribute("src", "/snd/"+which+".wav"); 
    soundEmbed.setAttribute("hidden", true); 
    soundEmbed.setAttribute("autostart", true); 
    document.body.appendChild(soundEmbed); 
} 

Hablamos de los pensamientos mientras buscamos una solución para una situación algo similar. Desafortunadamente mi navegador Mozilla/5.0 (X11; U; Linux i686; en-US; rv: 1.9.0.15) Gecko/2009102814 Ubuntu/8.04 (resistente) Firefox/3.0.15 muere al intentar esto.

Después de instalar las últimas actualizaciones, Firefox aún se cuelga, la ópera se mantiene activa.

5

Puede usar la etiqueta HTML5 <audio>.

+0

La pregunta específicamente solicitó una solución "multiplataforma, navegador cruzado". La etiqueta HTML5 '

+0

NB en 2018 HTML5 Audio es compatible con todos excepto con Opera. –

6

me gustó la respuesta de dacracot ... aquí es una solución similar en jQuery:

function Play(sound) { 
    $("#sound_").remove() 
    $('body').append('<embed id="sound_" autostart="true" hidden="true" src="/static/sound/' + sound + '.wav" />'); 
} 
3
<audio controls> 
    <source src="horse.ogg" type="audio/ogg"> 
    <source src="horse.mp3" type="audio/mpeg"> 
Your browser does not support the audio element. 
</audio> 

Ver http://www.w3schools.com/html/html5_audio.asp para más detalles.

1

Hay una solución mucho más simple para esto en lugar de tener que recurrir a complementos. IE tiene su propia propiedad bgsound y hay otra manera de hacerlo funcionar para todos los demás navegadores.Mira mi tutorial aquí = http://www.andy-howard.com/how-to-play-sounds-cross-browser-including-ie/index.html

+0

Su solución parece interesante, lo intentaré. Tenga en cuenta que hay un comentario en la página que ha vinculado para indicar que en IE11, el audio se está ejecutando en un bucle sin fin. ¿Es esto todavía un problema? ¿Hay alguna forma de evitarlo? –

Cuestiones relacionadas