JavaScript»ゲーム制作»オーディオ 音をならすボタン(同時再生できる)

ファイル名: js-game/quest_00940.html

下のソースコードをうつして、PLAYボタンを押したら「テストです」という音声おんせいをならすプログラムを作ってください。

音声おんせいファイルは下のリンクからダウンロードできます。この素材は「あみたろの声素材工房」からお借りしています。

音声をダウンロード

ソースコード

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

// 同じ音声をたくさん用意する
const audios = [
  new Audio("testdesu_01.wav"),
  new Audio("testdesu_01.wav"),
  new Audio("testdesu_01.wav"),
  new Audio("testdesu_01.wav"),
  new Audio("testdesu_01.wav")
];

// 音声ファイルがすべて読み込まれたらaudioLoaded関数を呼び出す
let loadCount = 0;
audios.forEach(audio => {
  audio.addEventListener("canplaythrough", e => {
    loadCount++;
    if (loadCount === audios.length) {
      audioLoaded();
    }
  });
});

// audios配列の中から、未再生または再生が完了しているAudioオブジェクトを探して、ならす
// 再生できるAudioオブジェクトが見つからなかったら何もしない
// 今回配列には5つの同じAudioオブジェクトが入っているので、5つまでは同時再生できる
const playTestdesu = () => {
  const audio = audios.find(audio => audio.ended || audio.currentTime === 0);
  if (audio) {
    audio.play();
  }
};

const audioLoaded = () => {

  context.fillStyle = "rgb(255, 127, 127)";
  context.fillRect(112, 144, 96, 32);
  context.fillStyle = "rgb(255, 255, 255)";
  context.font = "24px monospace";
  context.textAlign = "center";
  context.fillText("PLAY", 160, 170);

  canvas.addEventListener("click", (e) => {
    const rect = e.target.getBoundingClientRect();
    const x = e.clientX - rect.left - 1;
    const y = e.clientY - rect.top - 1;
    if (x >= 112 && x <= 112 + 96 && y >= 144 && y <= 144 + 32) {
      playTestdesu();
    }
  });
};

解説

endedは、ファイルの再生が終了するとtrueになります。currentTimeは現在の再生時間(秒単位)ですので、currentTime ===0は未再生をあらわします。