oscillator component

oscillator.js

import { h, Component } from 'preact';
import style from './style';

const audioContext = new (window.AudioContext || window.webkitAudioContext);


export default class Oscillator extends Component {

  play() {
    if( this.oscillator ) return;
    this.oscillator = audioContext.createOscillator();
    this.oscillator.type = this.props.type || 'sine';
    this.oscillator.frequency.value = this.props.frequency || 329.63; //E(1) is default
    this.oscillator.connect(audioContext.destination);  
    this.oscillator.start();
  }

  stop() {
    if(!this.oscillator) return;
    this.oscillator.stop();
    this.oscillator = null;
  }

  render() {
    return (
      <div class={style.home}>
        <table>
          <tr>
            <td>-</td>
            <td><strong>{this.props.note}</strong></td>
            <td>{this.props.frequency}Hz</td>
            <td><button onClick={this.play.bind(this)}>start</button></td>
            <td><button onClick={this.stop.bind(this)}>stop</button></td>
          </tr>
        </table>
      </div>
    );
  }
}