javascript - 当我隐藏 时如何停止播放 文件？

Question

我正在尝试使用 HTML、CSS 和 Vanilla Js 制作音乐播放器。我面临这些问题:

1.如何在点击第二位艺术家时停止播放第一位艺术家的歌曲？

1. 此外，当我通过点击特定的 div(Mozart、GnR 等)开始时，我必须点击两次才能加载播放器。

我是 JavaScript 的新手，所以我无法理解为我的音频文件使用 play() 和 pause() 函数的概念(“Promise uncaught error”)，所以如果你能解释一下就更好了对我来说与这个特定概念无关。另外，如果您有一些关于 Promise 的非常好的文档，请也发布链接!

谢谢。 :)

function mozart() {
  var playArea = document.getElementById('playArea');
  if (playArea.style.display == 'none') {
    playArea.style.display = 'flex';
  } else {
    playArea.style.display = 'none';
  }

  var playSong = document.getElementsByClassName('mozartSong')[0];
  if (playSong.style.display == 'none') {
    playSong.style.display = 'flex';
  } else {
    playSong.style.display = 'none';
  }
}

function gnr() {
  var playArea = document.getElementById('playArea');
  if (playArea.style.display == 'none') {
    playArea.style.display = 'flex';
  } else {
    playArea.style.display = 'none';
  }

  var playSong = document.getElementsByClassName('gnrSong')[0];
  if (playSong.style.display == 'none') {
    playSong.style.display = 'flex';
  } else {
    playSong.style.display = 'none';
  }
}

function lz() {
  var playArea = document.getElementById('playArea');
  if (playArea.style.display == 'none') {
    playArea.style.display = 'flex';
  } else {
    playArea.style.display = 'none';
  }

  var playSong = document.getElementsByClassName('ledzepplinSong')[0];
  if (playSong.style.display == 'none') {
    playSong.style.display = 'flex';
  } else {
    playSong.style.display = 'none';
  }
}

function metallica() {
  var playArea = document.getElementById('playArea');
  if (playArea.style.display == 'none') {
    playArea.style.display = 'flex';
  } else {
    playArea.style.display = 'none';
  }

  var playSong = document.getElementsByClassName('metallicaSong')[0];
  if (playSong.style.display == 'none') {
    playSong.style.display = 'flex';
  } else {
    playSong.style.display = 'none';
  }
}

function scorpion() {
  var playArea = document.getElementById('playArea');
  if (playArea.style.display == 'none') {
    playArea.style.display = 'flex';
  } else {
    playArea.style.display = 'none';
  }

  var playSong = document.getElementsByClassName('scorpionSong')[0];
  if (playSong.style.display == 'none') {
    playSong.style.display = 'flex';
  } else {
    playSong.style.display = 'none';
  }
}

function acdc() {
  var playArea = document.getElementById('playArea');
  if (playArea.style.display == 'none') {
    playArea.style.display = 'flex';
  } else {
    playArea.style.display = 'none';
  }

  var playSong = document.getElementsByClassName('acdcSong')[0];
  if (playSong.style.display == 'none') {
    playSong.style.display = 'flex';
  } else {
    playSong.style.display = 'none';
  }
}

function queen() {
  var playArea = document.getElementById('playArea');
  if (playArea.style.display == 'none') {
    playArea.style.display = 'flex';
  } else {
    playArea.style.display = 'none';
  }

  var playSong = document.getElementsByClassName('queenSong')[0];
  if (playSong.style.display == 'none') {
    playSong.style.display = 'flex';
  } else {
    playSong.style.display = 'none';
  }
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

body {
  background-color: white;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .maincontent {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.container .maincontent .header {
  width: 100%;
  height: 10%;
  background-color: #8ED2C9;
}

.container .maincontent .mainSec {
  width: 100%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.container .maincontent .mainSec .keys {
  width: 10%;
  height: 100%;
  background-color: #FF7A5A;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-direction: column;
}

.container .maincontent .mainSec .keys .mozart,
.gnr,
.ledzepplin,
.metallica,
.scorpion,
.acdc,
.queen {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  background-color: transparent;
  border: none;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: Roboto;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5%;
  outline: none;
  transition: 0.5s all ease;
}

button: hover {
  color:
}

.container .maincontent .mainSec .contentSec {
  width: 90%;
  height: 100%;
  background-color: #FFB85F;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .maincontent .mainSec .contentSec #playArea {
  width: 50%;
  height: 60%;
  border-radius: 5px;
  background-color: #fcf4d9;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-family: Roboto;
  color: white;
  display: none;
}

.container .maincontent .mainSec .contentSec #playArea .mozartSong,
.gnrSong,
.ledzepplinSong,
.metallicaSong,
.scorpionSong,
.acdcSong,
.queenSong {
  display: none;
  position: fixed;
}

<!DOCTYPE html>
<html>

<head>
  <title>Music Player</title>
  <link rel="stylesheet" type="text/css" href="music.css">
</head>

<body>
  <div class="container">
    <div class="maincontent">
      <div class="header"></div>
      <!--Header div ends-->
      <div class="mainSec">
        <div class="keys">
          <div class="mozart">
            <div class="mozartBtn">
              <button class="Mozart" onclick="mozart()">Mozart</button>
            </div>
          </div>
          <!--Mozart div ends-->

          <div class="gnr">
            <div class="gnrBtn">
              <button class="Gnr" onclick="gnr()">GnR</button>
            </div>
          </div>
          <!--Gnr div ends-->

          <div class="ledzepplin">
            <div class="ledzepplingBtn">
              <button class="LedZepplin" onclick="lz()">LedZepplin</button>
            </div>
          </div>
          <!--Led Zepplin div ends-->

          <div class="metallica">
            <div class="metallicaBtn">
              <button class="Metallica" onclick="metallica()">Metallica</button>
            </div>
          </div>
          <!--Metallica div ends-->

          <div class="scorpion">
            <div class="scorpionBtn">
              <button class="Scorpion" onclick="scorpion()">Scorpion</button>
            </div>
          </div>
          <!--Scorpion div ends-->

          <div class="acdc">
            <div class="acdcBtn">
              <button class="ACDC" onclick="acdc()">AcDc</button>
            </div>
          </div>
          <!--ACDC div ends-->

          <div class="queen">
            <div class="queenBtn">
              <button class="Queen" onclick="queen()">Queen</button>
            </div>
          </div>
          <!--Queen div ends-->
        </div>
        <!--keys div ends-->
        <div class="contentSec">
          <div id="playArea">
            <div class="mozartSong">
              <audio controls>
									<source src="music/mozart.wav" type="audio/wav" id="curSong">
								</audio>
            </div>

            <div class="gnrSong">
              <audio controls>
									<source src="music/gnr.wav" type="audio/wav">
								</audio>
            </div>

            <div class="ledzepplinSong">
              <audio controls>
									<source src="music/ledzepplin.wav" type="audio/wav">
								</audio>
            </div>

            <div class="metallicaSong">
              <audio controls>
									<source src="music/metallica.wav" type="audio/wav">
								</audio>
            </div>

            <div class="scorpionSong">
              <audio controls>
									<source src="music/scorpion.wav" type="audio/wav">
								</audio>
            </div>

            <div class="acdcSong">
              <audio controls>
									<source src="music/acdc.wav" type="audio/wav">
								</audio>
            </div>

            <div class="queenSong">
              <audio controls> 
									<source src="music/queen.wav" type="audio/wav">
								</audio>
            </div>

          </div>
        </div>

      </div>
    </div>
  </div>
  <script type="text/javascript" src="music.js"></script>
</body>

</html>

`

Answer 1

正如我所建议的，您有太多具有相同功能的功能。

我已经让你更容易了。这将替换音频标签，因此之前的音频将停止。只需将 路径更改为您的歌轨道录

<script>
  var playSong = function(songName) {
    var audio = document.getElementById('playArea');
    var source = document.getElementById('playSong');
    source.src = 'path to your song directory' + songName + '.wav';
    audio.load(); //call this to just preload the audio without playing
    audio.play(); //call this to play the song right away
  }
</script>

<div class="keys">
  <div class="mozart">
    <div class="mozartBtn">
      <button class="Mozart" onclick="playSong('Mozart')">Mozart</button>
    </div>
  </div>
  <!--Mozart div ends-->

  <div class="gnr">
    <div class="gnrBtn">
      <button class="Gnr" onclick="playSong('GnR')">GnR</button>
    </div>
  </div>
  <!--Gnr div ends-->

  <div class="ledzepplin">
    <div class="ledzepplingBtn">
      <button class="LedZepplin" onclick="playSong('LedZepplin')">LedZepplin</button>
    </div>
  </div>
  <!--Led Zepplin div ends-->

  <div class="metallica">
    <div class="metallicaBtn">
      <button class="Metallica" onclick="playSong('Metallica')">Metallica</button>
    </div>
  </div>
  <!--Metallica div ends-->

  <div class="scorpion">
    <div class="scorpionBtn">
      <button class="Scorpion" onclick="playSong('Scorpion')">Scorpion</button>
    </div>
  </div>
  <!--Scorpion div ends-->

  <div class="acdc">
    <div class="acdcBtn">
      <button class="ACDC" onclick="playSong('AcDc')">AcDc</button>
    </div>
  </div>
  <!--ACDC div ends-->

  <div class="queen">
    <div class="queenBtn">
      <button class="Queen" onclick="playSong('Queen')">Queen</button>
    </div>
  </div>
  <!--Queen div ends-->
</div>

<audio id="playArea" controls>
  <source src="music/mozart.wav" type="audio/wav" id="playSong">
</audio>