音楽ファイルをWebで扱おう

(Sample)

Webページに音楽を流したい、そんなときに役立つのが<audio>タグです。
今回は、HTMLとJavaScriptを使って音楽ファイルを埋め込んだり、再生・停止の制御を行ったりする方法について、新人エンジニアの方でも迷わず理解できるように解説していきます！

なぜWebで音楽を再生する必要があるの？

まず、音楽ファイルをWebページで再生するシーンを想像してみましょう。

• 自社サービスの紹介動画やBGM
• 教育用コンテンツ（リスニング教材など）
• ゲーム・インタラクティブコンテンツ
• ナレーション付きの読み聞かせページ

こうした用途では「ユーザーの操作に応じて音楽を再生・停止」することが求められますね。

<audio>タグで音楽を埋め込む

基本構文

<audio controls>
  <source src="音楽ファイルのURL" type="audio/ファイル形式">
</audio>

• controls属性をつけることで、再生・一時停止・音量調整などのUIが自動で表示されます。
• <source>タグは複数書くことで、複数のフォーマットに対応できます。

実際の例

<audio controls>
  <source src="https://www.bensound.com/bensound-music/bensound-ukulele.mp3" type="audio/mpeg">
</audio>

このように書くだけで、ページ内にシンプルな音楽プレイヤーが表示され、クリックで音楽が再生されます。

JavaScriptで再生／停止を制御する

なぜJavaScriptを使うの？

HTMLのcontrolsではユーザーが手動で再生しますが、特定のイベント（ボタン押下など）で自動再生したい場合はJavaScriptが必要です。

具体例

<audio id="myAudio" controls>
  <source src="音楽ファイル.mp3" type="audio/mpeg">
</audio>

<button onclick="playAudio()">再生</button>
<button onclick="pauseAudio()">停止</button>

<script>
  var audio = document.getElementById("myAudio");

  function playAudio() {
    audio.play();
  }

  function pauseAudio() {
    audio.pause();
  }
</script>

解説：

• getElementById("myAudio")でHTML内の音楽プレイヤーを取得
• .play()で再生、.pause()で停止

再生ボタンや停止ボタンを自作できるので、UIを自由にデザインできるのがメリットです。

音楽ファイルのフォーマットに注意！

主要な音楽フォーマット

すべてのブラウザが同じ形式に対応しているわけではありません。
複数のフォーマットを併用することで、ユーザーの環境による再生失敗を防げます。

<audio controls>
  <source src="sample.mp3" type="audio/mpeg">
  <source src="sample.ogg" type="audio/ogg">
  <source src="sample.wav" type="audio/wav">
</audio>

ブラウザは、再生できる最初の形式を選んでくれる仕組みです。

アクセシビリティの観点も大切！

• <audio controls>を使えば、キーボード操作やスクリーンリーダーでも使えるようになります。
• もし自作UIを作る場合は、ARIA属性などの追加も検討してください。

よくある質問

Q. 自動再生はできますか？

できますが、最近のブラウザは音声付きの自動再生を制限しています。
再生するには、たいていユーザーの操作（クリックなど）をトリガーにする必要があります。

document.getElementById("playBtn").addEventListener("click", () => {
  audio.play();
});

まとめと次のステップ

HTMLとJavaScriptだけで、シンプルかつ効果的な音楽再生機能を実装することができましたね！

今回学んだこと

• <audio>タグの基本
• 音声ファイルの再生・停止の制御
• 複数フォーマットへの対応
• アクセシビリティへの配慮

次のステップとしては？

• 音楽の再生位置を指定する（例：5秒後から再生）
• 再生終了イベントをキャッチして他の処理を実行
• 音楽の波形や再生状況を可視化する（Canvas + Web Audio API）

これから、よりリッチな音響演出ができるように、JavaScriptとブラウザAPIの活用にも挑戦してみましょう！