为什么两个图标播放相同的音频?

Question

所以我有 2 个图标，它们都用于播放不同的音频片段。但目前它们都在播放同一个文件。有什么想法吗？

.html

<a onClick="togglePlay()">
<audio id="sAudio" src="Audio/IngridAlcalde_Castellano_VideoExplicativo.mp3" preload="auto"></audio>
<i class="far fa-pause-circle" id="spanish-pause"></i>
<i class="far fa-play-circle" id="spanish-play"></i></i>
</a>
<a onClick="togglePlay()">
<audio id="eAudio" src="Audio/IngridAlcalde_English_Explainer.mp3" auto"></audio>
<i class="far fa-pause-circle" id="english-pause"></i>
<i class="far fa-play-circle" id="english-play"></i></i>
</a>

.css

#spanish-play {
font-size: 400%;
color: #ED6375;
position: absolute;
margin-top: 50px;
margin-left: 10%;
transition: 0.5s;
display: block;
width: 6%;
text-align: center;
background-color: pink;
}
#spanish-play:hover {
color: rgb(236, 130, 139);
text-shadow: 1px 1px 1px rgb(107, 39, 39);

}
#spanish-pause {
font-size: 400%;
color: rgb(218, 113, 127);
position: absolute;
margin-top: 50px;
margin-left: 10%;
transition: 1s;
display: none;
background-color: blue;
}
#english-play {
font-size: 400%;
color: blue;
position: absolute;
margin-top: 50px;
margin-left: 30%;
transition: 0.5s;
display: block;
width: 6%;
text-align: center;
}
#english-play:hover {
color: rgb(93, 71, 187);
text-shadow: 1px 1px 1px rgb(107, 39, 39);

}
#english-pause {
font-size: 400%;
color: rgb(94, 58, 194);
position: absolute;
margin-top: 50px;
margin-left: 30%;
transition: 1s;
display: none;
}

最后是Javascript

var sAudio = document.getElementById("sAudio");
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
sAudio.pause()
} else {
sAudio.play();
}
};
sAudio.onplaying = function() {
isPlaying = true;
};
sAudio.onpause = function() {
isPlaying = false;
};

// toggle play pause button spanish
var playBtn = document.querySelector("#spanish-play");
var pauseBtn = document.querySelector("#spanish-pause")

playBtn.addEventListener("click", function() {
playBtn.style.display = "none";
pauseBtn.style.display = "block";
})
pauseBtn.addEventListener("click", function () {
pauseBtn.style.display = "none";
playBtn.style.display = "block";
})
var audS = document.getElementById("sAudio");
audS.onended = function () {
pauseBtn.style.display = "none";
playBtn.style.display = "block";
};
// toggle play buttons english
var eAudio = document.getElementById("eAudio");
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
eAudio.pause()
} else {
eAudio.play();
}
};
eAudio.onplaying = function () {
isPlaying = true;
};
eAudio.onpause = function () {
isPlaying = false;
};

// toggle play pause button english
var playBtnE = document.querySelector("#english-play");
var pauseBtnE = document.querySelector("#english-pause")

playBtnE.addEventListener("click", function () {
playBtnE.style.display = "none";
pauseBtnE.style.display = "block";
})
pauseBtnE.addEventListener("click", function () {
pauseBtnE.style.display = "none";
playBtnE.style.display = "block";
})
var audE = document.getElementById("eAudio");
audE.onended = function () {
pauseBtnE.style.display = "none";
playBtnE.style.display = "block";
};

我知道我在这里的javascript中也有很多重复的代码。因此，作为第二个问题，我如何重构它以不重复太多代码。

对这一切很陌生，所以感谢任何建议！

谢谢。

Answer 1

首先，尝试清理你的html。我认为您在第二个<audio>标签中错过了一个preload="。您还关闭了每个<i>标记两次。

此外，在您的 JavaScript 中，您有两个同名的函数function togglePlay()。尝试为每个名称使用不同的名称。希望这有帮助。

Answer 2

我相信你的HTML会感到困惑。

看看如何正确使用音频标签

你也有双倍的</i>.请严格执行 HTML。 我已将<i>移出锚点。您应该直接将操作分配给它们，而不是全部分配给它们。

此外，您使用相同的功能来启动音乐。给函数一个索引，并像这样对它们进行区分，以防止这种情况。

<a onClick="togglePlay_Explicativo()">
<audio id="eAudio" autoplay ">
<source src="Audio/IngridAlcalde_Castellano_VideoExplicativo.mp3" type="audio/mpeg">
</audio>
</a>
<i class="far fa-pause-circle" id="spanish-pause"></i>
<i class="far fa-play-circle" id="spanish-play"></i>
<a onClick="togglePlay_Explainer()">
<audio id="eAudio" autoplay ">
<source src="Audio/IngridAlcalde_English_Explainer.mp3" type="audio/mpeg">
</audio>
</a>
<i class="far fa-pause-circle" id="english-pause"></i>
<i class="far fa-play-circle" id="english-play"></i>

Answer 3

清理你的HTML部分。有额外的关闭标签。