reproducir - reproductor de audio html5+css+javascript

¿Forma cruzada entre navegadores para reproducir sonido desde Javascript?

Question

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 en "voz en off". No he podido encontrar una manera fácil de lograr esto en varios navegadores.

Soundmanager2 es bastante similar 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?

Answer 1

Creo que la forma más simple 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 tu objetivo

Algunos enlaces extra de la pregunta similar anterior:

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

Answer 2

Deberá 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);
    }
//======================================================================

Answer 3

El código 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 incrustació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 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 bloquea, la ópera se mantiene activa.

Answer 4

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

Answer 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" />'');
}

Answer 6

Puede usar la etiqueta HTML5 <audio> .

Answer 7

Si está usando Prototype, la biblioteca Scriptaculous tiene una API de sonido . jQuery parece tener un complemento también.

Answer 8

Si está utilizando Mootools, existe el complemento MooSound .

Answer 9

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