Comentario: Este artículo presenta principalmente el ejemplo de agregar efectos de sonido a su página web HTML5. Los amigos que lo necesitan pueden referirse a él.
Agregar el sonido correcto a la interacción a menudo mejora la experiencia del usuario. En las ventanas con las que estamos familiarizados, el sonido de limpiar el papel rallado en el contenedor de reciclaje es un buen ejemplo.
Aquí hay un widget que usa HTML5 y jQuery para agregar efectos de sonido a la página (solo agregue efectos de sonido, no un reproductor).
De hecho, es muy simple, es usar las etiquetas de audio en HTML5 para reproducir sonidos. Sin embargo, para ocuparse del IE 6-8, todavía usé bgsound.
Compatible con todos los navegadores convencionales (no se considera la corriente no principal)
Menos chismes, agregue el código:
<a href = "#"> Play </a>
<script>
/*Reproducir componente de sonido*/
/*
* Perfil: json, {src: 'chimes.wav', altsrc: '', bucle: falso}
*
* setSrc: función, establecer la fuente de sonido
* Reproducir: función, reproducir sonido
*/
if (! fui) {
var fui = {};
}
Fui.SoundComponent = function (perfil) {
this.profile = {
Src: '', // dirección de archivo de audio
AltSrc: '', // dirección de archivo de audio alternativa (los formatos de audio compatibles con diferentes navegadores son diferentes, consulte la tabla adjunta)
bucle: falso // si jugar bucle, este parámetro no es útil ahora
};
if (perfil) {
$ .extend (this.profile, perfil);
}
this.Soundobj = nulo;
this.isie =!-[1,];
/*Este método fue inventado por un predecesor, utilizando JScript en IE y no II para procesar la diferencia entre la última coma de la matriz,
Sin embargo, para IE 9, este método no es válido, pero es correcto para mí usarlo porque IE 9 admite audio*/
this.init ();
};
Fui.SoundComponent.Prototype = {
init: function () {
this._setsrc ();
},
_setsrc: functer () {
if (this.soundobj) {
if (this.isie) {
this.Soundobj [0] .src = this.profile.src;
}demás{
this.Soundobj [0] .innerhtml = '<fuente src = "'+this.profile.src+'" />
<fuente src = "'+this.profile.altsrc+'" /> ';
}
}demás{
if (this.isie) {
this.Soundobj = $
('<bgsound volume = "-10000" loop = "1" src = "'+this.profile.src+'">'). appendTo ('body');
//-10000 es el volumen mínimo. Primero gire el volumen al nivel más bajo, para no hacer un sonido de jingle tan pronto como se carga, lo que asustará a las personas.
}demás{
this.SoundOBJ = $ ('<audio preload = "Auto" Autobuffer>
<fuente src = "'+this.profile.src+'" />
<fuente src = "'+this.profile.altsrc+'" />
</audio> '). appendTo (' cuerpo ');
}
}
},
setSrc: function (src, altsrc) {
this.profile.src = src;
if (typeOf altsrc! = 'Undefined') {
this.profile.altsrc = AltSrc;
}
this._setsrc ();
},
Play: function () {
if (this.soundobj) {
if (this.isie) {
this.Soundobj [0] .volume = 1; // Abrir el volumen.
this.Soundobj [0] .src = this.profile.src;
}demás{
this.Soundobj [0] .play ();
}
}
}
};
var sd = new Fui.SoundComponent ({src: 'ding.wav', altsrc: 'ding.mp3'});
$ ('. Fui-Btn'). Bind ('Click', function (E) {
sd.play ();
});
</script>