Basierend auf dem HTML5 Audio Element Playback Sound JQuery Plug-In

Kommentar: Spielen Sie Sound basierend auf HTML5-Audioelementen JQuery Plug-In, Freunde, die es brauchen, können sich darauf beziehen.

Als ich an meiner verträumten Universität war, schien die Flash -Website ein wenig beliebt zu sein, und auf Flash -Websites mit ein wenig Inhalt waren verschiedene Soundeffekte immer unverzichtbar. Einige der Soundeffekte sind Hintergrundmusik, die die Atmosphäre schafft, und der andere Teil sind interaktive Geräusche, die die Interaktion fördern und die Erfahrung verbessern, z. B. Piepe oder Summen, wenn Tasten gedrückt oder vorbeigegeben werden. Zu dieser Zeit gab es auf Webseiten, die weit weg von Flash entfernt sind, nur wenige fundierte Interaktionen. Selbst wenn es gab, um Kompatibilität entweder mit Hilfe von Kontrollen oder durch Interaktion mit Flash zu erreichen (z. B. die Implementierung des Explosionsklangs von Kugeln, die das Ziel in einem geistig verzögerten Spiel treffen, das ich zuvor geschrieben habe).

Marx sagt uns, dass sich die Dinge entwickeln und Mädchen eines Tages zu jungen Frauen werden, ebenso die Technologie. Zum Beispiel gab der CEO von Mozilla, Gary Kwicks, heute bekannt, dass Firefox 5 am 22. Juni offiziell veröffentlicht wird, nur 3 Monate nach der Veröffentlichung von Firefox 4 - klicken Sie auf, um anzuzeigen. Mit dem Fortschritt und der Popularität von HTML5 können viele Effekte, die zuvor mit Flash erreicht wurden, jetzt auf Webseiten leicht implementiert werden. Zum Beispiel die Wiedergabe von Audiodateien. Dieser Artikel macht Spaß, so dass die Auswirkung von Tönen, wenn Element -Hover unter JQuery leicht erreicht wird, basierend auf HTML5 -Audioelementen. In diesem Artikel und diesem Plug-In ist IE6 ~ 8 daher ein Leben in der Herstellung von Sojasauce und der Halten einer Gruppe, um sich warm zu halten.

2. Effekte, Ressourcen und Verwendung

Genau wie Blinddates ist es sehr wichtig, wie die andere Person aussieht. Wenn Sie also einen Blick auf Lushans wahres Gesicht haben möchten, können Sie hier klicken: Spielen Sie die Sound JQuery-Plug-In-Demo ab.

Sie können eine vertikale Navigation sehen, die der Demo ähnelt:

Die erste Welle der Navigation, wenn sich die Maus schnell bewegt, wird es immer nur ein Sound spielen, genau wie der Ruf der Mutter in meinem Herzen; Während sich die Maus schnell bewegt und die folgende Navigation mit mehreren Klängen wie Feuerwerkskörper gespielt wird, genau wie der Ruf vieler Idole in meinem Herzen.

Dieses JQuery-Plug-In ist sehr einfach und sehr klein, ungefähr 30 Yuan. Warum sollten Sie Flugabwehrkanse verwenden, um Mücken zu bekämpfen? Also werde ich es nicht packen. Wenn Sie an Skripten interessiert sind, können Sie mit der rechten Maustaste klicken-[Ziel | Link] Speichern Sie als folgender Link: jQuery-Audioplay.js

verwenden

Rufen Sie zunächst die JQuery -Bibliothek und diese Effekt -Skriptdatei wie folgt an:

<script type = text/javaScript src => </script> _fcksavedurl => </script> _fcksavedurl => </script> _fcksvedurl => </script>

<script type = text/javaScript src => </script>

Binden Sie dann die Elemente, die die Maus erfordern, den Ton abzuspielen. Der Methodenname lautet: audioplay (), beispielsweise wird Folgendes auf der Demo -Seite verwendet:

$ ("#nav li"). audioplay ({{{

Name: "Playonce",

urlmp3: "/study/media/beep.mp3",

URLOGG: "/study/media/beep.ogg"

});

Offensichtlich ist es nicht möglich, Sound ohne Audio -Dateiquelle abzuspielen, sodass die Audioadresse in den Parametern unverzichtbar ist. Weitere Parameter und zugehörige Anweisungen finden Sie in der folgenden Tabelle:

Standardparameterdefinition

NAMEAUDIOPLAY -SING, verwendet für die Gruppierung. Wird verwendet, wenn gleichzeitig mehrere Gruppen von Spielelementen auf der Seite vorhanden sind.

URLMP3 -String, dieser Parameter muss sein. Bezieht sich auf die Audio -Datei -Adresse im MP3 -Format.

URLOGG -Zeichenfolge, dieser Parameter muss sein. Bezieht sich auf die Audio -Datei -Adresse im OGG -Format.

Klonefalse Boolean Typ. Ob die gleiche Gruppe von Elementen die gleiche Klangquelle spielt.

HINWEIS: Firefox und Opera -Browser unterstützen das OGG -Format Audio, während Webkit -Core -Browser und dh unterstützen MP3 -Format -Audio.

Die Soundeffekte der beiden Navigationsgruppen auf der Demo -Seite wenden alle oben genannten Parameter an, die vollständig wie folgt verwendet werden:

$ (function () {

$ ("#nav li"). audioplay ({{{

Name: "Playonce",

urlmp3: "/study/media/beep.mp3",

URLOGG: "/study/media/beep.ogg"

});

$ ("#nav2 li"). audioplay ({{{{{{

urlmp3: "/study/media/beep.mp3",

urlogg: "/study/media/beep.ogg",

Klon: wahr

});

});

3.. Einige nörgeln am Ende

Jetzt sind die Browser, die HTML5 -Audioelemente unterstützen, wie folgt: Firefox 3.5+, Chrom 3+, Opera 10.5+, Safari 4+, dh 9+. In unserem magischen Land befindet sich IE6 ~ 8 immer noch den größten Teil der Welt. Sie mögen denken, dass die Dinge in diesem Artikel derzeit immer noch keinen Wert haben.

In Übereinstimmung mit dem Prinzip der allmählichen Verbesserung, der den Nutzen und des Ressourcenbeschäftigung ist es jedoch auch nicht unmöglich, diese kleine Sache in diesem Artikel in tatsächlichen Projekten anzuwenden. Darüber hinaus kann die IE6 -ERA mit der erheblichen Zunahme des Installationsvolumens von Windows 7 versehentlich ein abrupter Ende gekommen sein. Bis dahin ist es möglicherweise nicht zu spät für Sie, das auszugleichen. Dieses Gefühl stammt von meinem gegenwärtigen Vermieter, der in den sechziger oder siebziger Jahren ist. Obwohl er im Grunde nichts über Computer weiß (nur Aktien ansehen), ist sein Computer wunderschön und schön, und es scheint ziemlich interessant, das Windows 7 -System zu verwenden.

Wenn Sie die Flut der Front-End-Technologie nutzen, müssen Sie hart arbeiten, um Grundfähigkeiten zu üben. Andernfalls wird es, wenn die Flut kommt, von den steigenden neuen Technologien leicht verschluckt. Persönlich habe ich das Gefühl, dass es nach Japan nach dem Erdbeben ist, und ein riesiger Tsunami wird kurz vor ...

Testcode -Verpackung und herunterladen