Synchronisieren von CSS -Animationen mit HTML5 -Audio

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!