<audio> 隐藏文件时如何停止播放<div>？

Question

我正在尝试使用HTML、CSS和VanillaJs制作一个音乐播放器。我面临这些问题：

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

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

我是JavaScript的新手，所以我无法理解在我的音频文件中使用play()和pause()函数的概念("Promise未捕获错误")，所以如果你能在不涉及这个特定概念的情况下向我解释它，那就太好了。此外，如果你在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

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

我让你轻松一点。这将替换音频标签，以便停止以前的音频。只需更改path to your song directory

<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>