无论我做什么，我得到一个错误消息，而试图播放的声音：
未捕获（promise中）DOMExc0019.
在谷歌上搜索后，我发现如果我在用户对页面进行任何操作之前自动播放音频，它应该会出现，但我的情况并非如此。我甚至这样做：
componentDidMount() {
let audio = new Audio('sounds/beep.wav');
audio.load();
audio.muted = true;
document.addEventListener('click', () => {
audio.muted = false;
audio.play();
});
}
但是信息仍然出现，声音也不播放。那我该怎么办？
音频是一个HTMLMediaElement，调用play（）会返回一个promise，因此需要处理。根据文件的大小，它通常准备就绪，但如果未加载（例如，挂起的promise），它将抛出“AbortError”DomeException。
您可以先检查其是否已加载，然后捕获错误以关闭消息。例如：
componentDidMount() {
this.audio = new Audio('sounds/beep.wav')
this.audio.load()
this.playAudio()
}
playAudio() {
const audioPromise = this.audio.play()
if (audioPromise !== undefined) {
audioPromise
.then(_ => {
// autoplay started
})
.catch(err => {
// catch dom exception
console.info(err)
})
}
}
另一种工作正常但没有显示错误的模式是使用autoPlay属性将组件创建为HTML音频元素，然后在需要时将其作为组件呈现。例如：
const Sound = ( { soundFileName, ...rest } ) => (
<audio autoPlay src={`sounds/${soundFileName}`} {...rest} />
)
const ComponentToAutoPlaySoundIn = () => (
<>
...
<Sound soundFileName="beep.wav" />
...
</>
)
我认为使用这个组件（https://github.com/justinmc/react-audio-player）会更好，而不是直接dom操作
简单的错误音
如果您想要像播放简单的错误提示音（例如，条码扫描器环境中的非视觉反馈）这样简单的东西，并且不想安装依赖项等。-它可以非常简单。只需链接到您的音频文件：
import ErrorAudio from './error.mp3'
在代码中，引用它，并播放它：
var AudioPlay = new Audio (ErrorAudio);
AudioPlay.play();
只是在处理了更复杂的选项后才发现这一点。
