在没有参考的情况下停止背景音频

Question

我有一个包含 32 个单元格的表格，每个单元格都有onclick="music()"功能。除了一件事之外，它工作得很好。我希望它能够正常工作，以便每次单击另一个单元格时，另一个单元格的音乐都会停止。

我的JavaScript代码是：

function music(){
var t = event.target;
var sound = new Audio();
sound.src =  "sound/"+t.title+".mp3";
sound.play();
}

Answer 1

这是我能想到的解决方案：

var playingMusic = {};
var playMusic = function () {}
var t = event.target;
playingMusic["sound/"+t.title+".mp3"] = new Audio();
sound.src =  "sound/"+t.title+".mp3";
sound.play();
}
var stopMusic = function (key) { // the key being "sound/"+t.title+".mp3"
playingMusic[key].stop();
}

如果您需要对某事进行解释，请问，我会更新此答案！

Answer 2

你可以通过多种方式做到这一点，例如，一种是使用类，一种是使用全局变量。全局变量是一个更简单的变量，所以我在这里解释它。首先在全局作用域上声明一个变量，例如 let sound;。那么你的函数可以是这样的。

function music(){
if(sound && !sound.paused() {
sound.pause();
}
var t = event.target;
var newSound = new Audio();
newSound.src =  "sound/"+t.title+".mp3";
newSound.play();
sound = newSound;
}

Answer 3

通过创建一次声音对象来更改函数实现。

var sound = undefined;
function music() {
if (!sound) {
sound = new Audio();
} else if(!sound.paused()) {
sound.pause();
sound.currentTime = 0; // rewind
}
sound.src =  `sound/${event.target.title}.mp3`;
sound.play();
}