【HTML】音楽を再生する簡単な方法
HTMLで音楽を再生する方法
audioタグの基本
HTMLで音楽を再生する最も基本的な方法は<audio>タグを使用することです。
<audio src="music.mp3"></audio>
audioタグの属性
<audio>タグにはいくつかの便利な属性があります。
- controls: ユーザーに再生・停止ボタンを表示する
- autoplay: ページが読み込まれたら自動再生する
- loop: 音楽をループ再生する
- muted: 最初から音をミュートする
再生コントロールを表示する
ユーザーが操作できる再生コントロールを表示するにはcontrols属性を追加します。
<audio src="music.mp3" controls></audio>
自動再生する
音楽を自動再生するにはautoplay属性を追加します。ただし、多くのブラウザではミュートされていないと自動再生がブロックされることがあります。
<audio src="music.mp3" autoplay muted></audio>
ループ再生する
音楽を繰り返し再生するにはloop属性を使用します。
<audio src="music.mp3" loop controls></audio>
複数の音声フォーマットを指定する
すべてのブラウザで再生できるように、<source>タグを使って複数のフォーマットを指定することが推奨されます。
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
お使いのブラウザはaudioタグをサポートしていません。
</audio>
BGMとして音楽を流す
WebサイトのBGMとして音楽を流す場合は、autoplayとloopを組み合わせます。
<audio src="bgm.mp3" autoplay loop muted></audio>
JavaScriptで音楽を制御する
JavaScriptを使えば、音楽の再生・停止を制御できます。
<audio id="myAudio" src="music.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">再生</button>
<button onclick="document.getElementById('myAudio').pause()">一時停止</button>
このように<audio>タグを使えば、簡単にWebページで音楽を再生できます。