Web Design Leaves

audio 要素の属性

audio 要素にはグローバル属性（すべての HTML 要素で共通の属性）の他に以下のような属性を指定することができます。

<audio src="sample.mp3" autoplay controls></audio>

<audio src="sample.mp3" controls muted></audio>

<audio src="sample.mp3" controls loop></audio>

<audio src="sample.mp3" controls preload="none"></audio>

異なる形式の音声データを複数指定

source 要素を使って複数の異なる形式の音声データを指定することができ、ブラウザーは再生できる最初のものを使用します（ブラウザーがもっとも適切な音源を選択します）。

source 要素は audio 要素の入れ子として複数指定できる要素で、各 source 要素の src 属性に動画のデータと type 属性にファイルの形式を指定できます。

source 要素は空要素なので、閉じタグ </source> はありません。

以下の場合、ブラウザーは最初の source 要素 (.opus) が再生可能であればそれを読み込もうとし、そうでなければ2つ目 (.ogg) に、最後に MP3 にフォールバックします。

<audio controls>
  <source src="sample.opus" type="audio/ogg; codecs=opus">
  <source src="sample.ogg" type="audio/ogg; codecs=vorbis">
  <source src="sample.mp3" type="audio/mpeg">
</audio>

Codecs in common media types

MP3 形式

MP3 形式（拡張子 .mp3）の音声データであれば主要ブラウザでサポートされていて、問題なく再生することができます。以下のページで各ブラウザがどのような形式をサポートしているかを確認できます。

• can i use audio format
• MDN 音声コーデックガイド（英文）

代替コンテンツ（非対応ブラウザでテキストを表示）

audio 要素内にコンテンツを記述すると audio 要素に対応していない場合にその内容が表示されます。

以下の場合、audio 要素に対応していないブラウザでは音声データへのリンクが表示されます。

<audio controls>
  <source src="sample.mp3" type="audio/mpeg">
  <source src="sample.ogg" type="audio/ogg">
  <p>
    Download <a href="sample.mp3">MP3</a> or <a href="sample.ogg">OGG</a> audio.
  </p>
</audio>

<audio controls src="sample.wav">
  <a href="foo.wav">WAV 音声をダウンロード</a>
</audio>

※ 現在のほどんどのブラウザは audio 要素に対応しているため、mp3 形式の音声データであれば、代替コンテンツを記述しなくとも問題ないと思います。

ダウンロードを防止

Web 上で公開した音声データを完全にダウンロードできないようにすることはほぼ不可能と思われますが、ある程度ダウンロードしにくくすることは可能です。

controlslist 属性に nodownload

Chrome などではコントロールのアイコンをクリックすると「ダウンロード」の項目が表示されます。

controlslist 属性の値に nodownload を指定すると「ダウンロード」メニューを表示しないようにすることができます。

can i use controlslist

<audio src="sample.mp3" controls controlslist="nodownload"></audio>

但し、controlslist 属性は一部のブラウザでサポートされていません。そのため（controlslist 属性は実験的なものであるため）W3C の Markup Validation Service で検証すると「Error: Attribute controlslist not allowed on element audio at this point.」というエラーになります。

このエラーの場合、特に気にする必要はないと思いますが、気になる場合は JavaScript で設定することもできます。

can i use controlslist

コンテクストメニューを表示させない

controlslist 属性に nodownload を設定しても、音声プレイヤー（コントロール）上で右クリックすると、「名前を付けてオーディオを保存」が表示され、ダウンロードすることは可能です。

audio 要素に oncontextmenu="return false;" を指定することで、右クリックでのコンテクストメニューの表示を無効にすることができます。

<audio src="sample.mp3" oncontextmenu="return false;" controls controlslist="nodownload"></audio>

JavaScript を使って controlslist 属性を設定

上記の設定は JavaScript を使って以下のように設定することもできます。この場合、audio 要素の controlslist 属性と oncontextmenu ハンドラは削除します。

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

この場合は、 W3C の Markup Validation Service で検証してもエラーになりません。

// 全ての audio 要素を取得
const audios = document.querySelectorAll('audio');

// audio 要素が１つ以上あれば
if(audios.length > 0) {
audios.forEach((elem) => {
    // ダウンロードメニューを表示しない
    elem.setAttribute('controlslist', 'nodownload');
    // コンテクストメニューを表示しない
    elem.addEventListener('contextmenu', (e) => {
      e.preventDefault();
    });
  });
}

完全にはダウンロードは防げない

但し、HTML のソースコードを見れば音声データの URL がわかるのでアクセスできてしまいます。

以下を .htaccess に記述することで、音声データ（mp3）とビデオファイル（mp4、webm）に対して自分のサイトからのみアクセスを許可することができます。

https://www\.example\.com の部分は自分のサイトの URL に書き換えます。. はエスケープします。

但し、Referer は偽装可能なため、完全にアクセス（ダウンロード）を防ぐことはできません。

SetEnvIf Referer "^https://www\.example\.com" mysite
<Files ~ "\.(mp3|mp4|webm)$">
  order deny,allow
  deny from all
  allow from env=mysite
</Files>  

関連ページ：.htaccess の使い方（ファイルへのアクセス制御）

再生範囲の指定

<audio> または <video> 要素に対してメディアの URI を src 属性に指定する際に、再生するメディアの再生範囲を指定するための追加情報を記述することができます。

但し、一部のブラウザは対応してません。

以下の書式でハッシュマーク (#) に続いてメディアフラグメントの記述を追加します。

#t=[starttime][,endtime]

以下は音声を 10 秒目から 15 秒の範囲で再生します。

<audio src="sample.mp3#t=10,15" controls></audio>

以下は音声を先頭から 3.5 秒目まで再生します。

<audio src="sample.mp3#t=,3.5" controls></audio>

以下は音声の再生を 45 秒目から始めて、終わりまで再生します。

<audio src="sample.mp3#t=45" controls></audio>