¿Una forma multiplataforma y multiplataforma de reproducir sonido desde Javascript? [duplicar]

78

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.

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

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

¿Alguien tiene otras bibliotecas que puedan ayudar?

— Jake Stevenson
fuente

5

Me alegro de que haya encontrado su solución, pero independientemente de eso, es posible que desee considerar convertir esos archivos .wav a archivos .mp3. Si reduce un poco la calidad del sonido, puede reducir el tamaño de los archivos desde 1/3 hasta 1/10 del tamaño de un archivo wave. Puede hacer que las cosas sean un poco más receptivas al reproducir sonidos.

— infocyde

61

Tendrá que incluir un complemento como 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);
    }
//======================================================================

— dacracot
fuente

15

Nunca entiendo los votos negativos. Esto funciona. Lo tengo implementado en mi aplicación. ¿Por qué merece un voto negativo?

— dacracot

2

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

— koni

1

A veces creo que es porque escribí el código en lugar de llamar a la API popular actual, que como dijiste, hace exactamente lo mismo.

— dacracot

1

gran solución a mi problema también. +1.

— mauris

3

sin embargo, no parece reproducir el archivo de sonido en FF3.0. funciona en Chrome 3, IE7.

— mauris

9

Si está utilizando Prototype, la biblioteca Scriptaculous tiene una API sólida . jQuery parece tener un complemento .

— ceejayoz
fuente

5

El enlace del complemento jQuery responde con un 403.

— Arion

El segundo enlace de la respuesta está muerto: "No se puede acceder a este sitio" .

— Pang

@Pang Cada respuesta a esta pregunta está desactualizada en este momento. En estos días, querrá utilizar las API de audio HTML5 con soporte universal. Cerré esta pregunta como un duplicado de una más actualizada.

— ceejayoz

8

El código de dacracots es un dom básico limpio, pero ¿tal vez escrito sin pensarlo dos veces? Por supuesto, primero verifica la existencia de una inserción anterior y guarda las líneas de creación de inserción 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);
}

Encontré los pensamientos aquí mientras buscaba una solución para una situación similar. Desafortunadamente, mi navegador Mozilla / 5.0 (X11; U; Linux i686; en-US; rv: 1.9.0.15) Gecko / 2009102814 Ubuntu / 8.04 (hardy) Firefox / 3.0.15 muere al intentar esto.

Después de instalar las últimas actualizaciones, Firefox sigue fallando, Opera sigue vivo.

— joshoreefe
fuente

7

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

Algunos enlaces adicionales de la pregunta similar anterior :

Scriptaculous, una biblioteca de Javascript: http://github.com/madrobby/scriptaculous/wikis/sound
un proyecto Flash de código abierto: Easy Musicplayer For Flash http://emff.sourceforge.net/

— Ilya Kochetov
fuente

1

Pero no puedo encontrar ninguna solución flash que reproduzca archivos WAV. Parece que el flash solo admite MP3. Veré el complemento de scriptaculous, pero odio incluir una biblioteca adicional completa para esta funcionalidad.

— Jake Stevenson

5

Puede utilizar la <audio>etiqueta HTML5 .

— Alon Gubkin
fuente

La pregunta pedía específicamente una solución "multiplataforma, multiplataforma". La <audio>etiqueta HTML5 no funciona en IE8-, Android 2.2-, iOS Safari 3.2- u Opera Mini: caniuse.com/#feat=audio

— Jasdeep Khalsa

NB en 2018 HTML5 Audio es compatible con todos menos Opera.

— Aidan Connelly

5

Me gustó la respuesta de dacracot ... aquí hay 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" />');
}

— Howard
fuente

4

<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>

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

— Andrew Mackenzie
fuente

3

Si está utilizando Mootools, existe el complemento MooSound .

— cheeaun
fuente

1

Existe 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 forma de hacer que funcione 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

— Andrew Junior Howard
fuente

Su solución parece interesante, la intentaré. Tenga en cuenta que hay un comentario en la página a la que se vinculó que indica que en IE11, el audio se ejecuta en un bucle sin fin. ¿Es esto todavía un problema? ¿Hay alguna forma de evitarlo?

— Kevin Fegan

0

Para una solución de navegador cruzado con archivos wav, sugeriría hacer una <audio>etiqueta predeterminada y luego buscar la <embed>solución que @dacracot sugirió antes aquí si el usuario está en IE, puede verificarlo fácilmente con una pequeña búsqueda aquí en SO.

— Hugo
fuente