Spielen Sie das Sound-JQuery-Plug-In basierend auf den HTML5-Audio-Element_HTML5-Tutorial-Fähigkeiten ab

1. Einige der vorherigen Gespräche
Als ich auf dem College war, schien es, dass Flash-Websites immer noch ein wenig beliebt waren und auf jeder Flash-Website mit einigen Inhalten verschiedene Soundeffekte immer unverzichtbar waren. Ein Teil der Soundeffekte ist Hintergrundmusik, die die Atmosphäre verstärkt, und der andere Teil sind interaktive Geräusche, die die Interaktion fördern und das Erlebnis verstärken, wie zum Beispiel Tastendrücke oder „Piep“- bzw. „Beep“-Geräusche beim Vorbeigehen. Zu dieser Zeit gab es auf Webseiten, die weit von Flash entfernt waren, kaum Sound-Interaktion. Um Kompatibilität zu erreichen, musste man sich jedoch auf Steuerelemente verlassen oder mit Flash interagieren (z. B. ein geistig behindertes Spiel, das ich vor der Implementierung geschrieben hatte). des Explosionsgeräusches einer Neutronenbombe, die ihr Ziel trifft).

Marx sagte uns, dass sich die Dinge eines Tages zu jungen Frauen entwickeln werden, und das Gleiche gilt für die Technologie. Gary Kwicks, CEO von Mozilla, gab beispielsweise heute bekannt, dass Firefox 5 am 22. Juni offiziell veröffentlicht wird, nur drei Monate nach der Veröffentlichung von Firefox 4 – klicken Sie hier, um es anzuzeigen. Mit der Weiterentwicklung und Popularisierung von HTML5 lassen sich viele Effekte, die früher nur mit Hilfe von Flash erzielt werden konnten, nun problemlos auf Webseiten erzielen. Beispielsweise die Wiedergabe von Audiodateien. Dieser Artikel ist nur ein kleiner Trick, um den Effekt des Abspielens von Sounds beim Schweben von Elementen mit jQuery zu erzielen. Er basiert auf dem HTML5-Audioelement. Daher ist IE6~8 für diesen Artikel geeignet ein Durcheinander.

2. Effekte, Ressourcen und Nutzung
Genau wie bei einem Blind Date ist es sehr wichtig, wie die andere Person aussieht. Wenn Sie also einen Blick auf das wahre Gesicht von Lushan werfen möchten, können Sie klicken Hier: Spielen Sie die Sound-Demo des jQuery Mini Plug-ins ab.

In der Demo können Sie eine vertikale Navigation ähnlich der folgenden sehen:

Bewegen Sie die erste Navigationswelle schnell mit der Maus. und es wird immer nur eine Stimme spielen, genau wie die Mutter im Herzen. Der Ruf der Maus; während sich die Maus schnell bewegt, eine Welle der Navigation unten, knistern mehrere Geräusche wie Feuerwerkskörper, genau wie die Rufe vieler Idole in der Herz.

Dieses jQuery-Plugin ist sehr einfach und sehr klein. Es kostet nur etwa 30 Yuan. Sie können keine Flugabwehrkanonen verwenden, um Mücken zu bekämpfen, also werde ich es nicht einpacken. Wenn Sie an dem Skript interessiert sind, können Sie über diesen Link „Rechtsklick – [Ziel | Link] Speichern unter“ ausführen: jquery-audioPlay.js

Verwenden Sie
, um zunächst die jQuery-Bibliothek und diese aufzurufen Effektskriptdatei, wie im folgenden Code gezeigt:
_fcksavedurl=""http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">" _fcksavedurl= ""http://ajax.googleapis. com/ajax/libs/jquery/1.5.2/jquery.min.js">"
Binden Sie dann einfach die Elemente, bei denen die Maus beim Vorbeigehen einen Ton abspielen muss. Der Methodenname lautet: audioPlay(). Auf der Demoseite wird beispielsweise Folgendes verwendet:

Kopieren Sie den CodeDer Code lautet wie folgt:

$("#nav li").audioPlay({
name: "playOnce",
urlMp3: "/study/media/beep. mp3",
urlOgg: " /study/media/beep.ogg"
});

Natürlich ist es ohne eine Audiodateiquelle unmöglich, Ton abzuspielen Die Audioadresse im Parameter ist unverzichtbar. Die spezifischen Parameter finden Sie in der Tabelle unten für relevante Anweisungen:

Hinweis: Firefox- und Opera-Browser unterstützen Audio im OGG-Format, während Webkit-Core-Browser und IE Audio im MP3-Format unterstützen.

Die Soundeffekte der oberen und unteren Navigationsgruppen auf der Demoseite wenden alle oben genannten Parameter an und ihre vollständige Verwendung ist wie folgt:

Kopieren Code

Der Code lautet wie folgt:

$(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",
clone: ​​​​true
});
});

3. Einige Nörgeleien zum Schluss
Die Browser, die derzeit das HTML5-Audioelement unterstützen, sind wie folgt: Firefox 3.5, Chrome 3, Opera 10.5, Safari 4, IE 9 und in unserem magischen Land machen IE6~8 immer noch den größten Teil des Landes aus. Möglicherweise haben Sie das Gefühl, dass die Dinge in diesem Artikel derzeit noch von geringem Wert sind.

Basierend auf dem Prinzip der progressiven Verbesserung und der Abwägung von Nutzen und Ressourcenverbrauch ist es jedoch keine schlechte Idee, diese Kleinigkeit in diesem Artikel in tatsächlichen Projekten anzuwenden. Darüber hinaus könnte die Ära von IE6 mit der erheblichen Steigerung der installierten Kapazität von Windows 7 unerwartet zu Ende gehen, und dann ist es möglicherweise noch nicht zu spät, dies nachzuholen. Diese Emotion kommt von meiner derzeitigen Vermieterin, die 60 oder 70 Jahre alt ist. Obwohl sie im Grunde nichts über Computer weiß (sie nutzt sie nur zum Lesen von Aktien), ist ihr Computer ein wunderschönes Windows 7, und es scheint, dass sie Windows verwenden kann 7-System ganz gut.

Bevor die große Welle der Front-End-Technologie eintrifft, müssen Sie hart daran arbeiten, grundlegende Fähigkeiten zu üben. Andernfalls werden Sie bei der Ankunft der großen Welle leicht von der herannahenden neuen Technologie verschluckt. Ich persönlich habe das Gefühl, dass es wie in Japan ist, gleich nach dem Erdbeben kommt ein riesiger Tsunami ...
Testcode-Paket herunterladen