CSSアニメーションをHTML5オーディオと同期します

キーテイクアウト

• CSSとHTMLを組み合わせて、HTMLの要素を使用してCSSアニメーションにサウンドエフェクトを追加できます。これはJavaScriptでトリガーでき、アーティストやゲームのWebサイトや子供向けのコンテンツなど、特定のケースでユーザーエクスペリエンスを向上させることができます。 サウンドアニメーションプロセスの最も重要な部分は、CSSアニメーションをオーディオに調整して、正確な視覚視覚エクスペリエンスを確保することです。これには、アニメーションキーフレームをオーディオタイミングデータに同期することが含まれます
この要素は、ページにオーディオを導入するために使用されます。 JavaScriptは、再生を操作するために使用されます。この例では、ボタンを使用してトラックを起動してリセットします。
• CSSアニメーションをHTML5オーディオと同期するプロセスは、一般に異なるブラウザー間で同じです。ただし、すべてのブラウザがすべてのHTML5オーディオフォーマットをサポートしているわけではありません。したがって、異なるブラウザとの互換性を確保するために、オーディオファイルの複数のソースを提供する必要があります。
ライブオーディオストリームを備えたCSSアニメーションの使用は可能ですが、事前に録音されたオーディオファイルよりも複雑です。オーディオストリームをリアルタイムで分析し、それに応じてCSSアニメーションを調整するには、WebオーディオAPIが必要です。
• CSSとHTMLは、Webページ、Webアプリ、電子書籍プロジェクトにマルチメディアコンテンツを追加するための豊富な競技場を開きました。これら2つのテクノロジーを組み合わせる革新的な方法の1つは、
Web上のサウンドは普遍的に歓迎されていませんが、不必要な迷惑にならずにユーザーエクスペリエンスを豊かにすることができる場合があります。例は、子供向けのアーティストとゲームのウェブサイトまたはコンテンツです。障害のある訪問者にとって、特定のケースでも音が役立つ可能性があります。
• サウンドアニメーションプロセスの最も重要な部分は、CSSアニメーションをオーディオに調整して、正確な視覚視覚エクスペリエンスを実現することです。この記事では、様式化されたハートの興味深い例を使用して、アニメーションキーフレームをオーディオタイミングデータに同期する手順を説明します。
codepenのSitePoint by SitePoint by SitePoint（@SitePoint）のペンCSSアニメーションを参照してください。
• 心臓の構築

私たちが必要とする最初の成分は、私たちがアニメーションしたい心です。 CSS擬似要素を使用して1つを構築します。イメージを使用するのではなく、HTMLで構築することは、擬似要素を通してのみであっても、さまざまなCSSプロパティをアニメーション化してより興味深いアニメーションを作成する機会を与えてくれます。

この方法で形状を構築する方法を複数見つけることができますが、アニメーション化することを計画している場合は、ジオメトリと、異なる構造的選択が動きにどのように影響し、キーフレームコードを簡素化するかについて考える価値があります。この場合、最も単純な手法は、上に丸みを帯びた2つの垂直長方形を使用し、回転し、オーバーラップして心臓の形を形成することです。サイズはパーセンテージを使用して設定されており、幾何学的な考慮事項で絶対に配置されているため、コンテナサイズを変更することで元の形状を簡単に拡張できます。長方形は時計回りに45度回転して反時計回りに回転して、心臓の左右の部分を形成します。

丸い辺は、円形の曲線ではなく楕円形を取得するために2つの半径値で設定されているため、より自然な心臓の形になります。長方形の辺の長さの比率は5/8であるため、省略記号は50％/37.5％に計算して、重複しない角のみを丸めます。

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

残りの部分は、長方形の変換点オリジンポイントを調整して、長方形が重複する正方形の領域の中心にポイントが並んでいることです。変換オリジンアプローチを使用する代わりに、絶対位置宣言を調整することで同じ外観を実現できます。しかし、それは後にキーフレームコードを複雑にするでしょう。なぜなら、それは私たちのために作業を行うために変換スケール関数に頼るのではなく、より詳細に位置を制御することを強制するからです。

変換点は、変換が適用される前に座標系に関して計算する必要があります（たとえば、タート（）関数は、適用される要素とともに座標系を回転させるため、変換は座標系に影響を与える可能性があるためです。に）。繰り返しますが、その点の長さの比率はその点の位置を決定します。Xの位置が長方形の中心で50％であることがわかりますが、Y位置は上部から測定された長方形の高さの68.75％で計算されます。 （55*100％/80 = 68.75％）。両方の長方形が同じ変換オリジンポイント位置を共有しているため、特定の対称性アプローチを使用すると、ここでも報われます。

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

そして今、私たちは美しい対称的なハートの形をしています。長方形ごとに異なるインセットボックスシャドウを追加して、すべてのふっくらと3Dにすることができます。

心の音

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

ページにオーディオを導入するには、内部ブラウ​​ザーオーディオプレーヤーを表示したくないため、オーディオファイルへのパスとコントロール属性へのパスを備えた要素を使用します（HTML5オーディオの使用と使用の詳細を読むmdnのビデオ）。

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

コントロールの代わりに、JavaScriptを使用して再生を操作します。この例では、ボタンを使用してトラックを起動してリセットしますが、もう少し作業を行うことで、ボタンなしで行うことができ、ハート要素がクリックまたはホバリングされたときにオーディオを起動してリセットできます。

私たちのサウンドは、ハートビートのサウンドが4回繰り返される音で、CSSアニメーションが続く音として機能します。その筋肉を伸ばします

心臓をカチカチさせるには、筋肉が曲がったときに、元の静止心から状態にその形を変える必要があります。心臓を曲げるために、私たちはそれを少し縮小し、ボーダーラジウスでその形を変えます。

ここに、アニメーションの外側で静的なスタイルが必要な場合、曲がったスタイルがどのように読み取られるかを次に示します。

静止状態と曲げ状態の間の遷移と、元の安静時に戻ると、1つの心臓が鼓動されます。キーフレームのパーセンテージは、順番に、安静時および屈曲スタイルを効果的に宣言します。ただし、オーディオと同期するには、アニメーションがどのくらいの時間再生されるべきか、どのハート状態を使用するキーフレームの割合を正確に知る必要があります。いくつかの便利なオーディオソフトウェアがサウンドを分析し、キーフレームに必要なタイミング情報に注意するのに役立ちます。 Audacity

でオーディオ信号を分析します

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

Audacity®は、音を録音および編集するためのオープンソースのクロスプラットフォームソフトウェアです。使いやすく、同様のオーディオやビデオ編集ソフトウェアの経験がない場合でも、必要な情報を取得するのに多くの努力が必要ではありません。

オーディオ信号をAudacityで開くと、音波が自動的に表示されます。ほとんどの場合、これは、信号の形状を見ることで、オーディオの特定の部分がどこで開始され、終了するかを認識するのに十分です。他のいくつかのスペクトログラムビューモードがより良い役立つ信号を取得することはめったにありませんが、その場合、スペクトログラムの横にあるドロップダウンメニューを介して異なるモードを切り替えることができます。

スペクトログラムをクリックすると、タイムラインの瞬間が表示されます。これは、各ハートビートがいつ始まり、終了し、心が曲がった状態にあるかを知る方法です。再生ボタンを使用してオーディオ全体を再生するか、セグメントを選択し、アニメーションキーフレームに必要な時間に注意してください。

ハートビートの場合、4つの異なるハートビートがあり、波形を見ると簡単に認識できます。各ハートビート、それが開始、終了し、屈曲した状態にあるときに注意する必要があります。これを簡単にするために、スプレッドシートアプリを使用して、ハートビートとそのタイミングを数秒でメモします。 オーディオタイミングをキーフレームのタイミングに翻訳します

数秒でタイミングができたら、数学を使用して、オーディオの長さをアニメーションで使用する100％の長さ表記に正規化します（100を掛けてオーディオ時間の合計で除算）。これは、キーフレームのパーセンテージを取得する方法と、ハートをリラックスするか曲げても、特定のキーフレームに適用するスタイルを取得する方法です。

このテーブルから読み取りキーフレームパーセンテージを作成し、それぞれに関連付けられたスタイルを記入できます。心臓と境界線を拡大することに加えて、心臓の色を変えてアニメーションをもう少し強調します。 Transformを使用して心臓の長方形をスケーリングし、各長方形にも異なる回転値があるため、長方形ごとに2つの異なるアニメーションを作成する必要があります。

左の長方形の@KeyFramesコードは次のとおりです（右の長方形のアニメーションは、回転方向の値とボーダーラジウスの位置でのみ異なります）：

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

最後に、対応するアニメーションを長方形に割り当てます。合計アニメーションの長さをハートビートオーディオの長さに設定し、線形タイミング関数を使用して、遅延なしで1回だけ再生するように設定します。線形以外のタイミング関数を使用すると、アニメーションとオーディオの間の同期が台無しになるため、外部リソースに同期するときは、常に線形タイミング関数を使用することを忘れないでください。

アニメーションは、JavaScriptを使用してHeart Elementに追加する特別なクラスに割り当てられます。同じイベントで、オーディオプレイをトリガーします。これは、アニメーションとオーディオが同時に始まり、すべての同期作業が報われることを保証する方法です。

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

そして、それはあなたが以下のデモで見ることができるハートビートアニメーションのためのものです。

codepenのSitePoint by SitePoint by SitePoint（@SitePoint）のペンCSSアニメーションを参照してください。

その他のCSSサウンドアニメーション！

あなたが聞くことができるより多くのCSSグッズに飢えているだけでなく、観察しますか？ここにあなたが分解して学ぶことができるいくつかの例が次のとおりです：

CodepenのSitePoint（@SitePoint）によるPEN 5A20EF9D5C68ABC42320AC73639F0E39を参照してください

CodepenのSitePoint（@SitePoint）によるサウンド付きのペンカッコウクロックCSSアニメーションを参照してください。

CodepenのSitePoint（@SitePoint）のペンQOBQROを参照してください 以下は、この記事で使用されているメディアリソースのソースのリストです。

ハートビートサウンド（パブリックドメイン）

鉄道交差信号（パブリックドメイン）

Cuckoo Clock Sound（パブリックドメイン）

STOPWATCH IMAGE（パブリックドメイン）

CC-by 3.0ライセンスの下でIwan Gabovitchが不足している

最終的な考え
この記事が、必要に応じてプロジェクトでサウンドを使用することを検討することを促し、ビジュアルをオーディオと組み合わせる想像力豊かな方法を考え出すことを奨励することを願っています。

あなたはどうですか？以前にアニメーションでサウンドを使用したことがありますか？あなたが見たいCSSアニメーションの特定のケースはありますか？コメントでそれについてすべて教えてください！

HTML5オーディオとCSSアニメーションの同期に関するよくある質問（FAQ）

さまざまなブラウザーでHTML5オーディオとCSSアニメーションを同期するにはどうすればよいですか？

CSSアニメーションをHTML5オーディオと同期するプロセスは、一般に異なるブラウザーで同じです。ただし、すべてのブラウザがすべてのHTML5オーディオ形式をサポートしているわけではないことに注意することが重要です。たとえば、MP3はすべてのブラウザでサポートされていますが、OGGはInternet Explorerによってサポートされていません。したがって、さまざまなブラウザとの互換性を確保するために、オーディオファイルに複数のソースを提供することをお勧めします。オーディオストリーム。ただし、このプロセスは、事前に録音されたオーディオファイルよりも少し複雑です。 WebオーディオAPIを使用してオーディオストリームをリアルタイムで分析し、それに応じてCSSアニメーションを調整する必要があります。 CSSアニメーションがHTML5オーディオと同期していない理由がいくつかあります。よくある問題の1つは、アニメーションとオーディオの期間が一致しないことです。 CSSアニメーションの期間がオーディオファイルの長さと一致することを確認してください。また、アニメーションを開始する前にオーディオファイルが適切に読み込まれ、再生されていることを確認してください。

オーディオ再生レートに基づいてCSSアニメーションの速度を制御するにはどうすればよいですか？ HTML5オーディオ要素の「PlaybackRate」プロパティを使用して、オーディオ再生レートに基づくCSSアニメーションの速度。このプロパティを調整することにより、オーディオの再生をより速くまたは遅くすることができ、CSSアニメーションはそれに応じて速度を調整します。 、モバイルデバイスでHTML5オーディオとCSSアニメーションを同期できます。ただし、モバイルブラウザにはデスクトップブラウザーと比較していくつかの制限と違いがあることに注意してください。たとえば、一部のモバイルブラウザでは自動演奏オーディオを許可していないため、オーディオファイルの再生ボタンを追加する必要がある場合があります。

CSSアニメーションをオーディオの変更に対してより応答させるには、Web Audio APIを使用できます。このAPIを使用すると、オーディオデータをリアルタイムで分析し、オーディオの現在の状態に基づいてCSSアニメーションを調整できます。はい、WordPressサイトでHTML5オーディオを備えたCSSアニメーションを使用できます。 WordPressテーマのカスタムCSSおよびHTMLセクションにCSSアニメーションとHTML5オーディオを追加することも、カスタムCSSとHTMLを追加できるプラグインを使用できます。ブラウザの開発者ツールを使用して、CSSアニメーションのHTML5オーディオとの同期をテストできます。これらのツールを使用すると、ページのHTML、CSS、およびJavaScriptを検査することができ、アニメーションとオーディオが予想どおりに再生されているかどうかを確認できます。 eコマースサイト？
はい、eコマースサイトでHTML5オーディオとCSSアニメーションを同期できます。これは、サイトでのユーザーエクスペリエンスを向上させるための素晴らしい方法です。たとえば、CSSアニメーションとオーディオを使用して特別なオファーや新製品を強調することができます。 CSSアニメーションはHTML5オーディオと同期しており、CSSおよびオーディオファイルを最適化できます。たとえば、CSSを監督し、オーディオファイルを圧縮してサイズと読み込み時間を短縮できます。また、レンダリングパフォーマンスを改善できるため、アニメーションにハードウェアアクセラレーションのCSSプロパティを使用することを検討してください。

以上がCSSアニメーションをHTML5オーディオと同期しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。