主要学习通过js动态生成按钮控制音乐播放

<!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>Sound Board</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" async defer></script>
</head>
<body>
  <audio id="applause" src="sounds/applause.mp3"></audio>
  <audio id="boo" src="sounds/boo.mp3"></audio>
  <audio id="gasp" src="sounds/gasp.mp3"></audio>
  <audio id="tada" src="sounds/tada.mp3"></audio>
  <audio id="victory" src="sounds/victory.mp3"></audio>
  <audio id="wrong" src="sounds/wrong.mp3"></audio>

  <div id="buttons"></div>
</body>
</html>

*{
  box-sizing: border-box;
}

body{
  background-color: rgb(161, 100, 223);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn{
  background-color: rebeccapurple;
  border-radius: 5px;
  border: none;
  color: #fff;
  margin: 1rem;
  padding: 1.5rem 3rem;
  font-size: 1.2rem;
  cursor: pointer;
}

.btn:hover{
  opacity: 0.9;
}

.btn:focus{
  outline: none;
}

const sounds = ['applause', 'boo', 'gasp', 'tada', 'victory', 'wrong']

sounds.forEach(sound => {
  const btn = document.createElement('button')
  btn.classList.add('btn')
  btn.innerText = sound

  btn.addEventListener('click', () => {
    stopSounds()
    document.getElementById(sound).play()
  })

  document.getElementById('buttons').appendChild(btn)
})


function stopSounds() {
  sounds.forEach(sound => {
    const song = document.getElementById(sound)

    song.pause()
    song.currentTime = 0
  })
}

Q.E.D.

一个二次元web开发咸鱼