CSSで音を再生します

CSSは、スタイリング、レイアウト、視覚的なプレゼンテーションに優れており、色、サイズ、アニメーションに満ちています。しかし、あなたはそれがウェブページでのオーディオ再生を微妙に制御できることを知っていましたか？

この記事では、巧妙なテクニックを発表します。これは、真のハックよりもHTMLとCSSの正確なアプリケーションですが、確かに1つに境界します。ただし、生産環境の場合、オーディオコントロールにネイティブオーディオ要素やJavaScriptを使用することを強くお勧めします。

テクニック

CSS駆動型のサウンド再生にはいくつかの方法が存在しますが、コア原則は一貫しています。オーディオファイルをページ内に隠し要素として埋め込み、再生をトリガーするように明らかにします。これが例です：

<style>
  embed { display: none; }
  button:active   embed { display: block; }
</style>
<button>音を再生します</button>
<embed src="path-to-audio-file.mp3"></embed>

これはを利用します<embed></embed>タグ。<object></object>タグは同様の機能を提供します：

<object data="path-to-audio-file.mp3"></object>

重要な考慮事項：

以前のCodepen Pianoプロジェクトは、この手法の有効性を実証しました。ただし、最近のブラウザの更新により、制限が導入されています。

• セキュリティ制限：使用<embed></embed>または<object></object>オーディオファイルをより厳格なセキュリティチェックにします。 CORSポリシーでは、オーディオファイルがWebページと同じプロトコルとドメインに存在する必要があります。 Base64エンコードはこれを回避しません。ブラウザの設定では、オートプレイを明示的に有効にする必要がある場合があります。

• 単一の再生：以前のブラウザの動作とは異なり、通常は一度だけ再生されるようになりました。これにより、手法の適用性が大幅に制限されます。

サーバー側の制御はCORSの問題を軽減できますが、自動再生の制限はユーザーに依存し、制御を超えています。

なぜこれが機能するのか

基礎となるメカニズムは、<embed></embed>そして<object></object>タグ：ブラウザは、要素が「潜在的にアクティブ」になったり、レンダリング状態を変更したりするための埋め込みオーディオを処理およびレンダリングします。技術的にはハックではありませんが、ブラウザの矛盾は存在します。

ブラウザの互換性

クロスブラウザーのサポートは一貫性がありません：

• オペラとクロム：優れた互換性。

• クロムベースのブラウザ：サポートは異なります。 MacOSのEdgeは確実に機能しますが、Braveは最新バージョンを必要とする場合があります。

• Safari、Internet Explorer、Edge（Windows）：一般的にサポートされていません。

• Firefox：ページの読み込みですべてのサウンドを一度に再生し、ユーザーの相互作用に関するセキュリティ警告のために後続の再生をブロックします。

このCSSのトリックは、面白い一方で、「これを自宅で試してはいけない」テクニックと考えられています。もちろん、あなたがその癖を探求することに熱心なソフトウェア開発者です。

以上がCSSで音を再生しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。