From 03034dd2f7dcbb602cb01dbbe38edc822b969edc Mon Sep 17 00:00:00 2001 From: Eric Rosenbaum Date: Tue, 20 Jun 2017 16:50:02 -0400 Subject: [PATCH] Remove dependency on Tone.js --- package.json | 1 - src/ADPCMSoundDecoder.js | 9 ++++--- src/DrumPlayer.js | 29 +++++++++++++++------- src/InstrumentPlayer.js | 12 ++++----- src/SoundPlayer.js | 16 ++++++------ src/effects/PanEffect.js | 15 ++++++------ src/index.js | 53 +++++++++++++++++++++------------------- 7 files changed, 75 insertions(+), 60 deletions(-) diff --git a/package.json b/package.json index 351192c..60f5821 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "json": "^9.0.6", "minilog": "^3.0.1", "soundfont-player": "0.10.5", - "tone": "0.9.0", "travis-after-all": "^1.4.4", "webpack": "2.4.0" } diff --git a/src/ADPCMSoundDecoder.js b/src/ADPCMSoundDecoder.js index e9e0b00..3a29d79 100644 --- a/src/ADPCMSoundDecoder.js +++ b/src/ADPCMSoundDecoder.js @@ -1,5 +1,4 @@ const ArrayBufferStream = require('./ArrayBufferStream'); -const Tone = require('tone'); const log = require('./log'); /** @@ -10,6 +9,9 @@ const log = require('./log'); * https://github.com/LLK/scratch-flash/blob/master/src/sound/WAVFile.as */ class ADPCMSoundDecoder { + constructor (context) { + this.context = context; + } /** * Data used by the decompression algorithm * @type {Array} @@ -40,7 +42,7 @@ class ADPCMSoundDecoder { * Decode an ADPCM sound stored in an ArrayBuffer and return a promise * with the decoded audio buffer. * @param {ArrayBuffer} audioData - containing ADPCM encoded wav audio - * @return {Tone.Buffer} the decoded audio buffer + * @return {AudioBuffer} the decoded audio buffer */ decode (audioData) { @@ -77,8 +79,7 @@ class ADPCMSoundDecoder { const samples = this.imaDecompress(this.extractChunk('data', stream), this.adpcmBlockSize); - // @todo this line is the only place Tone is used here, should be possible to remove - const buffer = Tone.context.createBuffer(1, samples.length, this.samplesPerSecond); + const buffer = this.context.createBuffer(1, samples.length, this.samplesPerSecond); // @todo optimize this? e.g. replace the divide by storing 1/32768 and multiply? for (let i = 0; i < samples.length; i++) { diff --git a/src/DrumPlayer.js b/src/DrumPlayer.js index f4d0fde..b020542 100644 --- a/src/DrumPlayer.js +++ b/src/DrumPlayer.js @@ -1,14 +1,13 @@ const SoundPlayer = require('./SoundPlayer'); -const Tone = require('tone'); class DrumPlayer { /** * A prototype for the drum sound functionality that can load drum sounds, play, and stop them. - * @param {Tone.Gain} outputNode - a webAudio node that the drum sounds will send their output to + * @param {AudioContext} context - a webAudio context * @constructor */ - constructor (outputNode) { - this.outputNode = outputNode; + constructor (context) { + this.context = context; const baseUrl = 'https://raw.githubusercontent.com/LLK/scratch-audio/develop/sound-files/drums/'; const fileNames = [ @@ -35,9 +34,21 @@ class DrumPlayer { this.drumSounds = []; for (let i = 0; i < fileNames.length; i++) { - const url = `${baseUrl + fileNames[i]}_22k.wav`; - this.drumSounds[i] = new SoundPlayer(this.outputNode); - this.drumSounds[i].setBuffer(new Tone.Buffer(url)); + this.drumSounds[i] = new SoundPlayer(this.context); + + // download and decode the drum sounds + // @todo: use scratch-storage to manage these sound files + const url = baseUrl + fileNames[i] + '_22k.wav'; + const request = new XMLHttpRequest(); + request.open('GET', url, true); + request.responseType = 'arraybuffer'; + request.onload = () => { + const audioData = request.response; + this.context.decodeAudioData(audioData).then(buffer => { + this.drumSounds[i].setBuffer(buffer); + }); + }; + request.send(); } } @@ -46,10 +57,10 @@ class DrumPlayer { * The parameter for output node allows sprites or clones to send the drum sound * to their individual audio effect chains. * @param {number} drum - the drum number to play (0-indexed) - * @param {Tone.Gain} outputNode - a node to send the output to + * @param {AudioNode} outputNode - a node to send the output to */ play (drum, outputNode) { - this.drumSounds[drum].outputNode = outputNode; + this.drumSounds[drum].connect(outputNode); this.drumSounds[drum].start(); } diff --git a/src/InstrumentPlayer.js b/src/InstrumentPlayer.js index d7e3a77..627e910 100644 --- a/src/InstrumentPlayer.js +++ b/src/InstrumentPlayer.js @@ -1,4 +1,3 @@ -const Tone = require('tone'); const Soundfont = require('soundfont-player'); class InstrumentPlayer { @@ -10,11 +9,12 @@ class InstrumentPlayer { * play note or set instrument block runs, causing a delay of a few seconds. * Using this library we don't have a way to set the volume, sustain the note beyond the sample * duration, or run it through the sprite-specific audio effects. - * @param {Tone.Gain} outputNode - a webAudio node that the instrument will send its output to + * @param {AudioNode} outputNode - a webAudio node that the instrument will send its output to * @constructor */ - constructor (outputNode) { - this.outputNode = outputNode; + constructor (context) { + this.context = context; + this.outputNode = null; // Instrument names used by Musyng Kite soundfont, in order to // match scratch instruments @@ -42,7 +42,7 @@ class InstrumentPlayer { this.loadInstrument(instrumentNum) .then(() => { this.instruments[instrumentNum].play( - note, Tone.context.currentTime, { + note, this.context.currentTime, { duration: sec, gain: gain } @@ -59,7 +59,7 @@ class InstrumentPlayer { if (this.instruments[instrumentNum]) { return Promise.resolve(); } - return Soundfont.instrument(Tone.context, this.instrumentNames[instrumentNum]) + return Soundfont.instrument(this.context, this.instrumentNames[instrumentNum]) .then(inst => { inst.connect(this.outputNode); this.instruments[instrumentNum] = inst; diff --git a/src/SoundPlayer.js b/src/SoundPlayer.js index debf85e..1a67b7f 100644 --- a/src/SoundPlayer.js +++ b/src/SoundPlayer.js @@ -1,13 +1,13 @@ -const Tone = require('tone'); const log = require('./log'); /** * A SoundPlayer stores an audio buffer, and plays it */ class SoundPlayer { - constructor () { + constructor (context) { + this.context = context; this.outputNode = null; - this.buffer = new Tone.Buffer(); + this.buffer = null; this.bufferSource = null; this.playbackRate = 1; this.isPlaying = false; @@ -15,7 +15,7 @@ class SoundPlayer { /** * Connect the SoundPlayer to an output node - * @param {Tone.Gain} node - an output node to connect to + * @param {GainNode} node - an output node to connect to */ connect (node) { this.outputNode = node; @@ -23,7 +23,7 @@ class SoundPlayer { /** * Set an audio buffer - * @param {Tone.Buffer} buffer Buffer to set + * @param {AudioBuffer} buffer - Buffer to set */ setBuffer (buffer) { this.buffer = buffer; @@ -55,13 +55,13 @@ class SoundPlayer { * The web audio framework requires a new audio buffer source node for each playback */ start () { - if (!this.buffer || !this.buffer.loaded) { + if (!this.buffer) { log.warn('tried to play a sound that was not loaded yet'); return; } - this.bufferSource = Tone.context.createBufferSource(); - this.bufferSource.buffer = this.buffer.get(); + this.bufferSource = this.context.createBufferSource(); + this.bufferSource.buffer = this.buffer; this.bufferSource.playbackRate.value = this.playbackRate; this.bufferSource.connect(this.outputNode); this.bufferSource.start(); diff --git a/src/effects/PanEffect.js b/src/effects/PanEffect.js index b091600..86e55eb 100644 --- a/src/effects/PanEffect.js +++ b/src/effects/PanEffect.js @@ -1,17 +1,14 @@ -const Tone = require('tone'); - /** * A pan effect, which moves the sound to the left or right between the speakers * Effect value of -100 puts the audio entirely on the left channel, * 0 centers it, 100 puts it on the right. * Clamped -100 to 100 */ -class PanEffect extends Tone.Effect { - constructor () { - super(); +class PanEffect { + constructor (context) { + this.context = context; + this.panner = this.context.createStereoPanner(); this.value = 0; - this.panner = new Tone.Panner(); - this.effectSend.chain(this.panner, this.effectReturn); } /** @@ -23,6 +20,10 @@ class PanEffect extends Tone.Effect { this.panner.pan.value = this.value / 100; } + connect (node) { + this.panner.connect(node); + } + /** * Change the effect value * @param {number} val - the value to change the effect by diff --git a/src/index.js b/src/index.js index b794c22..149f843 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,4 @@ const log = require('./log'); -const Tone = require('tone'); const PitchEffect = require('./effects/PitchEffect'); const PanEffect = require('./effects/PanEffect'); @@ -25,15 +24,15 @@ class AudioPlayer { constructor (audioEngine) { this.audioEngine = audioEngine; - // effects setup + // Create the audio effects this.pitchEffect = new PitchEffect(); - this.panEffect = new PanEffect(); + this.panEffect = new PanEffect(this.audioEngine.context); - // the effects are chained to an effects node for this player, then to the main audio engine - // audio is sent from each soundplayer, through the effects in order, then to the global effects - // note that the pitch effect works differently - it sets the playback rate for each soundplayer - this.effectsNode = new Tone.Gain(); - this.effectsNode.chain(this.panEffect, this.audioEngine.input); + // Chain the audio effects together + // effectsNode -> panEffect -> audioEngine.input -> destination (speakers) + this.effectsNode = this.audioEngine.context.createGain(); + this.effectsNode.connect(this.panEffect.panner); + this.panEffect.connect(this.audioEngine.input); // reset effects to their default parameters this.clearEffects(); @@ -59,7 +58,7 @@ class AudioPlayer { } // create a new soundplayer to play the sound - const player = new SoundPlayer(); + const player = new SoundPlayer(this.audioEngine.context); player.setBuffer(this.audioEngine.audioBuffers[md5]); player.connect(this.effectsNode); this.pitchEffect.updatePlayer(player); @@ -150,18 +149,22 @@ class AudioPlayer { */ class AudioEngine { constructor () { - this.input = new Tone.Gain(); - this.input.connect(Tone.Master); + var AudioContext = window.AudioContext || window.webkitAudioContext; + this.context = new AudioContext(); + + this.input = this.context.createGain(); + this.input.connect(this.context.destination); // global tempo in bpm (beats per minute) this.currentTempo = 60; // instrument player for play note blocks - this.instrumentPlayer = new InstrumentPlayer(this.input); + this.instrumentPlayer = new InstrumentPlayer(this.context); + this.instrumentPlayer.outputNode = this.input; this.numInstruments = this.instrumentPlayer.instrumentNames.length; // drum player for play drum blocks - this.drumPlayer = new DrumPlayer(this.input); + this.drumPlayer = new DrumPlayer(this.context); this.numDrums = this.drumPlayer.drumSounds.length; // a map of md5s to audio buffers, holding sounds for all sprites @@ -201,10 +204,10 @@ class AudioEngine { switch (sound.format) { case '': - loaderPromise = Tone.context.decodeAudioData(bufferCopy); + loaderPromise = this.context.decodeAudioData(bufferCopy); break; case 'adpcm': - loaderPromise = (new ADPCMSoundDecoder()).decode(bufferCopy); + loaderPromise = (new ADPCMSoundDecoder(this.context)).decode(bufferCopy); break; default: return log.warn('unknown sound format', sound.format); @@ -213,7 +216,7 @@ class AudioEngine { const storedContext = this; return loaderPromise.then( decodedAudio => { - storedContext.audioBuffers[sound.md5] = new Tone.Buffer(decodedAudio); + storedContext.audioBuffers[sound.md5] = decodedAudio; }, error => { log.warn('audio data could not be decoded', error); @@ -289,15 +292,15 @@ class AudioEngine { * @return {number} loudness scaled 0 to 100 */ getLoudness () { - if (!this.mic) { - this.mic = new Tone.UserMedia(); - this.micMeter = new Tone.Meter('level', 0.5); - this.mic.open(); - this.mic.connect(this.micMeter); - } - if (this.mic && this.mic.state === 'started') { - return this.micMeter.value * 100; - } + // if (!this.mic) { + // this.mic = new Tone.UserMedia(); + // this.micMeter = new Tone.Meter('level', 0.5); + // this.mic.open(); + // this.mic.connect(this.micMeter); + // } + // if (this.mic && this.mic.state === 'started') { + // return this.micMeter.value * 100; + // } return -1; }