尝试将背景音乐添加到网络应用程序答案

【问题标题】：Trying to add background music to web app尝试将背景音乐添加到网络应用程序
【发布时间】：2021-12-15 09:11:38
【问题描述】：

我创建了一个打鼹鼠游戏。但是，我试图在用户玩游戏时将 Price is Right 主题添加到背景中。我需要在 javascript 中添加什么来实现这一点吗？我将 mp3 文件保存在声音文件夹中。

这是 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Whack A Mole</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Whack a Skeletor!</h1>
    <h2>Your Score:</h2>
    <h2 id="score">0</h2>
    <h2>Seconds Left:</h2>
    <h2 id="time-left">60</h2>
    <div class="grid">
      <div class="square" id="1"></div>
      <div class="square" id="2"></div>
      <div class="square" id="3"></div>
      <div class="square" id="4"></div>
      <div class="square" id="5"></div>
      <div class="square" id="6"></div>
      <div class="square" id="7"></div>
      <div class="square" id="8"></div>
      <div class="square" id="9"></div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

这是 JavaScript 文件

const squares = document.querySelectorAll('.square');
const mole = document.querySelector('.mole');
const timeLeft = document.querySelector('#time-left');
const score = document.querySelector('#score');

let result = 0;
let hitPosition;
let currentTime = 60;
let timerId = null;
let evilLaugh = new Audio('sounds/laugh.mp3');
evilLaugh.volume = 0.3;



function randomSquare() {
  squares.forEach((square) => {
    square.classList.remove('mole');
  });

  let randomSquare = squares[Math.floor(Math.random() * 9)];
  randomSquare.classList.add('mole');

  hitPosition = randomSquare.id;
}

squares.forEach((square) => {
  square.addEventListener('mousedown', () => {
    if (square.id == hitPosition) {
      result++;
      score.textContent = result;
      hitPosition = null;
    }
  });
});

function moveMole() {
  timerId = setInterval(randomSquare, 500);
}

moveMole();
function countDown() {
  currentTime--;
  timeLeft.textContent = currentTime;

  if (currentTime == 0) {
    clearInterval(countDownTimerId);
    clearInterval(timerId);
    alert('GAME OVER! Your final score is ' + result);
    evilLaugh.play();
  }
}

let countDownTimerId = setInterval(countDown, 1000);

这是 CSS 文件

* {
  background-color: black;
  color: red;
}

.square {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-color: lime;
}

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  width: 618px;
  height: 618px;
}

.mole {
  background-image: url(skeletor.jpeg);
  background-size: cover;
}

【问题讨论】：

标签： javascript mp3 background-music

【解决方案1】：

您对evilLaugh 所做的事情与您对 Price is Right sound 所做的事情相同。唯一的补充是我们需要某种方式在每次歌曲结束时重复歌曲，这在this Stack Overflow 问题中有很好的介绍。所以你可以这样做：

let myPriceAudio = new Audio('sounds/nameOfFile.mp3');

myPriceAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myPriceAudio.play();

链接的 Stack Overflow 问题确实表明所有主要浏览器都支持 myPriceAudio.loop = true;，因此您也可以这样做，而不是 .addEventListener() 功能。

【讨论】：

谢谢！这给了我一个很好的开始！我一定会检查链接。