WebDAW
2021
A web-based Digital Audio Workstation (DAW) powered by Tone.js
WebVue.jsTypeScript
My 2-week onboarding project at Synology to get familiar with JavaScript/TypeScript, Vue.js, Webpack, and general web development.
Key features:
- A multi-track 32-step sequencer for building synth beats running on browser
- Per-track mixer for gain/panning/solo/muting
- Pluggable audio effect chain per track
- Generated UI for synth/effect parameter tweaking
- Virtual keyboard interface for pitch inputs
- Import/export project in JSON format
- Playback and record to webm audio
Some tips:
- Left-click a step to add a note; right-click to remove it
- When focusing on a pitch track, computer keyboard can be used for input (A for note C, W for note C# etc.) Z and X changes the octave by one.
- When dragging a parameter encoder, hold shift to fine-tune the value
- Track names can be edited by double-clicking
- Click on the waveform display of the sampler to preview the sample
Try it and make some cool loops!
The project from the video (hope it doesn't get copystruck)
{"bpm":86,"swing":0,"tracks":[{"name":"Lead","uid":-1,"channel":{"pan":0,"volume":0,"mute":false,"solo":false},"instrument":{"name":"SHLSynth","data":{"volume":-12.959999999999997,"detune":0,"portamento":0,"harmonicity1":4,"harmonicity2":2,"voice0":{"envelope":{"attack":0.01,"attackCurve":"linear","decay":1.2994999999999997,"decayCurve":"exponential","release":2,"releaseCurve":"exponential","sustain":0.15000000000000002},"filter":{"Q":0.409,"detune":0,"frequency":0,"gain":0,"rolloff":-12,"type":"lowpass"},"filterEnvelope":{"attack":0.01,"attackCurve":"linear","decay":0.18991000000000002,"decayCurve":"exponential","release":2,"releaseCurve":"exponential","sustain":0.17749999999999994,"baseFrequency":1009.3923089922308,"exponent":2,"octaves":4.096000000000005},"oscillator":{"detune":0,"frequency":0,"partialCount":0,"partials":[],"phase":0,"type":"sawtooth"}},"voice1":{"volume":4.800000000000011,"detune":0,"portamento":0,"envelope":{"attack":0.01,"attackCurve":"linear","decay":0.5998499999999997,"decayCurve":"exponential","release":0.5307349999999987,"releaseCurve":"exponential","sustain":0.21500000000000002},"filter":{"Q":1,"detune":0,"frequency":0,"gain":0,"rolloff":-12,"type":"lowpass"},"filterEnvelope":{"attack":0.01,"attackCurve":"linear","decay":0.55987,"decayCurve":"exponential","release":1.5702149999999993,"releaseCurve":"exponential","sustain":0.26,"baseFrequency":397.78760860240055,"exponent":2,"octaves":6.704},"oscillator":{"detune":0,"frequency":0,"partialCount":0,"partials":[],"phase":0,"type":"sawtooth"}},"voice2":{"volume":0,"detune":0,"portamento":0,"envelope":{"attack":0.01,"attackCurve":"linear","decay":0.3,"decayCurve":"exponential","release":2,"releaseCurve":"exponential","sustain":0},"filter":{"Q":1,"detune":0,"frequency":0,"gain":0,"rolloff":-12,"type":"lowpass"},"filterEnvelope":{"attack":0.01,"attackCurve":"linear","decay":0.3,"decayCurve":"exponential","release":2,"releaseCurve":"exponential","sustain":0,"baseFrequency":200,"exponent":2,"octaves":4},"oscillator":{"detune":0,"frequency":0,"partialCount":0,"partials":[],"phase":0,"type":"sine"}}}},"effects":[{"name":"Chorus","data":{"wet":0.2699999999999998,"feedback":0.0800000000000001,"frequency":0.27924683499541014,"delayTime":1.7808600000000003,"depth":0.7,"type":"sine","spread":180}},{"name":"PingPongDelay","data":{"wet":0.09099999999999955,"feedback":0.6200000000000001,"delayTime":0.25,"maxDelay":1}},{"name":"Reverb","data":{"wet":0.5399999999999996,"decay":6.107695000000003,"preDelay":0.01}},{"name":"SHLMixingUtilities","data":{"wet":1,"eq3":{"high":0.9600000000000002,"highFrequency":2500,"low":-4.32000000000005,"lowFrequency":303.43103001167344,"mid":1.9200000000000015},"compressor":{"attack":0.003,"knee":30,"ratio":12,"release":0.25,"threshold":0},"gain":{"convert":true,"gain":0,"units":"gain"}}}],"sequence":["F#3","F#3","D3","B2","","B2","","E3","","E3","","E3","G#3","G#3","A3","B3","A3","A3","A3","E3","","D3","","F#3","","F#3","","F#3","E3","E3","F#3","E3"]},{"name":"Kick","uid":-2,"channel":{"pan":0,"volume":0,"mute":false,"solo":false},"instrument":{"name":"SHLMonoSampler","data":{"volume":0,"attack":0,"baseUrl":"","curve":"exponential","release":0.1,"urls":{},"sample":"https://daw.rarakasm.com/static/kick.wav","sampleName":"Kick"}},"effects":[{"name":"SHLMixingUtilities","data":{"wet":1,"eq3":{"high":0,"highFrequency":2500,"low":3.840000000000003,"lowFrequency":400,"mid":0},"compressor":{"attack":0.003,"knee":30,"ratio":14.090000000000002,"release":0.25,"threshold":-24},"gain":{"convert":true,"gain":0,"units":"gain"}}}],"sequence":["C1","C1","","C1","","","","C1","","C1","","","C1","C1","","","C1","","","C1","","","","C1","","C1","","","C1","","",""]},{"name":"Snare","uid":1,"channel":{"pan":0,"volume":0,"mute":false,"solo":false},"instrument":{"name":"SHLMonoSampler","data":{"volume":0,"attack":0,"baseUrl":"","curve":"exponential","release":0.1,"urls":{},"sample":"https://daw.rarakasm.com/static/snare.wav","sampleName":"707/Snare"}},"effects":[{"name":"SHLMixingUtilities","data":{"wet":1,"eq3":{"high":0,"highFrequency":2500,"low":0,"lowFrequency":400,"mid":0},"compressor":{"attack":0.003,"knee":30,"ratio":12,"release":0.25,"threshold":-30},"gain":{"convert":true,"gain":6.719999999999999,"units":"gain"}}},{"name":"Reverb","data":{"wet":0.16999999999999943,"decay":3.6989,"preDelay":0.01}}],"sequence":["","","C1","","","","C1","","","","C1","","","","C1","","","","C1","","","","C1","","","","C1","","","","C1",""]},{"name":"ClosedHat","uid":2,"channel":{"pan":"0.3","volume":0,"mute":false,"solo":false},"instrument":{"name":"SHLMonoSampler","data":{"volume":0,"attack":0,"baseUrl":"","curve":"exponential","release":0.1,"urls":{},"sample":"https://daw.rarakasm.com/static/hat_closed.wav","sampleName":"707/Hat Closed"}},"effects":[],"sequence":["","","","C1","C1","","","","C1","","","C1","C1","","","","C1","","","C1","C1","","","","C1","","","C1","C1","","",""]},{"name":"Ride","uid":3,"channel":{"pan":"-0.3","volume":0,"mute":false,"solo":false},"instrument":{"name":"SHLMonoSampler","data":{"volume":3.840000000000003,"attack":0,"baseUrl":"","curve":"exponential","release":0.1,"urls":{},"sample":"https://daw.rarakasm.com/static/ride.wav","sampleName":"707/Ride"}},"effects":[{"name":"Reverb","data":{"wet":0.46999999999999964,"decay":4.898300000000001,"preDelay":0.01}},{"name":"SHLMixingUtilities","data":{"wet":1,"eq3":{"high":0,"highFrequency":2500,"low":0,"lowFrequency":400,"mid":0},"compressor":{"attack":0.003,"knee":30,"ratio":12,"release":0.25,"threshold":-24},"gain":{"convert":true,"gain":0,"units":"gain"}}}],"sequence":["C1","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""]},{"name":"Bass","uid":4,"channel":{"pan":0,"volume":-1.9,"mute":false,"solo":false},"instrument":{"name":"SHLSynth","data":{"volume":-12.480000000000011,"detune":0,"portamento":0,"harmonicity1":2,"harmonicity2":0.5,"voice0":{"envelope":{"attack":0.05,"attackCurve":"linear","decay":0.8096000000000001,"decayCurve":"exponential","release":0.8997999999999999,"releaseCurve":"exponential","sustain":0.3399999999999994},"filter":{"Q":0.4812999999999994,"detune":0,"frequency":0,"gain":0,"rolloff":-12,"type":"lowpass"},"filterEnvelope":{"attack":0.01,"attackCurve":"linear","decay":0.19990500000000003,"decayCurve":"exponential","release":0.2601199999999999,"releaseCurve":"exponential","sustain":0.13599999999999973,"baseFrequency":200,"exponent":2,"octaves":3},"oscillator":{"detune":0,"frequency":0,"partialCount":0,"partials":[],"phase":0,"type":"sawtooth"}},"voice1":{"volume":-41.75999999999999,"detune":0,"portamento":0,"envelope":{"attack":0.05,"attackCurve":"linear","decay":0,"decayCurve":"exponential","release":0.30010000000000003,"releaseCurve":"exponential","sustain":0.019999999999999997},"filter":{"Q":1,"detune":0,"frequency":0,"gain":0,"rolloff":-12,"type":"lowpass"},"filterEnvelope":{"attack":0.01,"attackCurve":"linear","decay":0.4497800000000003,"decayCurve":"exponential","release":0.5,"releaseCurve":"exponential","sustain":0.14999999999999972,"baseFrequency":214.30386104752134,"exponent":2,"octaves":3},"oscillator":{"detune":0,"frequency":0,"partialCount":0,"partials":[],"phase":0,"type":"square"}},"voice2":{"volume":-6.23999999999997,"detune":0,"portamento":0,"envelope":{"attack":0.05,"attackCurve":"linear","decay":0.20989999999999992,"decayCurve":"exponential","release":0.5,"releaseCurve":"exponential","sustain":0.20999999999999944},"filter":{"Q":1,"detune":0,"frequency":0,"gain":0,"rolloff":-12,"type":"lowpass"},"filterEnvelope":{"attack":0.01,"attackCurve":"linear","decay":0,"decayCurve":"exponential","release":0.5,"releaseCurve":"exponential","sustain":0,"baseFrequency":200,"exponent":2,"octaves":3},"oscillator":{"detune":0,"frequency":0,"partialCount":0,"partials":[],"phase":0,"type":"sine"}}}},"effects":[{"name":"Distortion","data":{"wet":1,"distortion":0.11999999999999987,"oversample":"none"}},{"name":"SHLMixingUtilities","data":{"wet":1,"eq3":{"high":-1.919999999999988,"highFrequency":2500,"low":0.9600000000000002,"lowFrequency":400,"mid":-1.9200000000000013},"compressor":{"attack":0.003,"knee":30,"ratio":14.090000000000002,"release":0.25,"threshold":-24},"gain":{"convert":true,"gain":2.8800000000000017,"units":"gain"}}}],"sequence":["B1","B1","","B1","","","","E2","","E2","","","E2","E2","","","A2","A2","","A2","","","","D2","","D2","D2","","C#2","C#2","",""]},{"name":"Pad","uid":5,"channel":{"pan":0,"volume":0,"mute":false,"solo":false},"instrument":{"name":"SHLSynth","data":{"volume":-4.800000000000005,"detune":0,"portamento":0,"harmonicity1":4.000000000000002,"harmonicity2":6.02,"voice0":{"envelope":{"attack":0.6497000000000004,"attackCurve":"linear","decay":0,"decayCurve":"exponential","release":8.096200000000001,"releaseCurve":"exponential","sustain":1},"filter":{"Q":1,"detune":0,"frequency":0,"gain":0,"rolloff":-12,"type":"lowpass"},"filterEnvelope":{"attack":0.05,"attackCurve":"linear","decay":0,"decayCurve":"exponential","release":4.8978,"releaseCurve":"exponential","sustain":1,"baseFrequency":200,"exponent":2,"octaves":3},"oscillator":{"detune":0,"frequency":0,"partialCount":0,"partials":[],"phase":0,"type":"square"}},"voice1":{"volume":-9.11999999999999,"detune":0,"portamento":0,"envelope":{"attack":0.3998250000000002,"attackCurve":"linear","decay":0,"decayCurve":"exponential","release":7.6964000000000015,"releaseCurve":"exponential","sustain":1},"filter":{"Q":1,"detune":0,"frequency":0,"gain":0,"rolloff":-12,"type":"lowpass"},"filterEnvelope":{"attack":0.05,"attackCurve":"linear","decay":0,"decayCurve":"exponential","release":3.6984000000000004,"releaseCurve":"exponential","sustain":1,"baseFrequency":200,"exponent":2,"octaves":3},"oscillator":{"detune":0,"frequency":0,"partialCount":0,"partials":[],"phase":0,"type":"square"}},"voice2":{"volume":-2.3999999999999626,"detune":0,"portamento":0,"envelope":{"attack":0.5897300000000001,"attackCurve":"linear","decay":0,"decayCurve":"exponential","release":4.897800000000001,"releaseCurve":"exponential","sustain":1},"filter":{"Q":1,"detune":0,"frequency":0,"gain":0,"rolloff":-12,"type":"lowpass"},"filterEnvelope":{"attack":0.05,"attackCurve":"linear","decay":0,"decayCurve":"exponential","release":0.5,"releaseCurve":"exponential","sustain":1,"baseFrequency":200,"exponent":2,"octaves":3},"oscillator":{"detune":0,"frequency":0,"partialCount":0,"partials":[],"phase":0,"type":"triangle"}}}},"effects":[{"name":"Chorus","data":{"wet":0.5,"feedback":0,"frequency":1.5,"delayTime":2.1007000000000002,"depth":0.7,"type":"sine","spread":180}},{"name":"FeedbackDelay","data":{"wet":0.3499999999999994,"feedback":0.7350000000000004,"delayTime":0.25,"maxDelay":1}},{"name":"Reverb","data":{"wet":1,"decay":9.096200000000001,"preDelay":0.01}},{"name":"AutoFilter","data":{"wet":1,"frequency":0.001,"type":"sine","depth":1,"baseFrequency":282.507508924551,"octaves":2.6,"filter":{"Q":0.4014999999999997,"rolloff":-12,"type":"highpass"}}},{"name":"StereoWidener","data":{"wet":1,"width":0.8599999999999999}}],"sequence":["D5","","","","","","","","E5","","","","","","","","A5","","","","","","","","","","","","","","",""]}]}