gpt4 book ai didi

javascript - 启动另一个 javascript 时暂停另一首歌曲

转载 作者:行者123 更新时间:2023-12-02 21:47:46 26 4
gpt4 key购买 nike

我试图做到这一点,以便当您单击单独的元素时,它会暂停从不同元素播放的当前歌曲。此外,我之前已经做到了,因此当您在开始播放音频后单击同一元素时,它会暂停该音频,但是当您单击具有相同功能的不同元素时,它会中断。

var paused = true;
var song;
var songPlaying;

function playSong(x) {
song = x;

if(songPlaying != song){
document.getElementById(songPlaying).pause();
}

if(paused == true){
document.getElementById(song).play();
paused = false;
songPlaying = song;
} else {
document.getElementById(song).pause();
paused = true;
}
}

我能解决这个问题吗?我需要为每首歌曲制作不同的函数吗?

编辑 1:这里是我正在使用的部分的 HTML,每个音频文件都有一个 ID,该 ID 在 onclick 内的函数中作为参数调用

<div class="album">
<img src="assets/BattalionsOfFear.png" onclick="playSong('bofSong')">
<h1>Battalions of Fear</h1>
<p>Released in 1988</p>
</div>

<div class="album">
<img src="assets/FollowTheBlind.png" onclick="playSong('bfsSong')">
<h1>Follow the Blind</h1>
<p>Released in 1989</p>
</div>

<!--- Audio -->
<audio id="bofSong">
<source src="assets/BattalionsOfFear.mp3">
</audio>

<audio id="bfsSong">
<source src="assets/BanishFromSanctuary.mp3">
</audio>

编辑2:在尝试莱夫的解决方案时我尝试将“song”类添加到我的 HTML img 元素中,并使用“song1”类将其链接到我的音频元素,但它仍然无法正常工作。是我类的方式不对还是我类的方式不对?

<div class="album">
<img src="assets/BattalionsOfFear.png" class="song song1">
<h1>Battalions of Fear</h1>
<p>Released in 1988</p>
</div>

<audio id="bofSong" class="song1">
<source src="assets/BattalionsOfFear.mp3">
</audio>

最佳答案

每首歌曲应共享相同的类,以便您可以执行如下操作:

<html>
<div class="song"></div>
<div class="song"></div>
</html>
var songs = document.querySelectorAll(".song");

function playSong(e) {
songs.forEach(el => {
el.style.play();
});
e.currentTarget.pause();
};

songs.forEach(el => {
el.addEventListener("click", playSong);
});

关于javascript - 启动另一个 javascript 时暂停另一首歌曲,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60213569/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com