javascript - reproducir - ¿Cómo se reproduce un sonido de notificación en los sitios web?
sonido notificacion javascript (7)
¿Qué tal el reproductor de medios de Yahoo! Solo incrustar la biblioteca de Yahoo
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Y úsalo como
<a id="beep" href="song.mp3">Play Song</a>
Para iniciar automáticamente
$(function() { $("#beep").click(); });
Cuando ocurre un determinado evento, quiero que mi sitio web reproduzca una breve notificación de sonido para el usuario.
El sonido no debe iniciarse automáticamente (al instante) cuando se abre el sitio web. En cambio, debe jugarse bajo demanda a través de JavaScript (cuando se produce ese determinado evento).
Es importante que esto también funcione en navegadores antiguos (IE6 y demás).
Entonces, básicamente, hay dos preguntas:
- ¿Qué códec debería usar?
- ¿Cuál es la mejor práctica para incrustar el archivo de audio? (
<embed>vs.<object>vs. Flash vs.<audio>)
A partir de 2016, lo siguiente será suficiente (ni siquiera es necesario incrustar):
var audio = new Audio(''/path/to/audio/file.mp3'');
audio.play();
Ver más here .
Encontré una solución muy elegante que funciona en casi todos los navegadores (incluso sin Flash instalado).
Probé en Chrome, Safari, Firefox, Opera e IE6.
Es una combinación de la etiqueta HTML5 <audio> para los navegadores más nuevos y la etiqueta <embed> Fallback para los navegadores más antiguos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Audio test</title>
<script type="text/javascript">
/**
* @param {string} filename The name of the file WITHOUT ending
*/
function playSound(filename){
document.getElementById("sound").innerHTML=''<audio autoplay="autoplay"><source src="'' + filename + ''.mp3" type="audio/mpeg" /><source src="'' + filename + ''.ogg" type="audio/ogg" /><embed hidden="true" autostart="true" loop="false" src="'' + filename +''.mp3" /></audio>'';
}
</script>
</head>
<body>
<!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
<button onclick="playSound(''bing'');">Play</button>
<div id="sound"></div>
</body>
</html>
Como códecs utilizo MP3 para Chrome, Safari e IE. Para Firefox y Opera usé OGG.
Un plugin más, para reproducir sonidos de notificación en sitios web: Ion.Sound
Ventajas:
- JavaScript-plugin para reproducir sonidos basados en Web Audio API con respaldo de audio HTML5.
- El complemento funciona en la mayoría de los navegadores de escritorio y dispositivos móviles y se puede usar en cualquier lugar, desde sitios web comunes hasta juegos de navegador.
- Soporte de audio-sprites incluido.
- Sin dependencias (jQuery no requerido).
- 25 sonidos gratis incluidos.
Configurar el complemento:
// set up config
ion.sound({
sounds: [
{
name: "my_cool_sound"
},
{
name: "notify_sound",
volume: 0.2
},
{
name: "alert_sound",
volume: 0.3,
preload: false
}
],
volume: 0.5,
path: "sounds/",
preload: true
});
// And play sound!
ion.sound.play("my_cool_sound");
Use audio.js que es un audio.js para la etiqueta <audio> con retroceso a flash.
En general, consulte https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills para polyfills a las API de HTML 5 .. ( incluye más <audio> polyfills <audio> )
Reproducir notificaciones compatibles con varios navegadores
Como lo advirtió @Tim Tisdall en this publicación, Howler.js complemento Howler.js .
Los navegadores como chrome desactivan la ejecución de javascript cuando están minimizados o inactivos para mejorar el performance . Pero esto reproduce sonidos de notificación incluso si el navegador está inactivo o minimizado por el usuario.
var sound =new Howl({
src: [''../sounds/rings.mp3'',''../sounds/rings.wav'',''../sounds/rings.ogg'',
''../sounds/rings.aiff''],
autoplay: true,
loop: true
});
sound.play();
Hope ayuda a alguien
var audio = new Audio(''audio_file.mp3'');
function post()
{
var tval=document.getElementById("mess").value;
var inhtml=document.getElementById("chat_div");
inhtml.innerHTML=inhtml.innerHTML+"<p class=''me''>Me:-"+tval+"</p>";
inhtml.innerHTML=inhtml.innerHTML+"<p class=''demo''>Demo:-Hi! how are you</p>";
audio.play();
}
este código es de talkerscode Para ver el tutorial completo, visita http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php