javascript - 无法在 React.js 中设置哔声
问题描述
我想在我的 React.js 应用程序中设置哔声。我关注了这篇文章,但是尽管我单击了按钮,但它却没有发出声音。
import UIfx from "uifx";
class App extends Component {
render() {
const mp3file = `${process.env.PUBLIC_URL}/assets/sound/alert.mp3`;
const sound = new UIfx({ asset: mp3file });
sound.setVolume(0.8);
console.log("sound", sound);
return() {
<button onClick={sound.play}>Signup</button>
}
}
}
声音表演是这样的:
UIfx {file: {…}, volume: 0.8, throttleMs: 0, play: ƒ, setVolume: ƒ, …}
play: ƒ (volume)
setVolume: ƒ (volume)
file: {asset: "/assets/sound/alert.mp3"}
volume: 0.8
throttleMs: 0
validateVolume: ƒ validateVolume(volume)
__proto__: Object
我在下面有一个错误:
未捕获的错误:“音量”必须是介于 0.0 和 1.0 之间的数字
解决方案
哦,这是一个微妙的!
请注意,记录的sound
对象表明该play
函数采用名为volume
:的参数play: ƒ (volume)
。请记住,onClick
将事件作为参数传递。所以既然直接传递了play函数,其实就相当于onClick={e => sound.play(e)}
!
尝试以下操作:
return() {
<button onClick={() => sound.play()}>Signup</button>
}
推荐阅读
- .net-core - 如何与 net.core linux 服务交互?
- reactjs - 使用 Draft.js 插入实体后重置样式
- python - 我无法弄清楚如何传递用户的输入
- php - 数据库错误:无效的 SQL:WHERE id IN (91220,91222,91232,91233,91244,91263,
- python - 试图从网站上抓取赔率
- elasticsearch - ElasticSearch 脚本查询不正确的值
- .net-core - Net Framework、Core 和 Net 项目混合 IDS_CLASSLOAD_MI_FINAL_IMPL
- android - Flutter 更新导致包错误
- javascript - 如何将 HTML 标签转换为 WordDoc 文本格式?使用 DOCX.js 库
- javafx - JavaFX 11,我该如何处理这个错误?java.lang.module.FindException