HTML5を使用すると、要素を使用してWebページにサウンドと音楽を簡単に追加できます。 実際、最も難しいことは、サウンドファイルが幅広い種類のブラウザで再生されることを確認するために必要な複数のソースを作成することです。
HTML5を使用する利点は、2つのタグを使用するだけでサウンドを埋め込むことができることです。 ブラウザは、 IMG要素を使用するときにイメージを表示するのと同じようにサウンドを再生します。
HTML5 Webページにサウンドを追加する方法
HTMLエディタ 、サウンドファイル（MP3形式が望ましい）、サウンドファイルコンバータが必要です。
- まず、サウンドファイルが必要です。 このファイルはMP3（ .mp3 ）形式で録音するのが最善です。これは、ほとんどのブラウザ（Android 2.3以降、Chrome 6以上、IE 9以上、iOS 3以上、Safari 5以上）でサポートされているためです。
- ファイルをVorbis形式（ .ogg ）に変換し、Firefox 3.6以降とOpera 10.5以降のサポートを追加します。 あなたはVorbis.comのようなコンバータを使うことができます。 あなたのMP3をWAVファイル形式（ .wav ）に変換して、FirefoxとOperaのサポートを受けることもできます。 私はあなたのファイルをセキュリティのためだけに3種類すべて投稿することをお勧めしますが、必要なのはMP3と他のタイプです。
- すべてのオーディオファイルをWebサーバーにアップロードし、保存したディレクトリを書き留めます。ほとんどのデザイナーがイメージディレクトリにイメージを保存するように、オーディオファイルだけをサブディレクトリに配置することをお勧めします。
- サウンドファイルコントロールを表示させるAUDIO要素をHTMLファイルに追加します。 <オーディオコントロール>
- AUDIO要素内にアップロードする各オーディオファイルのSOURCE要素を配置します。
-
- AUDIO要素内のHTMLは、 AUDIO要素をサポートしていないブラウザのフォールバックとして使用されます。 だから、いくつかのHTMLを追加します。 最も簡単な方法は、ファイルをダウンロードできるようにHTMLを追加することですが、HTML 4.01埋め込みメソッドを使用してサウンドを再生することもできます。 以下は単純なフォールバックです：
お使いのブラウザはオーディオ再生をサポートしていません。ファイルをダウンロードしてください：
- 最後に行う必要があるのは、 AUDIO要素を閉じることです：
- 作業が完了したら、HTMLは次のようになります：
その他のヒント
- あなたのHTMLが検証するようにHTML5 doctype（）を使用してください
- 要素に使用可能な属性を確認して、要素に追加できる他のオプションを確認します。
- デフォルトでコントロールを含むようにHTMLを設定し、自動再生を無効にしています。 もちろん、それを変更することはできますが、多くの人が自動的に開始する音/最高でも迷惑にならないように制御できない音を見つけ、頻繁にそのページを出ることがあります。