Kommentar: In diesem Artikel wird hauptsächlich das Beispiel vorgelegt, um Ihrer HTML5 -Webseite Soundeffekte hinzuzufügen. Freunde, die es brauchen, können sich darauf beziehen.
Das Hinzufügen des richtigen Klangs zur Interaktion verbessert häufig die Benutzererfahrung. In den Fenstern, mit denen wir vertraut sind, ist das Geräusch, das zerkleinerte Papier im Recyclingbehälter zu klären, ein gutes Beispiel.
Hier ist ein Widget, das HTML5 und JQuery verwendet, um der Seite Soundeffekte hinzuzufügen (einfach Soundeffekte hinzufügen, keinen Spieler).
Tatsächlich ist es sehr einfach, die Audio -Tags in HTML5 zu verwenden, um Sounds zu spielen. Um sich jedoch um IE 6-8 zu kümmern, habe ich BGSound immer noch verwendet.
Kompatibel mit allen Mainstream-Browsern (Nicht-Mainstream wird nicht berücksichtigt)
Weniger Klatsch fügen Sie den Code hinzu:
<a href = "#"> spiel </a>
<Script>
/*Schallkomponente abspielen*/
/*
* Profil: JSON, {src: 'chimes.wav', Altsrc: '', Loop: False}
*
* setsRC: Funktion, setzen Sie die Klangquelle
* Spielen: Funktion, Klang spielen
*/
if (! fui) {
var fui = {};
}
Fui.SoundComponent = Funktion (Profil) {
this.profile = {
SRC: '', // Audiodateiadresse
ALTSRC: '', // Alternative Audiodateiadresse (die von verschiedenen Browsern unterstützten Audioformate sind unterschiedlich, siehe beigefügte Tabelle)
Schleife: Falsch // Unabhängig davon, ob die Schleife abgespielt werden soll, ist dieser Parameter jetzt nicht nützlich
};
if (Profil) {
$ .extend (this.profile, Profil);
}
this.SoundObj = null;
this.isie =!-[1,];
/*Diese Methode wurde von einem Vorgänger erfunden, wobei Jscript in IE und Nicht-IE den Unterschied zwischen dem letzten Komma des Arrays verarbeitet.
Für IE 9 ist diese Methode jedoch ungültig, aber es ist genau richtig für mich, sie zu verwenden, da IE 9 Audio*/ unterstützt
this.init ();
};
Fui.SoundComponent.Prototype = {{
init: function () {
this._setsrc ();
},
_setsrc: function () {
if (this.soundObj) {
if (this.isie) {
this.SoundObj [0] .src = this.profile.src;
}anders{
this.SoundObj [0] .innerhtml = '<source src = "'+this.profile.src+'" />
<Source src = "'+this.profile.altsrc+'" /> ';
}
}anders{
if (this.isie) {
this.SoundObj = $
('<bgSound Volume = "-10000" Loop = "1" Src = "'+this.profile.src+'">'). appendTo ('body');
//-10000 ist das Mindestvolumen. Drehen Sie die Lautstärke zuerst auf die niedrigste Ebene, um keinen Jingle -Sound zu machen, sobald er lädt, was Menschen erschreckt.
}anders{
this.SoundObj = $ ('<audio preload = "auto" autobuffer>
<Source Src = "'+this.profile.src+'" />
<Source Src = "'+this.profile.altsrc+'" />
</audio> '). appendTo (' Körper ');
}
}
},
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; // Öffnen Sie das Volumen.
this.SoundObj [0] .src = this.profile.src;
}anders{
this.SoundObj [0] .play ();
}
}
}
};
var
$ ('. fui-btn'). Bind ('Click', Funktion (e) {
sd.play ();
});
</script>