CSSでサウンドを再生するいくつかのテクニック

CSS は、スタイル、レイアウト、プレゼンテーションの領域です。色彩、サイズ、アニメーションが溢れています。しかし、Web ページ上の再生音も制御できることをご存知ですか?

この記事ではいくつかのテクニックを紹介します。これは実際にはハックではなく、HTML と CSS の厳密な実装です。しかし、正直に言うと、これはまだハックです。オーディオは依然として <audio> 要素または JavaScript によって制御される可能性があるため、本番環境でこれを使用することはお勧めしません。

ヒント

CSS を使用してサウンドを再生する方法はいくつかありますが、基本的な考え方は同じです。つまり、オーディオ ファイルを Web ページに隠しオブジェクトまたはドキュメントとして挿入し、アクションが発生したときに表示します。このような：

<スタイル>
  埋め込み { 表示: なし; }
  ボタン:アクティブ + 埋め込み { 表示: ブロック; }
</スタイル>

<button>サウンドを再生</button>
<embed src="オーディオファイルへのパス.mp3" />

このコードでは <embed> タグを使用していますが、同様の結果を得るために <object> タグを使用することもできます。

<object data="オーディオファイルへのパス.mp3"></object>

このデモと関連技術についての簡単なメモ。約 1 年前、私はこの手法を使用して、HTML と CSS のみを使用して CodePen ミニピアノを開発しました。これは問題なく動作しましたが、その後状況が変わり、デモは CodePen で動作しなくなりました。

最も大きな変化は安全性に関するものです。オーディオの代わりに埋め込みまたはオブジェクトを使用するため、インポートされたファイルはより厳格なセキュリティ チェックの対象となります。クロスオリジン アクセス制御ポリシー (CORS) は、オーディオ ファイルが、ファイルをインポートするページと同じプロトコルとドメイン上にあることを強制します。サウンドを base64 に入れても機能しなくなります。 さらに、このトリックが機能するには、あなた (およびユーザー) がブラウザ設定で自動再生を有効にしておく必要がある場合があります。

もう 1 つの変更点は、ブラウザがサウンドを 1 回だけ再生するようになったことです。以前のブラウザでは、毎回サウンドが再生されていたと確信していました。しかし、それはもはや機能していないようで、テクニックの範囲が大幅に制限されます (そして、このピアノのデモンストレーションはほとんど役に立たなくなります)。

サーバーとファイルを制御できる場合は、CORS の問題を回避できますが、自動再生を無効にすることはすべてのユーザーが制御できるものではありません。

なぜこれが機能するのか

この動作の背後にある理論は、埋め込みタグの定義に記載されています。

潜在的にアクティブではない埋め込み要素が潜在的にアクティブになるたびに、およびその src 属性または type 属性が設定、変更、または削除されるたびに、ユーザー エージェントは埋め込みタスク ソースを使用してタスクをキューに登録し、埋め込み要素のセットアップ手順を実行する必要があります。

オブジェクト タグの定義についても同様です。

次のいずれかが発生するたびに:

[...]

要素はレンダリング済みからレンダリングされていない状態に、またはその逆に変わります。

[...] ユーザーエージェントは、オブジェクト t 要素が何を表しているかを (再) 判断するために、次の手順を実行するタスクをキューに登録する必要があります。 [そして最後にそれを処理して実行する]

オブジェクト処理の仕組み（ファイルが処理され、レンダリング時に実行される）についてはより明確に理解していますが、埋め込みの場合は「潜在的なアクティビティ」という概念があり、これはもう少し複雑に思えます。これは、オブジェクトの場合と同様に初期レンダリング時に実行されますが、いくつかの追加の条件があります。

ご覧のとおり、技術的にこれはまったくトリックではありませんが、すべてのブラウザが同じように動作するわけではありません。

ブラウザのサポート

多くの同様のハックと同様に、この機能のサポートは不完全であり、ブラウザごとに大きく異なります。

Opera および Chrome ブラウザでは動作します。ただし、他の Chromium ベースのブラウザの場合、サポートは最小限です。たとえば、Mac 上の Edge ではオーディオが正しく再生されますが、Brave ブラウザでは最新バージョンでないとオーディオが正しく再生されません。

Safari では動作しません。また、Windows 上の Internet Explorer や Edge でも動作しません。これらのブラウザでは動作しません。

Firefox はページが読み込まれるとすぐにすべてのサウンドを再生しますが、ページが非表示になって再度表示されるとサウンドは再生されなくなります。サウンドが「ユーザーの操作なし」で再生されようとすると、コンソールでセキュリティ警告がトリガーされ、ユーザーが最初にサイトを承認しない限り、サウンドはブロックされます。

全体的に、これは興味深い CSS トリックですが、これは「本番環境では使用しないでください」というようなものです...

CSS でサウンドを再生するためのいくつかのテクニックに関するこの記事はこれで終わりです。CSS でサウンドを再生するための関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。