生徒WEBページで音楽を再生したいです
先生HTMLのaudioタグの使い方を説明します
WEBサイトでオーディオファイルを再生したい
BGMや効果音などWEBページで音楽を再生したい場合が出てきます。
この記事では、WEBページで音楽ファイルを再生する手順を説明します。
audioタグで音楽ファイルを再生できます
audioタグを使うとWEBページで音楽ファイルを再生できます。
audioタグの基本的な書き方は以下になります。
<audio src="example.mp3" controls></audio>controls属性でプレイヤーを表示する
controls属性を指定しないと標準のプレイヤーは表示されません。
プレイヤーを表示しないケース
訪問者に操作させたくない場合などはcontrols属性を指定せずにプレイヤーを表示しないようにします。
また、CSSやJavaScriptで独自のプレイヤーを表示する場合も標準のプレイヤーは非表示にします。
src属性で音楽ファイルを指定する
src属性で、再生する音楽ファイルを指定します。
<audio src="example.mp3" controls></audio>別のサーバーにあるファイルを指定する場合
WEBページとは異なるサーバーの音楽ファイルを指定する場合はURLでファイルの場所を指定します。
<audio src="https://example.com/example.mp3" controls></audio>同じサーバーの音楽ファイルを指定する場合
音楽ファイルがWEBサイトと同じサーバーにある場合、相対パスでも指定できます。
<audio src="example.mp3" controls></audio>sourceタグを使うと複数の音楽ファイルを指定できる
audioタグ内にsourceタグを書くことで、複数の音楽ファイルを指定することができます。
複数のファイルを指定した場合、その環境で再生できる一番上のファイルが選ばれます。
<audio controls>
<source src="myaudio.mp3" type="audio/mp3"/>
<source src="myaudio.ogg" type="audio/ogg"/>
<source src="myaudio.wav" type="audio/wav"/>
</audio>複数形式のファイルを指定する意味
sourceタグを使って複数形式のファイルを指定することで、より多くの環境での再生に対応できます。
音楽を再生する場合はmp3形式がおすすめ
WEBページ上で音楽を再生する場合は、ほぼ全ての環境で再生できるmp3形式を一番上にするのがおすすめです。
mp3は圧縮形式なのでファイルサイズを抑えることができます。
曲や音楽を提供する場合はwav形式がおすすめ
曲や音楽素材としてWEBページで配布する場合は、wav形式がおすすめです。
非圧縮形式なので音質が高く、加工や編集するのにも向いています。
controlslistでプレイヤーの表示項目を指定できる
controlslist属性で、ブラウザ標準のプレイヤーのボタンやメニューを非表示や無効にできます。
controlslist属性には以下の値があります。
- nodownload（音楽ファイルのダウンロードを無効にする）
- nofullscreen（フルスクリーンを無効にする）
- noremoteplayback（リモートプレイバックを無効にする）
loop属性でループ再生か設定できる
loop属性を指定すると、音楽ファイルを末尾まで再生すると、自動的に先頭に戻ってループ再生します。
autolay属性で自動再生を指定できる
autolay属性を指定すると、音楽ファイルの再生を自動的に開始します。
muted属性で最初のミュート状態を指定できる
muted属性を指定すると、再生プレイヤーの初期状態がミュート（消音）になります。
preload属性で音楽ファイルの読み込み方を指定できる
preload属性で、音楽ファイルの読み込み方を以下の中から指定できます。
preload属性を指定しない場合、以下のautoの動きになります。
none再生するまで音楽ファイルを読み込みません。metadata音楽ファイルのメタ情報（長さなど）だけを最初から読み込みます。auto音楽ファイル全体を最初から読み込みます。