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




