HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5でWebページに音声（オーディオ）を埋め込む方法を解説

HTML5では、<audio>タグを使用することで、Webページに音声ファイルを簡単に埋め込むことができます。Flashなどのプラグインや外部ライブラリに依存せず、ネイティブなHTMLだけでオーディオプレイヤーを実装できるのが大きな特徴です。

audioタグの基本的な使い方

<audio>タグにcontrols属性を指定すると、再生・一時停止・音量調節などができるコントロールパネルがブラウザ上に表示されます。再生する音声ファイルは、<source>タグのsrc属性でパスを指定し、type属性でMIMEタイプを指定します。

サンプルコード

以下のコードを実行すると、<audio>タグによる音声再生を実際に確認できます。再生ボタンをクリックして動作を試してみてください。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML audio Tag</title>
    </head>
    <body>
        <p>再生ボタンをクリックしてください...</p>
        <p>（曲：Windowsのサンプル音楽として提供されている「Kalimba」）</p>
        <audio controls>
            <source src = "/html/Kalimba.mp3" type = "audio/mpeg">
        </audio>
    </body>
</html>

audioタグで使える主な属性

<audio>タグには、用途に応じて以下のような属性を組み合わせて指定できます。

  • controls：再生・一時停止・音量などの操作パネルを表示します。
  • autoplay：ページ読み込み時に自動再生します（多くのブラウザでは制限があります）。
  • loop：音声を繰り返し再生します。
  • muted：ミュート状態で再生を開始します。
  • preload：音声の事前読み込みの動作を指定します（auto / metadata / none）。

対応している主なオーディオ形式

主要なブラウザでサポートされている代表的なオーディオ形式は以下のとおりです。複数の<source>タグを記述しておくと、ブラウザが対応している形式を自動的に選択してくれます。

  • MP3（type="audio/mpeg"）：最も広くサポートされている形式
  • WAV（type="audio/wav"）：無圧縮で高音質だがファイルサイズが大きい
  • Ogg（type="audio/ogg"）：オープンソースの圧縮形式

このように、<audio>タグを使えば数行のHTMLだけで音声再生機能を実装できます。ポッドキャストや効果音、BGMの再生など、さまざまな場面で活用してみてください。

  1. FirefoxのサイドバーにWebページを表示して2画面同時閲覧する方法

    ネットを閲覧しながらToDoリストを確認したい、あるいは為替レートのようなリアルタイム情報を常にチェックしつつ作業を進めたい——そんな経験はありませんか?そんなときにおすすめなのが、2つのWebページを並べて表示する方法です。従来のようにブラウザウィンドウを2つ開いて画面半分ずつにサイズを調整するのではなく、Firefoxに標準搭載されている「サイドバーにWebページを表示する機能」を活用してみましょう。Firefoxでは、左側にWebページを開いたまま右側で通常どおり閲覧できるため、情報を見逃すことなく快適にブラウジングできます。この記事では、この便利な機能の使い方を詳しく解説します。注意:

  2. Webページが読み込まれないときの対処法|原因別トラブルシューティング完全ガイド

    インターネットを閲覧している最中にWebページが読み込まれないのは、最もストレスのたまるトラブルの一つです。多くの人は「ネットワークの問題だろう」と考えがちですが、実際にはそうとは限りません。デバイス側のソフトウェア不具合、インターネット接続のエラー、あるいはWebサイト側のサーバーがダウンしていることなど、さまざまな原因が考えられます。 読み込まれないWebページのトラブルシューティング方法 1. インターネット接続を確認する 特定のサイトだけが読み込まれない問題を解決するには、まず自分の接続状況を確認することが第一歩です。以下のポイントを順番にチェックしてみましょう。 正しいネットワーク