在React中模拟长按、长制表符
在React中模拟长按、长制表符
提问于 2020-03-11 15:39:32
我正在尝试在React中实现音频录制。我能找到的最好的免费库是：
https://www.npmjs.com/package/react-mp3-recorder
但是这个库只显示一个你在录制时必须长按的按钮。这不是我想要的。我想要一个开始录制和结束录制的按钮。现在我正在尝试找到解决这个问题的最简单的方法。一种想法是使用react/JS简单地模拟长按事件。
这有可能吗？
谢谢!
Stack Overflow用户
发布于 2020-03-12 07:59:21
我不会说模拟事件是最好的方法，但可以直接回答这个问题:是的，你可以模拟事件。
class MyApp extends React.Component {
constructor (props) {
super(props)
this.state = {
isRecording: false
}
this.myClick = this.myClick.bind(this)
}
myClick () {
let recorder = document.getElementById('recorder').childNodes[0].childNodes[0]
if (this.state.isRecording) {
let pressStart = new Event('mousedown')
pressStart.target = recorder
this.setState({isRecording:true}, () => window.dispatchEvent(pressStart))
}
else {
let pressEnd = newEvent('mouseup')
pressEnd.target = recorder
this.setState({isRecording:false}, () => window.dispatchEvent(pressEnd))
}
}
render () {
return (
<section>
<button onClick={this.myClick}>Start/Stop</button>
<div id='recorder'>
<Recorder />
</div>
</section>
)
}
}你必须用css display:none隐藏默认的记录按钮，这样它就不能拾取实际的mousedown和mouseup事件。
实际上，我建议尝试扩展Recorder组件并覆盖渲染，但我还没有成功做到这一点：
// example, not fully-functional snippet
class MyRecorder extends Recorder {
render () {
return (
<button></button>
)
}
}您可以从他们的code中看到，他们有您可以使用的_onMouseDown和_onMouseUp函数。
扩展记录器组件并不是万无一失的，您可能会遇到this issue，但似乎现代浏览器会接受它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60631223
复制相关文章
相似问题
腾讯云开发者
