单击按钮时，我在使反应组件播放 mp3 文件时遇到问题，看起来它应该对我有用，但出了点问题

Question

我试图让这里的每个按钮都播放它们对应的mp3文件。按钮不会播放mp3文件，我没有得到任何错误我知道。文件是直接定位的在SRC文件夹中。我把文件放在公共文件夹中，这是另一个堆栈溢出帖子推荐的，但是把它们放在src文件夹中似乎可以工作，然后当我添加其余的按钮时，整个事情停止了工作，所以你看到我卡住了。我应该把功能直接在onClick?我做错了什么?如有任何帮助，我将不胜感激，谢谢。

function App() {

let workIt = new Audio('/workit.mp3');
let doIt = new Audio('/doit.mp3');
let harder = new Audio('/harder.mp3');
let faster = new Audio('/faster.mp3');
let moreThan = new Audio('/morethan.mp3');
let our = new Audio('/our.mp3');
let ever = new Audio('/ever.mp3');
let workIs = new Audio('/workis.mp3');
let makeIt = new Audio('/makeit.mp3');
let makesUs = new Audio('/makesus.mp3');
let better = new Audio('/better.mp3');
let stronger = new Audio('/stronger.mp3');
let hour = new Audio('/hour.mp3');
let never = new Audio('/never.mp3');
let after = new Audio('/after.mp3');
let over = new Audio('/over.mp3');

const playWorkIt = () => {
workIt.play()
}
const playDoIt = () => {
doIt.play();
}
const playHarder = () => {
harder.play();
}
const playFaster = () => {
faster.play()
}
const playMoreThan = () => {
moreThan.play()
}
const playOur = () => {
our.play()
}
const playEver = () => {
ever.play()
}
const playWorkIs = () => {
workIs.play()
}
const playMakeIt = () => {
makeIt.play()
}
const playMakesUs = () => {
makesUs.play()
}
const playBetter = () => {
better.play()
}
const playStronger = () => {
stronger.play()
}
const playHour = () => {
hour.play()
}
const playNever = () => {
never.play()
}
const playAfter = () => {
after.play()
}
const playOver = () => {
over.play()
}

return (
<div className = 'app'>
<div className = 'left'>
<button onClick = {playWorkIt} className = 'work-it'>Work it</button>
<button onClick = {playDoIt} className = 'do-it'>Do it</button>
<button onClick = {playHarder} className = 'harder'>Harder</button>
<button onClick = {playFaster} className = 'faster'>Faster</button>
<button onClick = {playMoreThan} className = 'more-than'>More Than</button>
<button onClick = {playOur} className = 'our'>Our</button>
<button onClick = {playEver} className = 'ever'>Ever</button>
<button onClick = {playWorkIs} className = 'work-is'>Work is</button>
</div>
<div className = 'right'>
<button onClick = {playMakeIt} className = 'make-it'>Make it</button>
<button onClick = {playMakesUs} className = 'makes-us'>Makes us</button>
<button onClick = {playBetter} className = 'better'>Better</button>
<button onClick = {playStronger} className = 'stronger'>Stronger</button>
<button onClick = {playHour} className = 'hour'>Hour</button>
<button onClick = {playNever} className = 'never'>Never</button>
<button onClick = {playAfter} className = 'after'>After</button>
<button onClick = {playOver} className = 'over'>Over</button>
</div>
</div>
);
}

export default App;

Answer 1

看起来我确实需要它在公共文件夹我的错，抱歉过早的问题