音声の挿入: <audio>

3.1 <audio>タグの基本

HTML5の<audio>タグは、ウェブページに音声ファイルを挿入するために使われるよ。この要素はさまざまなオーディオフォーマットをサポートしていて、再生、一時停止、音量調整のための内蔵コントロールをユーザーに提供するんだ。

シンプルな例

<audio>タグは、音声ファイルへのパスを示すsrc属性と一緒に使われるよ。再生や一時停止、音量調整の標準的なコントロールボタンを表示するためにcontrols属性を追加することもできるんだ。

    
      <audio src="audiofile.mp3" controls></audio>
    
  

複数のソースの例

異なるブラウザのサポートを確保するために、<source>タグを使って複数のオーディオソースを指定できるよ。これでブラウザがサポートするオーディオフォーマットを選択することができるんだ。

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        Your browser does not support the audio element.
      </audio>
    
  

<audio>タグの属性

• src: 音声ファイルへのパスを示す。
• controls: 再生コントロールを表示する
• autoplay: ページ読み込み時に自動的にオーディオを再生する
• loop: 再生終了後にオーディオを繰り返す
• muted: 読み込み時に音声をミュートにする
• preload: ブラウザが音声をどのようにロードするべきか指示する。可能な値: none, metadata, auto

3.2 属性の使用例

controls属性

controls属性は、"Play"や"Pause"ボタン、音量調整ノブなどの標準的な再生コントロールをオーディオに追加するんだ。この属性はオーディオ要素をよりインタラクティブで使いやすくしてくれる。

例：

    
      <audio src="audiofile.mp3" controls></audio>
    
  

autoplay属性

autoplay属性はページ読み込み後すぐに音声ファイルを自動的に再生開始するんだ。この属性は慎重に使った方が良い、突然の音声再生はユーザーを驚かせるかもしれないからね。

例：

    
      <audio src="audiofile.mp3" autoplay></audio>
    
  

loop属性

loop属性は音声ファイルを無限ループで再生するように指示するんだ。これは背景音楽や繰り返し再生が必要な効果音に便利だよ。

例：

    
      <audio src="audiofile.mp3" autoplay loop></audio>
    
  

muted属性

muted属性は読み込み時に音声ファイルをミュートにするんだ。これが便利なのは、音量をオフにしておきたいけど、必要に応じてユーザーに音声をオンにさせたい場合だね。

    
      <audio src="audiofile.mp3" muted></audio>
    
  

preload属性

preload属性はページ読み込み時にブラウザが音声ファイルをどのようにロードすべきか示すんだ。以下の3つの値を取ることができる：

• none: ブラウザは音声を事前にロードしない
• metadata: ブラウザはメタデータ（長さ、サイズなど）のみをロードする
• auto: ページが読み込まれたときにブラウザが音声を完全にロードする

    
      <audio src="audiofile.mp3" preload="auto"></audio>
    
  

3.3 サポートされているオーディオフォーマット

クロスブラウザ互換性を確保するために、複数のオーディオフォーマットを使うことが推奨されているよ。最も一般的なフォーマットにはMP3、OGG、WAVがあるんだ。それぞれ詳しく見てみよう。

MP3フォーマット

MP3 (MPEG-1 Audio Layer III) は最も人気のあるオーディオフォーマットの一つだよ。ほとんどのブラウザやデバイスでサポートされているんだ。MP3は音質を保ちながらファイルサイズを小さくするために損失圧縮を使っているんだよ。

例：

    
      <audio src="audiofile.mp3" type="audio/mpeg"></audio>
    
  

OGGフォーマット

OGG (Ogg Vorbis) は損失圧縮を使ったオープンなオーディオフォーマットで、ほとんどの現代ブラウザでサポートされているよ。このフォーマットは良い音質を提供し、MP3の代替としてよく使われているんだ。

例：

    
      <audio src="audiofile.ogg" type="audio/ogg"></audio>
    
  

WAVフォーマット

WAV (Waveform Audio File Format) は非圧縮の音声フォーマットで、高音質を提供するんだ。でも、WAVファイルはMP3やOGGに比べてファイルサイズが大きくなるので、ウェブでの使用頻度は低いんだよ。

例：

    
      <audio src="audiofile.wav" type="audio/wav"></audio>
    
  

3.4 フォーマットの互換性

全てのブラウザが同じオーディオフォーマットをサポートしているわけではないんだ。クロスブラウザ互換性を確保するために、MP3、OGG、WAVなどの複数のオーディオフォーマットを使うことが推奨されているよ。

複数フォーマットをサポートする例：

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Your browser does not support the audio element.
      </audio>
    
  

アクセシビリティ

アクセシビリティを保証するために、ブラウザが<audio>要素や音声ファイルをサポートしていない場合に備えて、テキストの代替を提供するべきだよ。これは開く<audio>タグと閉じるタグの間にテキストを入れることでできるんだ。

アクセスビリティを保証する例：

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Your browser does not support the audio element.
        You can download the audio file <a href="audiofile.mp3">here</a>.
      </audio>
    
  

<audio>タグの機能とそのAPIを理解することで、もっとインタラクティブでアクセスしやすいウェブページを作るのに役立つよ。