如何解决React JS音频无法播放
我有一个名为“ app.js”的反应文件,其代码如下:
import React from 'react';
const App = () => {
const play = (url) => {
new Audio(url).play();
}
return <>
<input type="button" value="play" onClick={()=> play("./au.mp3")} />
<audio src="./au.mp3" id="audio"></audio>
</>;
}
export default App;
如果按钮确实可以渲染,则所有设置都正确。但是,当我按下它时,音频(与其他文件位于同一“ src”目录中)不会播放。
这是错误:
Uncaught Error: The error you provided does not contain a stack trace.
at S (index.js:1)
at V (index.js:1)
at index.js:1
at index.js:1
at a (index.js:1)
localhost/:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.
对为什么这可能不起作用有任何想法吗?
解决方法
因此,您的示例实际上对我有用,所以您的音频文件可能有问题?请参阅here,除了音频网址,我没有对您的代码进行任何更改(我正在使用Mozilla的MDN条目on Audio object中的公开文件)
如果要在React Component中控制音频,则需要使用“ ref”(供参考)。
引用提供了一种方法,可以访问在render方法中创建的DOM节点或React元素。
您当前正在做的是在您的play
方法内创建一个 new 另一个音频对象。
因此,相反,您可以使用React的ref
属性和useRef
实用程序来获取DOM元素的句柄,并像这样控制音频:
const App = () => {
const audioRef = useRef(null);
const play = (url) => {
audioRef.current.play();
};
return (
<>
<input type="button" value="play" onClick={() => play()} />
<audio
src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
ref={audioRef}
></audio>
</>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。