deck.js

define([
  'Audiolet'
], (
  Audiolet
) => {

  class Mixer extends AudioletGroup {

    constructor(audiolet) {
      super(audiolet, 1, 1);
      var gain = this.gain = new Gain(audiolet, 0.5),
        output = this.outputs[0];

      this.inputs[0].connect(gain);
      gain.connect(output);
    }

  }

  return class Deck extends AudioletGroup {

    constructor(audiolet, freq) {
      super(audiolet, 0, 1);
      var buffer = new AudioletBuffer(2, 0),
        bufferPlayer = this.bufferPlayer = new BufferPlayer(audiolet, buffer),
        cuePoints = this.cuePoints = new Array(4),
        mixer = this.mixer = new Mixer(audiolet),
        output = this.outputs[0];

      bufferPlayer.playing = false;
      bufferPlayer.connect(mixer);
      mixer.connect(output);
    }

    loadWav(binaryString) {
      var decoder = new WAVDecoder(),
        decoded = decoder.decode(binaryString),
        bufferPlayer = this.bufferPlayer,
        buffer = new AudioletBuffer(decoded.channels.length, decoded.length);

      buffer.length = decoded.length;
      buffer.numberOfChannels = decoded.channels.length;
      buffer.unslicedChannels = decoded.channels;
      buffer.channels = decoded.channels;
      buffer.channelOffset = 0;

      bufferPlayer.buffer = buffer;
      bufferPlayer.position = 0;
    }

    play() {
      this.bufferPlayer.playing = true;
    }

    pause() {
      this.bufferPlayer.playing = false;
    }

    stop() {
      this.bufferPlayer.playing = false;
      this.bufferPlayer.position = 0;
    }

    setCuePoint(index, time) {
      this.cuePoints[index] = time;
    }

    getCuePoint(index) {
      return this.cuePoints[index];
    }

    jumpToCuePoint(index) {
      var time = this.getCuePoint(index);
      this.bufferPlayer.position = time;
    }

  }

});

deck.jsx

define([
  'React',
  'Audiolet',
  'AudioletGroupView'
], (
  React,
  Audiolet,
  AudioletGroupView
) => {

  return class DeckView extends AudioletGroupView {

    getRenderedParameters() {
      return [
        this.props.deck.mixer.gain.value,
        this.props.deck.bufferPlayer.playbackRate
      ];
    }

    handleSetSource(e) {
      var self = this,
        reader = new FileReader();

      reader.onload = (e) => self.props.deck.loadWav(e.target.result);
      reader.readAsBinaryString(e.target.files[0]);
    }

    handlePlayPause(e) {
      var action = this.props.deck.bufferPlayer.playing? 'pause': 'play';
      this.props.deck[action]();
    }

    handleStop(e) {
      this.props.deck.stop();
    }

    handleCuePoint(e) {
      var index = e.target.value,
        deck = this.props.deck,
        time = deck.bufferPlayer.position,
        currentCuePoint = deck.getCuePoint(index);

      if (currentCuePoint) {
        deck.jumpToCuePoint(index);

      } else {
        deck.setCuePoint(index, time);
      }
    }

    handleSetGain(e) {
      var val = e.target.value;
      this.props.deck.mixer.gain.value.setValue(val / 100);
    }

    handleSetTempo(e) {
      var val = e.target.value;
      this.props.deck.bufferPlayer.playbackRate.setValue(val / 100)
    }

    render() {
      return (
        <ul className="deck">
          <li>
            <input
              type="file"
              onChange={this.handleSetSource.bind(this)} />
          </li>
          <li>
            <input
              type="button"
              value={this.props.deck.bufferPlayer.playing? 'Pause': 'Play'}
              onClick={this.handlePlayPause.bind(this)} /><br />
            <input
              type="button"
              value="Stop"
              onClick={this.handleStop.bind(this)} />
          </li>
          <li>
            <input
              type="button"
              value="1"
              onClick={this.handleCuePoint.bind(this)} /><br />
            <input
              type="button"
              value="2"
              onClick={this.handleCuePoint.bind(this)} /><br />
            <input
              type="button"
              value="3"
              onClick={this.handleCuePoint.bind(this)} /><br />
            <input
              type="button"
              value="4"
              onClick={this.handleCuePoint.bind(this)} /><br />
          </li>
          <li>
            <input
              type="range"
              min="75"
              max="125"
              value={this.props.deck.bufferPlayer.playbackRate.getValue() * 100}
              onChange={this.handleSetTempo.bind(this)} />
          </li>
          <li>
            <input
              type="range"
              min="0"
              max="100"
              value={this.props.deck.mixer.gain.value.getValue() * 100}
              onChange={this.handleSetGain.bind(this)} />
          </li>
        </ul>
      );
    }

  };

});