Skip to content

Instantly share code, notes, and snippets.

@kn0ll
Created March 30, 2015 16:45
Show Gist options
  • Save kn0ll/f5e3f83f83fe5835c5d4 to your computer and use it in GitHub Desktop.
Save kn0ll/f5e3f83f83fe5835c5d4 to your computer and use it in GitHub Desktop.
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;
}
}
});
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>
);
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment