HTML5 Audio タグと JavaScript で音声ファイルを再生する方法

2024-04-02

JavaScript、HTML、HTML5 Audio を使用して音声ファイルを再生する方法

HTML5 Audio タグ

基本的な使い方

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

上記コードは、audio.mp3 と audio.ogg という2つの音声ファイルを再生するためのものです。

controls 属性は、ブラウザ内蔵のプレーヤーコントロールを表示します。
source 要素は、再生する音声ファイルのパスとファイル形式を指定します。

複数のファイル形式に対応

ブラウザはさまざまな音声ファイル形式に対応していますが、すべてのブラウザがすべての形式に対応しているわけではありません。そのため、複数のファイル形式を用意しておくことで、多くのユーザーで音声ファイルを再生することができます。

JavaScript を使用して再生を制御

audio タグは JavaScript を使用して、再生を制御することができます。以下は、JavaScript で音声ファイルを再生する例です。

<audio id="my-audio">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

const audio = document.getElementById('my-audio');

// 再生
audio.play();

// 一時停止
audio.pause();

// 音量調整
audio.volume = 0.5;

// 再生時間の取得
const currentTime = audio.currentTime;

// 再生時間の設定
audio.currentTime = 10;

HTML5 Audio タグと JavaScript を使用することで、Web ページ上で簡単に音声ファイルを再生することができます。この機能を活用することで、音楽再生、音声解説、効果音など、さまざまな用途に利用できます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音声ファイル再生サンプル</title>
</head>
<body>
  <audio id="my-audio" controls>
    <source src="audio.mp3" type="audio/mpeg">
  </audio>
  
  <script src="script.js"></script>
</body>
</html>

JavaScript

const audio = document.getElementById('my-audio');

// 再生ボタン
const playButton = document.getElementById('play-button');
playButton.addEventListener('click', () => {
  audio.play();
});

// 一時停止ボタン
const pauseButton = document.getElementById('pause-button');
pauseButton.addEventListener('click', () => {
  audio.pause();
});

// 音量調整スライダー
const volumeSlider = document.getElementById('volume-slider');
volumeSlider.addEventListener('input', () => {
  audio.volume = volumeSlider.value;
});

// 再生時間表示
const currentTimeLabel = document.getElementById('current-time');
setInterval(() => {
  currentTimeLabel.textContent = audio.currentTime.toFixed(2);
}, 100);