Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。

トップ > JS/CSS/HTML > JavaScript 効果音を再生する方法（連続再生+音の変更）

JavaScript 効果音を再生する方法（連続再生+音の変更）

JS/CSS/HTML

JavaScript の Audio を使って、効果音を再生する方法を書いていきます。

目次

  1. 再生方法
  2. 連続再生について
  3. 効果音の変更方法

1. 再生方法

以下の JavaScript と MP3 を用意します。

sound-effect.js

class SoundEffect {
  constructor() {
    this.keyboard = new Audio('keyboard-01.mp3');
    this.keyboard.preload = 'auto';
  }
  keydown()  {
     // 連続再生のために0を代入
    this.keyboard.currentTime = 0;
    this.keyboard.play();
  }
}

上のクラスをインスタンス化して、メソッドを実行すると効果音が再生されます。以下は、keydown時にメソッドを実行する例です。

main.js

document.addEventListener('DOMContentLoaded', () => {
  let se = new SoundEffect();

  // キーボード押下時の処理
  document.addEventListener('keydown', (e) => {
    se.keydown();
  });
});

以下の HTML をブラウザで開いて、キーを叩くと効果音が再生されます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>効果音の再生</title>
  <script src="sound-effect.js"></script>
  <script src="main.js"></script>
</head>
<body>
</body>
</html>

2. 連続再生について

効果音を連続で再生する場合は、上のように以下のコードを追加します。

// 連続再生のために0を代入
this.keyboard.currentTime = 0;

これで、音が遅延せずに再生されると思います。

3. 効果音の変更方法

効果音を切り替える場合のコード例は以下の通りです。

sound-effect.js

class SoundEffect {
  keyboards = [
    'keyboard-01.mp3', 'keyboard-02.mp3'
  ];
  keyboard;
  constructor() {
    this.load(0);
  }
  load(index) {
    this.keyboard = new Audio(
      this.keyboards[index]
    );
    this.keyboard.preload = 'auto';
  }
  keydown()  {
     // 連続再生のために0を代入
    this.keyboard.currentTime = 0;
    this.keyboard.play();
  }
}

効果音を切り替えるメソッドを用意して、ラジオボタン押下時に実行するようにします。

main.js

document.addEventListener('DOMContentLoaded', () => {
  let se = new SoundEffect();

  // キーボード押下時の処理
  document.addEventListener('keydown', (e) => {
    se.keydown();
  });
  
  // ラジオボタン押下時の処理
  document.getElementsByName('sound').forEach((radio) => {
    radio.addEventListener('change', (e) => {
      se.load(e.target.value)
    });
  });
});

以下の HTML を開くと、動作確認ができます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>効果音の再生</title>
  <script src="sound-effect.js"></script>
  <script src="main.js"></script>
</head>
<body>
  <input type="radio" id="sound0" name="sound" value="0" checked>
  <label for="sound0">キーボード1</label>
  <input type="radio" id="sound1" name="sound" value="1">
  <label for="sound1">キーボード2</label>
</body>
</html>