JavaScript»ゲーム制作»オーディオ 音をくりかえしてならす

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

下のソースコードをうつして、音楽おんがくをエンドレスでならすプログラムを作ってください。

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

音声をダウンロード

ソースコード

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

const audio = new Audio("game_maoudamashii_7_event17.m4a");

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) {
    audio.loop = true;
    audio.play();
  }
});

解説

loopがtrueのとき、音声ファイルが最後まで再生されるとまた最初から再生が始まります。