javascript - 单击按钮时需要帮助播放音频文件(反应)
问题描述
所以这是我正在处理的代码。这是一个鼓机项目。我已成功创建按钮,单击按钮后我需要帮助来播放音频文件。src 将充满音频文件的链接,我的项目告诉我将一个元素放入按钮元素中。
这是代码:
import React from “react”;
import ReactDom from “react-dom”;
const sounds = [
{
idnum: “1”,
id: “Q”,
src: “1.html”,
},
{
idnum: “2”,
id: “W”,
src: “2.html”,
},
{
idnum: “3”,
id: “E”,
src: “3.html”,
},
{
idnum: “4”,
id: “A”,
src: “4.html”,
},
{
idnum: “5”,
id: “S”,
src: “5.html”,
},
{
idnum: “6”,
id: “D”,
src: “6.html”,
},
{
idnum: “7”,
id: “Z”,
src: “7.html”,
},
{
idnum: “8”,
id: “X”,
src: “8.html”,
},
{
idnum: “9”,
id: “C”,
src: “9.html”,
},
];
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
audioSource: “not clicked”,
};
this.soundOn = this.soundOn.bind(this);
}
/* soundOn() {
return sounds.src.play();
} */
// I know the above method will not work. I just had it to check if my buttons were working.
render() {
const buttonData = sounds.map((info) => (
<button className=“drum-pad” id={info[“idnum”]} onClick={this.soundOn}>
{info[“id”]}
));
return buttonData;
}
}
export default Button;
任何帮助,将不胜感激。
谢谢!
解决方案
在单击处理程序时使用它:
soundOn = info => {
var audio = new Audio(info.src);
audio.play();
}
并将其放在onClick
道具中:
<button
// you need a key prop
key={info.idnum}
className=“drum-pad”
id={info[“idnum”]}
onClick={() => this.soundOn(info)}
>
{info.id}
</button>
此外,如果您预加载音频文件,您可能会获得更好的用户体验:
const sounds = [
{
idnum: “1”,
id: “Q”,
src: “1.html”,
audio: new Audio("1.html"),
},
]
并使用这个处理程序:
soundOn = info => {
info.audio.play();
}
推荐阅读
- python - defining member functions within __init__
- python - AttributeError: 'FirefoxProfile' 对象没有属性 'update' 错误使用 FirefoxProfile 通过 Selenium 和 Python
- java - 为我的 Spring Boot 应用程序创建一个默认的安全登录页面
- reactjs - How to handle dropdown data and fetched English data when my user choose another language?
- python - Python for 循环仅将最后一个结果附加到列表/数据帧(以 iris 数据集为例)
- reactjs - 如何为 Kibana 开发插件?
- c# - Fresh 类型参数开闭
- cordova - 升级到 API 级别 28 后,我的项目插件无法正常工作
- c - 找到最小时间和日期戳的有效方法是什么?
- jenkins - jenkins 使用无法联系节点名称 java.lang.InterruptedException 构建停滞