我有一个简单的React组件,该组件应通过keyDown上的Web Audio API播放音频,并停止keyUp上的音频。我有一个JSFiddle,它显示了我在localhost上看到的相同行为。这是内联代码:
var Keyboard = React.createClass({
componentDidMount: function () {
var context = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = context.createOscillator();
var gain = context.createGain();
oscillator.type = 'sine';
oscillator.frequency.value = 3000;
gain.gain.value = 0.5;
oscillator.connect(gain);
gain.connect(context.destination);
this.setState({
context: context,
oscillator: oscillator,
gain: gain
});
},
render: function() {
return (
<div id="keyboard"
onKeyDown={this.playNote}
onKeyUp={this.stopNote}>
</div>
);
},
playNote: function (ev) {
console.log('play');
this.state.oscillator.start();
},
stopNote: function (ev) {
console.log('stop');
this.state.oscillator.stop();
}
});
React.render(<Keyboard />, document.getElementById('container'));
Run Code Online (Sandbox Code Playgroud)
即使没有Web Audio的东西,我也无法显示日志语句。我已经阅读了React …