Key Takeaways

• CSS und HTML k?nnen kombiniert werden, um CSS -Animationen mithilfe von HTML -Elementen Soundeffekte hinzuzufügen. Dies kann mit JavaScript ausgel?st und in bestimmten F?llen die Benutzererfahrung verbessern, z. B. Künstler- und Spiele -Websites oder Inhalte für Kinder. Der wichtigste Bestandteil des Soundanimationsprozesses ist die Anpassung der CSS-Animation an das Audio, um ein genaues Audio-Visualerlebnis in Synchronisation zu gew?hrleisten. Dies beinhaltet die Synchronisierung von Animationsschlüsselfaktoren mit Audio -Timing -Daten.
• Das Element wird verwendet, um Audio in die Seite einzuführen. JavaScript wird verwendet, um die Wiedergabe zu manipulieren. In diesem Beispiel werden Schaltfl?chen verwendet, um den Track zu starten und zurückzusetzen.
• Der Prozess der Synchronisierung von CSS -Animationen mit HTML5 -Audio ist in verschiedenen Browsern im Allgemeinen gleich. Nicht alle Browser unterstützen jedoch alle HTML5 -Audioformate. Daher sollten mehrere Quellen für die Audiodatei bereitgestellt werden, um die Kompatibilit?t mit verschiedenen Browsern sicherzustellen.
• Die Verwendung von CSS-Animationen mit Live-Audio-Streams ist m?glich, aber komplexer als mit vorgezeichneten Audiodateien. Die Web-Audio-API ist erforderlich, um den Audio-Stream in Echtzeit zu analysieren und CSS-Animationen entsprechend anzupassen.
CSS und HTML haben ein reichhaltiges Spielfeld zum Hinzufügen von Multimedia-Inhalten zu Ihrer Webseite, Ihrer Web-App und Ihrer E-Book-Projekte er?ffnet. Eine innovative M?glichkeit, diese beiden Technologien zu kombinieren

Obwohl der Klang im Web nicht allgemein willkommen ist, gibt es F?lle, in denen die Benutzererfahrung bereichert werden kann, ohne unn?tig zu ?rgern. Beispiele sind Künstler- und Gaming -Websites oder Inhalte für Kinder. Sound kann in bestimmten F?llen für Besucher mit Behinderungen sogar nützlich sein.

Der wichtigste Teil des Soundanimationsprozesses besteht darin, Ihre CSS-Animation an das Audio anzupassen, um ein genaues Audio-Visualerlebnis in Synchronisation zu erzielen. In diesem Artikel werde ich die Schritte zur Synchronisierung von Animationsschlüsselfaktoren mit Audio -Timing -Daten unter Verwendung eines interessanten Beispiels für ein schlagendes stilisiertes Herz durchführen.

Siehe die Stift -CSS -Animation mit Sound: Heartbeat von sitepoint (@sinepoint) auf CodePen.

Konstruktion des Herzens

Die erste Zutat, die wir brauchen, ist ein Herz, das wir animieren wollen. Wir werden einen mit CSS-Pseudoelementen erstellen. Es gibt uns die M?glichkeit, verschiedene CSS-Eigenschaften zu animieren, um eine interessantere Animation zu erstellen.

Wir k?nnen oft mehr als eine M?glichkeit finden, eine Form auf diese Weise aufzubauen. Wenn wir jedoch planen, sie zu animieren, lohnt es sich, über Geometrie nachzudenken und wie unterschiedliche strukturelle Entscheidungen die Bewegung beeinflussen und den Keyframes -Code vereinfachen.

In diesem Fall besteht die einfachste Technik darin, zwei vertikale Rechtecke zu verwenden, die oben abgerundet, gedreht und positioniert sind, um eine Herzform zu bilden. Ihre Gr??e wird mit Prozents?tzen festgelegt und sie sind absolut mit etwas Geometrie -überlegung positioniert, sodass es einfach ist, die ursprüngliche Form zu skalieren, indem die Beh?ltergr??e ge?ndert wird. Die Rechtecke werden um 45 Grad im Uhrzeigersinn und gegen den Uhrzeigersinn gedreht, um die linken und rechten Teile des Herzens zu bilden.

<span><span>.heart::before, 
</span></span><span><span>.heart::after</span> {
</span>  <span>background-color: red;
</span>  <span>content: "";
</span>  <span>height: 80%;
</span>  <span>left: 25%;
</span>  <span>position: absolute;
</span>  <span>top: 2%;
</span>  <span>transform: translateZ(0) rotate(-45deg);
</span>  <span>width: 50%;    
</span><span>}
</span>
<span><span>.heart::after</span> {
</span>  <span>transform: translateZ(0) rotate(45deg);
</span><span>}</span>

abgerundete Seiten werden mit zwei Radii -Werten eingestellt, um eine elliptische anstelle einer kreisf?rmigen Kurve und damit eine natürlichere Herzform zu erhalten. Da die Rechteck -Seitenl?ngen ein 5/8 -Verh?ltnis aufweisen, berechnen die Ellipsis -Radien auf 50%/37,5%, um nur die Ecken abzurunden, die sich nicht überlappen.

<span><span>.heart::before,
</span></span><span><span>.heart::after</span> {
</span>  <span>border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
</span><span>}</span>

Jetzt bleibt, um den Transform-Origin-Punkt für die Rechtecke anzupassen, sodass die Punkte in der Mitte des quadratischen Bereichs ausgerichtet sind, an dem sich die Rechtecke überlappen. Das gleiche Aussehen kann erreicht werden, indem die absoluten Positionsdeklarationen angepasst werden, anstatt den Transform-Origin-Ansatz zu verwenden. Dies würde jedoch sp?ter den KeyFrames -Code komplizieren, da wir die Position zwingen würden, die Position ausführlicher zu steuern, anstatt sich auf die Funktion der Transformationskala zu verlassen, um die Arbeit für uns zu erledigen.

Der Transform-Origin-Punkt sollte in Bezug auf das Koordinatensystem berechnet werden, bevor Transformationen angewendet werden (da Transformationen das Koordinatensystem beeinflussen k?nnen Zu). Wiederum das Verh?ltnis der Seitenl?nge vorliegt die Position dieses Punktes: Es ist leicht zu erkennen (55*100%/80 = 68,75%). Der spezifische Symmetrieansatz zahlt sich auch hier aus, da beide Rechtecke die gleiche Transform-Origin-Punktposition teilen.

<span><span>.heart::before, 
</span></span><span><span>.heart::after</span> {
</span>  <span>transform-origin: 50% 68.75% 0;
</span><span>}</span>

Und jetzt haben wir eine sch?ne symmetrische Herzform. Wir k?nnen einen Inset-Box-Shadow hinzufügen, der für jedes Rechteck unterschiedlich ist, um alles prall und 3D zu machen.

<span><span>.heart::before</span> {
</span>  <span>box-shadow: -8px -14px 10px 0 black inset;
</span><span>} 
</span>
<span><span>.heart::after</span> {         
</span>  <span>box-shadow: -15px 10px 14px 0 black inset;
</span><span>}</span>

Der Klang des Herzens

Um Audio in die Seite einzuführen, verwenden wir das Element mit dem Pfad zur Audiodatei und ohne das Attribut für Steuerelemente, da wir nicht m?chten, dass der interne Browser -Audio -Player angezeigt wird (lesen Sie mehr in der Verwendung von HTML5 -Audio und verwenden Video auf Mdn).

<span><span><span><audio</span> id<span>="heartbeat"</span> src<span>="heartbeat.mp3"</span> preload<span>="auto"</span>></span>
</span>  Your browser does not support the <span><span><span><code</span>></span>audio<span><span></code</span>></span> element.
</span><span><span><span></audio</span>></span></span>

Anstelle der Steuerelemente verwenden wir JavaScript, um die Wiedergabe zu manipulieren. In diesem Beispiel werden die Schaltfl?chen zum Starten und Zurücksetzen des Tracks verwendet, aber mit ein bisschen mehr Arbeit k?nnen wir auf die Schaltfl?chen verzichten und das Audio starten und zurücksetzen, wenn das Herzelement geklickt oder schwebt.

Unser Sound ist der Klang eines viermal wiederholten Herzschlags und wird dienen, wenn der Sound unsere CSS -Animation folgen wird.

Flex diesen Muskel

Um unser Herz zum Ticken zu bringen, müssen wir seine Form von Original, ruhenes Herz in den Zustand ?ndern, wenn der Muskel gebeugt wird. Um das Herz zu biegen, skalieren wir es ein wenig und ver?ndern seine Form mit Border-Radius.

Hier ist, wie die gebogenen Stile lesen würden, wenn wir sie au?erhalb der Animation statisch ben?tigen:

<span><span>.heart::before, 
</span></span><span><span>.heart::after</span> {
</span>  <span>background-color: red;
</span>  <span>content: "";
</span>  <span>height: 80%;
</span>  <span>left: 25%;
</span>  <span>position: absolute;
</span>  <span>top: 2%;
</span>  <span>transform: translateZ(0) rotate(-45deg);
</span>  <span>width: 50%;    
</span><span>}
</span>
<span><span>.heart::after</span> {
</span>  <span>transform: translateZ(0) rotate(45deg);
</span><span>}</span>

Der übergang zwischen den ruhenden und gebogenen Zust?nden und dann zurück zur ursprünglichen Ruheform macht einen Herzschlag. Unsere Keyframe -Prozents?tze erkl?ren sich in den Abbiegungen der Ruhe- und Biegerstile effektiv. Um es jedoch mit dem Audio zu synchronisieren, müssen wir genau wissen, wie lange die Animation abspielen sollte und welche Keyframes Prozents?tze für welchen Herzstaat verwendet werden sollen. Einige nützliche Audio -Software k?nnen uns helfen, den Ton zu analysieren und die Zeitinformationen zu notieren, die wir für unsere Keyframes ben?tigen.

Analyse des Audiosignals mit Audacity

Audacity? ist eine plattformübergreifende Open-Source-Software zum Aufnehmen und Bearbeiten von Sounds. Es ist einfach zu bedienen und selbst wenn Sie keine Erfahrung mit ?hnlichen Audio- oder Videobearbeitungssoftware haben, ist es nicht viel Aufwand, um die ben?tigten Informationen zu erhalten.

?ffnen Sie Ihr Audiosignal in Audacity und zeigt Ihnen automatisch die Schallwellenform an. In den meisten F?llen reicht dies aus, um zu erkennen, wo bestimmte Teile des Audio -Abschlusses, indem Sie die Signalform betrachten. Selten erhalten wir ein Signal, bei dem ein anderer Spektrogrammansichtsmodus besser hilft. In diesem Fall k?nnen wir jedoch zwischen verschiedenen Modi durch das Dropdown-Menü neben dem Spektrogramm wechseln.

Klicken Sie auf die Spektrogramme markiert einen Moment in der Zeitleiste, und darunter k?nnen Sie in Sekunden lesen, wie sp?t es entspricht. So finden wir heraus, wann jeder Herzschlag beginnt, endet und wenn sich das Herz im gebogenen Zustand befindet. Wir verwenden die Wiedergabetaste, um das gesamte Audio abzuspielen oder ein Segment auszuw?hlen.

In unserem Heartbeat -Fall haben wir 4 verschiedene Herzschl?ge und es ist leicht zu erkennen, indem wir die Wellenform betrachten. Wir müssen jeden Herzschlag zur Kenntnis nehmen, wenn er beginnt, endet und wenn es sich im gebogenen Zustand befindet. Um dies zu erleichtern, verwenden wir eine Tabellenkalkulations -App, in der wir die Herzschl?ge und ihr Timing in Sekunden feststellen.

Audio -Timing in Keyframe -Timing

übersetzen

Sobald wir das Timing in Sekunden haben, verwenden wir Mathematik, um die Audiol?nge auf die 100% L?ngennotation zu normalisieren, die wir in der Animation verwenden (multiplizieren Sie sie mit 100 und dividieren Sie sie durch die Gesamt -Audiozeit). So erhalten wir die Keyframes -Prozents?tze sowie welchen Stil auf einen bestimmten Keyframe angewendet werden soll, unabh?ngig davon, ob das Herz entspannt oder gebeugt werden sollte.

Lesen aus dieser Tabelle Wir k?nnen die Keyframes -Prozents?tze erstellen und mit den jeweils verbundenen Stilen ausfüllen. Neben der Skalierung des Herzens und des Grenzradius ver?ndern wir auch die Herzfarbe, um die Animation ein bisschen mehr zu betonen. Da wir die Transformation verwenden, um die Herzrechtecke zu skalieren und jedes Rechteck auch einen anderen Drehwert hat, müssen wir zwei verschiedene Animationen erstellen, eines für jedes Rechteck.

Hier ist der @KeyFrames-Code für das linke Rechteck (die rechte Rechteckanimation unterscheidet sich nur in den Rotationsorientierungswerten und der rand-radius-Position):

<span><span>.heart::before, 
</span></span><span><span>.heart::after</span> {
</span>  <span>background-color: red;
</span>  <span>content: "";
</span>  <span>height: 80%;
</span>  <span>left: 25%;
</span>  <span>position: absolute;
</span>  <span>top: 2%;
</span>  <span>transform: translateZ(0) rotate(-45deg);
</span>  <span>width: 50%;    
</span><span>}
</span>
<span><span>.heart::after</span> {
</span>  <span>transform: translateZ(0) rotate(45deg);
</span><span>}</span>

Schlie?lich weisen wir den Rechtecken die entsprechenden Animationen zu. Wir setzen die Gesamtanimationsl?nge auf die Heartbeat -Audiol?nge und setzen sie nur einmal mit einer linearen Timing -Funktion und ohne Verz?gerung auf. Wenn Sie eine andere Zeitfunktion als linear verwenden, würde die Synchronisierung zwischen Animation und Audio durcheinander gebracht. Denken Sie also immer daran, eine lineare Zeitfunktion bei der Synchronisierung mit einer externen Ressource zu verwenden.

<span><span>.heart::before,
</span></span><span><span>.heart::after</span> {
</span>  <span>border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0;
</span><span>}</span>

Die Animation ist einer speziellen Klasse zugeordnet, die wir mit JavaScript dem Herzelement hinzufügen, bei demselben Ereignis, das wir das Audiospiel ausl?sen. So starten wir die Animation und der Audio gleichzeitig und alle Synchronisierungsarbeiten zahlen sich aus.

Und das ist es für die Herzschlaganimation, die Sie in der Demo unten sehen k?nnen.

Siehe die Stift -CSS -Animation mit Sound: Heartbeat von sitepoint (@sinepoint) auf CodePen.

Mehr CSS -Soundanimationen!

Hunger nach mehr CSS -Leckereien, die Sie h?ren und beobachten k?nnen? Hier sind einige weitere Beispiele, die Sie auseinander nehmen und lernen k?nnen:

Siehe den Pen 5A20EF9D5C68ABC42320AC73639F0E39 von SitePoint (@sinepoint) auf CodePen.

Siehe die CSS -CSS -Animation von Stiftkuckucks CSS mit Sound von SitePoint (@sinepoint) auf CodePen.

Siehe den Stift QOBQRO von SitePoint (@sitepoint) auf CodePen.

unten finden Sie eine Liste der Quellen für die in diesem Artikel verwendeten Medienressourcen:

• Der Herzschlag Sound (?ffentlich -dom?ne)
• Eisenbahnkreuzungssignal (Public Domain)
• Kuckucksuhr Sound (?ffentlich -Dom?ne)
• Stoppuhr -Bild (?ffentlich -Dom?ne)
• Zeit von Iwan Gabovitch unter CC-by 3.0 Lizenz

endgültige Gedanken

Ich hoffe, dieser Artikel inspiriert Sie, gegebenenfalls Sounds in Ihren Projekten zu verwenden, und ermutigt Sie, fantasievolle M?glichkeiten zu finden, um das Visuelle mit dem Audio zu kombinieren.

Was ist mit dir? Haben Sie schon erfolgreich Sounds mit Ihren Animationen verwendet? Gibt es einen bestimmten Fall von CSS -Animationen, die Sie gerne sehen würden? Erz?hlen Sie uns alles darüber in den Kommentaren!

h?ufig gestellte Fragen (FAQs) zum Synchronisieren von CSS -Animationen mit HTML5 -Audio

Wie kann ich CSS -Animationen mit HTML5 -Audio in verschiedenen Browsern synchronisieren? Es ist jedoch wichtig zu beachten, dass nicht alle Browser alle HTML5 -Audioformate unterstützen. Zum Beispiel wird MP3 von allen Browsern unterstützt, OGG wird jedoch nicht von Internet Explorer unterstützt. Daher ist es ratsam, mehrere Quellen für Ihre Audio -Datei bereitzustellen, um die Kompatibilit?t mit verschiedenen Browsern sicherzustellen.

Kann ich CSS -Animationen mit Live -Audio -Streams verwenden? Audio -Streams. Der Prozess ist jedoch etwas komplexer als bei vorgezeichneten Audiodateien. Sie müssen die Web-Audio-API verwenden, um den Audio-Stream in Echtzeit zu analysieren und Ihre CSS-Animationen entsprechend anzupassen. Es k?nnte mehrere Gründe geben, warum Ihre CSS -Animationen nicht mit Ihrem HTML5 -Audio synchronisieren. Ein h?ufiges Problem ist, dass die Animation und die Audiodauer nicht übereinstimmen. Stellen Sie sicher, dass die Dauer Ihrer CSS -Animation mit der L?nge Ihrer Audio -Datei übereinstimmt. Stellen Sie au?erdem sicher, dass Ihre Audiodatei ordnungsgem?? geladen ist und vor dem Start der Animation abspielt. Geschwindigkeit Ihrer CSS -Animation basierend auf der Audio -Wiedergabequote mithilfe der Eigenschaft "PlaybackRate" des HTML5 -Audioelements. Durch das Anpassen dieser Eigenschaft k?nnen Sie das Audio schneller oder langsamer spielen, und Ihre CSS -Animation wird seine Geschwindigkeit entsprechend anpassen. Sie k?nnen CSS -Animationen mit HTML5 -Audio auf mobilen Ger?ten synchronisieren. Beachten Sie jedoch, dass mobile Browser im Vergleich zu Desktop -Browsern einige Einschr?nkungen und Unterschiede aufweisen. Zum Beispiel erlauben einige mobile Browser kein automatisches Audio, daher müssen Sie m?glicherweise eine Wiedergabetaste für Ihre Audio-Datei hinzufügen.

Um Ihre CSS -Animationen mehr auf Audio -?nderungen zu reagieren, k?nnen Sie die Web -Audio -API verwenden. Mit dieser API k?nnen Sie die Audiodaten in Echtzeit analysieren und Ihre CSS-Animationen basierend auf dem aktuellen Status des Audio anpassen. Ja, Sie k?nnen CSS -Animationen mit HTML5 -Audio auf einer WordPress -Site verwenden. Sie k?nnen Ihre CSS -Animationen und HTML5 -Audio in den benutzerdefinierten CSS- und HTML -Abschnitten Ihres WordPress -Themas hinzufügen, oder Sie k?nnen ein Plugin verwenden, mit dem Sie benutzerdefinierte CSS und HTML hinzufügen k?nnen.

Wie kann ich die Synchronisierung meiner CSS -Animationen mit HTML5 -Audio testen? Mit diesen Tools k?nnen Sie HTML, CSS und JavaScript Ihrer Seite inspizieren, und k?nnen Sie überprüfen, ob Ihre Animationen und Ihr Audio wie erwartet abspielen. E-Commerce-Site? Dies kann eine gro?artige M?glichkeit sein, die Benutzererfahrung auf Ihrer Website zu verbessern. Zum Beispiel k?nnen Sie CSS -Animationen und Audio verwenden, um Sonderangebote oder neue Produkte hervorzuheben. Ihre CSS -Animationen, die mit HTML5 -Audio synchronisiert sind, k?nnen Sie Ihre CSS und Audio -Dateien optimieren. Beispielsweise k?nnen Sie Ihre CSS minifieren und Ihre Audiodateien komprimieren, um ihre Gr??e und die Ladezeit zu verkürzen. Erw?gen Sie au?erdem die Verwendung von Hardware-Beschleunigungs-CSS-Eigenschaften für Ihre Animationen, da sie die Rendering-Leistung verbessern k?nnen.

Das obige ist der detaillierte Inhalt vonSynchronisieren von CSS -Animationen mit HTML5 -Audio. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!