Synchronisation des animations CSS avec l'audio HTML5

Les plats clés

• CSS et HTML peuvent être combinés pour ajouter des effets sonores aux animations CSS à l'aide des éléments de HTML. Cela peut être déclenché avec JavaScript et peut améliorer l'expérience utilisateur dans certains cas, telles que les sites Web d'artistes et de jeux ou le contenu pour les enfants.
• La partie la plus cruciale du processus d'animation sonore est d'ajuster l'animation CSS à l'audio pour assurer une expérience audio-visuelle en synchronisation précise. Cela implique de synchroniser des images clés d'animation avec des données de synchronisation audio.
• L'élément est utilisé pour introduire l'audio dans la page. JavaScript est utilisé pour manipuler la lecture. Dans cet exemple, des boutons sont utilisés pour démarrer et réinitialiser la piste.
• Le processus de synchronisation des animations CSS avec l'audio HTML5 est généralement le même sur différents navigateurs. Cependant, tous les navigateurs ne prennent pas en charge tous les formats audio HTML5. Par conséquent, plusieurs sources pour le fichier audio doivent être fournies pour garantir la compatibilité avec différents navigateurs.
• L'utilisation d'animations CSS avec des flux audio en direct est possible, mais plus complexe qu'avec des fichiers audio préenregistrés. L'API audio Web est nécessaire pour analyser le flux audio en temps réel et ajuster les animations CSS en conséquence.

CSS et HTML ont ouvert un terrain de jeu riche pour ajouter du contenu multimédia à vos projets de page Web, d'application Web et de livre électronique. Une façon innovante de combiner ces deux technologies est d'ajouter des effets sonores à vos animations CSS à l'aide de

Bien que le son sur le Web ne soit pas universellement bienvenu, il y a des cas où il peut enrichir l'expérience utilisateur sans être une gêne inutile. Les exemples sont des sites Web d'artistes et de jeux ou du contenu pour les enfants. Le son peut même être utile dans certains cas aux visiteurs handicapés.

La partie la plus importante du processus d'animation sonore est d'ajuster votre animation CSS à l'audio pour réaliser une expérience audio-visuelle en synchronisation précise. Dans cet article, je vais passer par les étapes de la synchronisation des images clés de l'animation aux données de synchronisation audio en utilisant un exemple intéressant d'un cœur stylisé battant.

Voir l'animation CSS à Pen avec Sound: Heartbeat by SitePoint (@SitePoint) sur Codepen.

Construire le cœur

Le premier ingrédient dont nous avons besoin est un cœur que nous voulons animer. Nous en construire un en utilisant des pseudo-éléments CSS. L'avoir construit en HTML plutôt que d'utiliser une image, ne serait-ce que par des pseudo-éléments, nous donne la possibilité d'animer diverses propriétés CSS pour créer une animation plus intéressante.

Nous pouvons souvent trouver plus d'une façon de construire une forme de cette façon, mais si nous prévoyons de l'animer, il vaut la peine de réfléchir à la géométrie et à la façon dont différents choix structurels affectent le mouvement et simplifient le code des images clés.

Dans ce cas, la technique la plus simple consiste à utiliser deux rectangles verticaux arrondis sur le dessus, tournés et positionnés pour se chevaucher pour former une forme cardiaque. Leur taille est définie à l'aide de pourcentages et ils sont absolument positionnés avec un peu de considération de géométrie, il est donc facile de mettre à l'échelle la forme d'origine en modifiant la taille du conteneur. Les rectangles sont tournés de 45 degrés dans le sens des aiguilles d'une montre et dans le sens antihoraire pour former les parties gauche et droite du cœur.

<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>

Les côtés arrondis sont placés avec deux valeurs de rayons pour obtenir une courbe elliptique plutôt que circulaire, et donc une forme de cœur plus naturelle. Parce que les longueurs latérales rectangulaires ont un rapport 5/8, les rayons des ellipses calculent à 50% / 37,5% pour arrondir uniquement les coins qui ne chevauchent pas.

<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>

Maintenant, ce qui reste, c'est d'ajuster le point d'origine transformateur pour les rectangles afin que les points s'alignent au centre de la zone carrée où les rectangles se chevauchent. Le même aspect peut être réalisé en ajustant les déclarations de position absolue au lieu d'utiliser l'approche d'origine transformateur. Mais cela compliquerait plus tard le code des images clés, car cela nous obligerait à contrôler la position plus en détail au lieu de compter sur la fonction d'échelle de transformation pour faire le travail pour nous.

Le point d'origine transformée doit être calculé en ce qui concerne le système de coordonnées avant que toutes les transformations ne soient appliquées (car les transformations peuvent affecter le système de coordonnées, par exemple, la fonction Rotate () fait pivoter le système de coordonnées ainsi que l'élément appliquée à). Encore une fois, le rapport longueur des côtés dicte la position de ce point: il est facile de voir que la position X est à 50%, au centre des rectangles, mais la position y est calculée à 68,75% de la hauteur rectangulaire mesurée en haut (55 * 100% / 80 = 68,75%). Aller avec l'approche de symétrie spécifique est également payante ici, car les deux rectangles partagent la même position de point d'origine transformateur.

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

Et maintenant, nous avons une belle forme de cœur symétrique. Nous pouvons ajouter une boîte à boîte en insestation, différente pour chaque rectangle, pour rendre tout dodu et 3d.

<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>

le son du cœur

Pour introduire l'audio dans la page, nous utilisons l'élément avec le chemin d'accès au fichier audio et sans l'attribut de contrôles parce que nous ne voulons pas que le lecteur audio du navigateur interne apparaisse (lire plus en utilisant HTML5 Audio et vidéo sur 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>

Au lieu des contrôles, nous utilisons JavaScript pour manipuler la lecture. Cet exemple utilise des boutons pour démarrer et réinitialiser la piste, mais avec un peu plus de travail, nous pourrions faire sans les boutons et démarrer et réinitialiser l'audio lorsque l'élément cardiaque est cliqué ou plané.

Notre son est le son d'un battement de cœur répété quatre fois et il servira de son que notre animation CSS suivra.

fléchir ce muscle

Pour faire vibrer notre cœur, nous devons changer sa forme du cœur d'origine et au repos à l'état lorsque le muscle est fléchi. Pour fléchir le cœur, nous l'édigeons un peu et changez sa forme avec le radius frontalier.

Voici comment les styles fléchis se liraient si nous en avions besoin statique, en dehors de l'animation:

<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>

La transition entre les états de repos et fléchies, puis de retour à la forme de repos d'origine, fait un battement cardiaque. Nos pourcentages d'images clés déclarent efficacement, à leur tour, les styles de repos et fléchis. Mais pour le faire synchroniser avec l'audio, nous devons savoir exactement combien de temps l'animation doit jouer et quels pourcentages à utiliser pour quel état cardiaque. Certains logiciels audio utiles peuvent nous aider à analyser le son et à noter les informations de synchronisation dont nous avons besoin pour nos images clés.

Analyser le signal audio avec Audacity

Audacity® est un logiciel multiplateforme open source pour l'enregistrement et l'édition des sons. Il est facile à utiliser et même si vous n'avez pas d'expérience avec des logiciels de montage audio ou vidéo similaires, il ne faudra pas beaucoup d'efforts pour obtenir les informations dont vous avez besoin.

Ouvrez votre signal audio dans Audacity et il vous montrera automatiquement la forme d'onde sonore. Dans la plupart des cas, cela vous suffira de reconnaître où certaines parties de l'audio commencent et terminent, en regardant la forme du signal. Nous obtenons rarement un signal où un autre mode de vue de spectrogramme aide mieux, mais dans ce cas, nous pouvons basculer entre différents modes via le menu déroulant à côté du spectrogramme.

Cliquez sur le spectrogramme marque un instant sur la chronologie, et en dessous, vous pouvez lire en quelques secondes à quelle heure il correspond. C'est ainsi que nous découvrons quand chaque battement de cœur commence, se termine et quand le cœur est à l'état fléchi. Nous utilisons le bouton de lecture pour lire l'intégralité de l'audio ou sélectionner un segment, et notez les fois où nous avons besoin pour les images clés d'animation.

Dans notre cas cardiaque, nous avons 4 battements cardiaques distincts et il est facile de le reconnaître en regardant la forme d'onde. Nous devons prendre note de chaque rythme cardiaque, quand il démarre, se termine et quand il est à l'état fléchi. Pour faciliter cela, nous utilisons une application de feuille de calcul où nous notons les battements cardiaques et leur timing en secondes.

Traduction de synchronisation audio en synchronisation de l'image clé

Une fois que nous avons le calendrier en secondes, nous utilisons des mathématiques pour normaliser la longueur de l'audio à la notation de longueur de 100% que nous utilisons dans l'animation (multipliez par 100 et divisez par le temps audio total). C'est ainsi que nous obtenons les pourcentages d'images clés ainsi que quel style doit être appliqué à une image clé particulière, que le cœur soit détendu ou fléchi.

En lisant à partir de ce tableau, nous pouvons créer les pourcentages d'images clés et les remplir avec les styles associés à chacun. En plus de mettre à l'échelle le cœur et le radius frontalière, nous changeons également la couleur du cœur pour souligner un peu plus l'animation. Étant donné que nous utilisons la transformation pour évoluer les rectangles cardiaques, et que chaque rectangle a également une valeur rotative différente, nous devons créer deux animations différentes, une pour chaque rectangle.

Voici le code @KeyFrames pour le rectangle gauche (l'animation rectangulaire droite ne diffère que par les valeurs d'orientation de rotation et la position du rayon de bordure):

<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>

Enfin, nous attribuons les animations correspondantes aux rectangles. Nous définissons la longueur totale de l'animation sur la longueur de l'audio du rythme cardiaque, le définissons pour jouer une seule fois, avec une fonction de synchronisation linéaire et sans retard. L'utilisation d'une fonction de synchronisation autre que linéaire gâcherait la synchronisation entre l'animation et l'audio, alors n'oubliez pas d'utiliser une fonction de synchronisation linéaire lors de la synchronisation avec une ressource externe.

<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>

L'animation est attribuée à une classe spéciale que nous ajoutons à l'élément Heart avec JavaScript, au même événement que nous déclenchons le jeu audio. C'est ainsi que nous nous assurons que l'animation et l'audio commencent en même temps et tout le travail de synchronisation est payant.

Et c'est tout pour l'animation de rythme cardiaque, que vous pouvez voir dans la démo ci-dessous.

Voir l'animation CSS à Pen avec Sound: Heartbeat by SitePoint (@SitePoint) sur Codepen.

Plus d'animations sonores CSS!

faim de plus de goodies CSS que vous pouvez entendre et observer? Voici quelques autres exemples que vous pouvez démonter et apprendre de:

Voir le Pen 5A20EF9D5C68ABC42320AC73639F0E39 par SitePoint (@SitePoint) sur Codepen.

Voir l'animation CSS Cuckoo Cuckoo avec Sound by SitePoint (@SitePoint) sur Codepen.

Voir le stylo Qobqro par SitePoint (@SitePoint) sur Codepen.

Vous trouverez ci-dessous une liste de source pour les ressources médiatiques utilisées dans cet article:

• The Heartbeat Sound (Domain public)
• Signal de croisement des chemins de fer (domaine public)
• Sound d'horloge de coucou (domaine public)
• Image du chronomètre (domaine public)
• Temps de temps par Iwan Gabovitch sous la licence CC-BY 3.0

Réflexions finales

J'espère que cet article vous inspire à envisager d'utiliser des sons dans vos projets, le cas échéant et vous encourage à trouver des moyens imaginatifs de combiner le visuel avec l'audio.

Et vous? Avez-vous déjà utilisé des sons avec vos animations? Y a-t-il un cas particulier d'animation CSS que vous aimeriez voir? Dites-nous à ce sujet dans les commentaires!

Questions fréquemment posées (FAQ) sur la synchronisation des animations CSS avec HTML5 Audio

Comment puis-je synchroniser les animations CSS avec l'audio HTML5 dans différents navigateurs?

Le processus de synchronisation des animations CSS avec l'audio HTML5 est généralement la même sur différents navigateurs. Cependant, il est important de noter que tous les navigateurs ne prennent pas en charge tous les formats audio HTML5. Par exemple, MP3 est pris en charge par tous les navigateurs, mais OGG n'est pas pris en charge par Internet Explorer. Par conséquent, il est conseillé de fournir plusieurs sources pour votre fichier audio afin d'assurer la compatibilité avec différents navigateurs.

Puis-je utiliser des animations CSS avec des flux audio en direct?

Oui, vous pouvez utiliser des animations CSS avec en direct? Streams audio. Cependant, le processus est un peu plus complexe qu'avec des fichiers audio préenregistrés. Vous devrez utiliser l'API audio Web pour analyser le flux audio en temps réel et ajuster vos animations CSS en conséquence.

Pourquoi mes animations CSS ne se synchronisent pas avec mon audio HTML5?

Il pourrait y avoir plusieurs raisons pour lesquelles vos animations CSS ne se synchronisent pas avec votre audio HTML5. Un problème courant est que l'animation et les durées audio ne correspondent pas. Assurez-vous que la durée de votre animation CSS correspond à la longueur de votre fichier audio. Assurez-vous également que votre fichier audio est correctement chargé et en lecture avant de démarrer l'animation.

Comment puis-je contrôler la vitesse de mon animation CSS en fonction du taux de lecture audio?

Vous pouvez contrôler le contrôle de Vitesse de votre animation CSS en fonction du taux de lecture audio en utilisant la propriété «Playbackrate» de l'élément audio HTML5. En ajustant cette propriété, vous pouvez faire jouer l'audio plus rapidement ou plus lent, et votre animation CSS ajustera sa vitesse en conséquence.

Puis-je synchroniser les animations CSS avec l'audio HTML5 sur les appareils mobiles?

Oui , vous pouvez synchroniser les animations CSS avec l'audio HTML5 sur les appareils mobiles. Cependant, gardez à l'esprit que les navigateurs mobiles ont certaines limites et différences par rapport aux navigateurs de bureau. Par exemple, certains navigateurs mobiles n'autorisent pas l'audio automatique, vous devrez donc peut-être ajouter un bouton de lecture pour votre fichier audio.

Comment puis-je rendre mes animations CSS plus réactives aux modifications audio?

Pour rendre vos animations CSS plus sensibles aux modifications audio, vous pouvez utiliser l'API audio Web. Cette API vous permet d'analyser les données audio en temps réel et d'ajuster vos animations CSS en fonction de l'état actuel de l'audio.

Puis-je utiliser des animations CSS avec l'audio HTML5 dans un site WordPress?

Oui, vous pouvez utiliser CSS Animations avec HTML5 Audio dans un site WordPress. Vous pouvez ajouter vos animations CSS et votre audio HTML5 dans les sections CSS et HTML personnalisées de votre thème WordPress, ou vous pouvez utiliser un plugin qui vous permet d'ajouter CSS et HTML.

Comment puis-je tester la synchronisation de mes animations CSS avec HTML5 Audio?

Vous pouvez tester la synchronisation de vos animations CSS avec l'audio HTML5 en utilisant les outils de développeur dans votre navigateur. Ces outils vous permettent d'inspecter le HTML, le CSS et le JavaScript de votre page, et vous pouvez les utiliser pour vérifier si vos animations et vos audio sont en cours de lecture comme prévu.

Puis-je synchroniser les animations CSS avec l'audio HTML5 dans un Site de commerce électronique?

Oui, vous pouvez synchroniser les animations CSS avec l'audio HTML5 dans un site de commerce électronique. Cela peut être un excellent moyen d'améliorer l'expérience utilisateur sur votre site. Par exemple, vous pouvez utiliser les animations et l'audio CSS pour mettre en évidence des offres spéciales ou de nouveaux produits.

Comment puis-je améliorer les performances de mes animations CSS synchronisées avec l'audio HTML5?

pour améliorer les performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances des performances de Vos animations CSS synchronisées avec HTML5 Audio, vous pouvez optimiser vos fichiers CSS et audio. Par exemple, vous pouvez réduire votre CSS et compresser vos fichiers audio pour réduire leur taille et leur temps de chargement. Envisagez également d'utiliser les propriétés CSS accélérées par le matériel pour vos animations, car elles peuvent améliorer les performances de rendu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!