Commentaire: Cet article présente principalement l'exemple de l'ajout d'effets sonores à votre page Web HTML5. Les amis qui en ont besoin peuvent y faire référence.
L'ajout du bon son à l'interaction améliore souvent l'expérience utilisateur. Dans les fenêtres que nous connaissons, le son de nettoyage du papier râpé dans le bac de recyclage en est un bon exemple.
Voici un widget qui utilise HTML5 et JQuery pour ajouter des effets sonores à la page (ajoutez simplement des effets sonores, pas un lecteur).
En fait, c'est très simple, il s'agit d'utiliser les balises audio dans HTML5 pour lire des sons. Cependant, afin de prendre soin de IE 6-8, j'ai quand même utilisé BGSOUND.
Compatible avec tous les navigateurs grand public (la non-marin n'est pas considérée)
Moins de ragots, ajoutez le code:
<a href = "#"> play </a>
<cript>
/ * Jouer au composant sonore * /
/ *
* Profil: json, {src: 'chimes.wav', altsrc: '', Loop: false}
*
* setsrc: fonction, définissez la source du son
* jouer: fonction, jouer le son
* /
if (! fui) {
var fui = {};
}
Fui.soundComponent = fonction (profil) {
this.profile = {
Src: '', // Adresse du fichier audio
Altsrc: '', // Adresse de fichier audio alternative (les formats audio pris en charge par différents navigateurs sont différents, voir la table jointe)
LOOP: FAUX // Si vous devez jouer à Loop, ce paramètre n'est pas utile maintenant
};
if (profil) {
$ .Extend (this.profile, profil);
}
this.soundObj = null;
this.isie =! - [1,];
/ * Cette méthode a été inventée par un prédécesseur, en utilisant JScript dans IE et non IE pour traiter la différence entre la dernière virgule du tableau,
Cependant, pour IE 9, cette méthode n'est pas valide, mais il est juste pour moi de l'utiliser car IE 9 prend en charge l'audio * /
this.init ();
};
Fui.soundComponent.prototype = {
init: function () {
this._setsrc ();
},
_setsrc: function () {
if (this.soundobj) {
if (this.isie) {
this.soundObj [0] .src = this.profile.src;
}autre{
this.soundobj [0] .InnerHtml = '<source src = "' + this.profile.src + '" />
<source src = "'+ this.profile.altsrc +'" /> ';
}
}autre{
if (this.isie) {
this.soundobj = $
('<bgsound volume = "- 10000" loop = "1" src = "' + this.profile.src + '">'). APPENDTO ('body');
// - 10000 est le volume minimum. Tournez le volume au niveau le plus bas en premier, afin de ne pas élaborer de sons de jingle dès qu'il se charge, ce qui effrayera les gens.
}autre{
this.soundobj = $ ('<audio preload = "auto" autobuffer>
<source src = "'+ this.profile.src +'" />
<source src = "'+ this.profile.altsrc +'" />
</ audio> '). APPENDTO (' corps ');
}
}
},
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; // Ouvre le volume.
this.soundObj [0] .src = this.profile.src;
}autre{
this.soundObj [0] .Play ();
}
}
}
};
var sd = new fui.soundComponent ({src: 'ding.wav', altsrc: 'ding.mp3'});
$ ('. fui-btn'). bind ('click', fonction (e) {
sd.play ();
});
</cript>