10 ms·
Show HN: TB-303 Synth, Drum Machine and Sequencer in Web Audio
- djaychela 10y agoThat is very cool! Just spent a bit of time playing with it, and while I wouldn't say I was a 303/808 connoisseur (unlike a friend who is pretty famous for his use of them), sounds pretty good to me; it's not perfect (it sounds like the filters aren't quite there in terms of extreme settings of resonance and envelope), but it's good. I've not used RB338 for years, so it could be mis-remembering, but it's almost like the sounds need controls that 'go to 11' to get to where you'd want them to be? I like the simplicity of it and the ease of producing a WAV from a session, and the UI seems to be simple and straightforward to use. I'll test it out on some students this week, see what they come up with. I have a couple of minor criticisms - I don't think the ballistics of the rotary controls is right, but I can't quite put my finger on -why-, just seems a bit too sensitive or there's something about the linearity of it? Would it be possible to add the Cubase-style "shift reduces the sensitivity while dragging" to them? The other thing was editing the grid - I'd prefer left click to toggle an event on and off rather than right-click to clear; while this is personal preference, it's one that I've got used to using Cubase for 20 years or so in the drum editor, so it's a little counter-intuitive to have to do it another way, and I think many other editors are similar? Finally, any chance of an undo in the editor? But overall, love it. An amazing demonstration of what's possible in a browser, and of your skills!
- mrob 10y ago>it's almost like the sounds need controls that 'go to 11' to get to where you'd want them to be? People modded the real hardware to do just that (eg. Real World Interfaces' Devil Fish mod: http://www.firstpr.com.au/rwi/dfish/ http://www.firstpr.com.au/rwi/dfish/ ). I'm not enough of a 303 connoisseur either to say if this softsynth is realistic or not, but maybe you're remembering the sound of modded hardware.
- djaychela 10y agoNo, I'm pretty sure I'm thinking of RB-338, and definitely not a modded one; I had access to a 303 back in the day for a few weeks and it could have been that, but it was definitely standard. My friend I mentioned before has a number of 303s, both standard and modded, and showed me some of the extreme settings he gets on them (everything he makes is properly extreme!), but I don't know 100% that RB-338 wasn't more extreme than standard.
- laumars 10y agoOff topic, but who is this friend you speak of? TB-303 was one of the synths I always drooled over as a kid, though I do think that it's legend is perhaps bigger than the synth itself was. Going back to this Show HN: this is an awesome project. Sounds good (albeit I too can't comment on accuracy) and performs well too (ie it doesn't appear to grind my browser to a halt like many technical demos do). The UX could use a little work but frankly few DAWs have good UX in my opinion so this is at least as good as the professional products in that department.
- djaychela 10y agoJon Bell aka Captain Tinrib [1] I'm kinda the same with the 303; I have enjoyed playing with them, but never got what some others can do out of them, but I think a lot is the music you're into - I was far more into prog stuff so never really got on that well with pattern-based sequencers. [1] http://tinribdigital.com/ http://tinribdigital.com/
- exolab 10y agoYou should take a look at Andre Michelle's work. https://www.audiotool.com/ https://www.audiotool.com/
- aikah 10y agoaudiotool is made with Flash. And a good demonstration of the actual usefulness of Flash to develop complex applications that could be deployed online. Too bad Adobe was incapable of taking good care of that product and didn't listen the community. I'm sure WebAudio can get better, but the OP's demo still proves that it's brittle. Changing anything in the patterns stops all sounds and the sequencer has hard time keeping a consistent tempo. I'm sure it will get better but Flash was really in advance for its time as audiotool demonstrated. Well, at least now people have stopped complaining about Flash "killing their battery". They can now blame Javascript /s
- tiseindbaas 10y agothe fluctuating tempo is due to a poor approach of OP and proves or disproves nothing regarding web audio. that stuff can be as steady as you want.
- errozero 10y agoThe tempo does not fluctuate on my setup. That is something I really tried to eliminate. Can I ask what browser, OS and computer spec do you use?
- errozero 10y agoThis is the approach to scheduling I used if anyone is interested: https://www.html5rocks.com/en/tutorials/audio/scheduling/ https://www.html5rocks.com/en/tutorials/audio/scheduling/ I also tried to minimize any visual events that cause a repaint on the main instrument screen.
- tulihauki 10y agoI've found that a steady method for timing is by calculating the number of samples to render per "tick" and decrement the counter after each completed sample when rendering audio to the buffer in JavaScriptNode/ScriptProcessor. Eg. samples_to_tick=Math.floor( (125.0/bpm) * (1.0/50.0)*sampleRate ); Upon the counter reaching zero, the render loop actually jumps to do sequencing and effects/modulation and then resets to counter. In my case, the tick occurs at 50Hz because that's the PAL frame clock used in Amiga and MS-DOS module trackers like Scream Tracker and FastTracker 2. Typically trackers use a "speed" setting to additionally specify the number of ticks per pattern step - usually 6. Although you do get sample-accurate timing, you also get latency up to the size of a single audio buffer (I use 4096 samples). While this isn't really an issue when doing purely playback, it obviously is when the audio is controlled real-time (eg. MIDI). Anyway - the module player is at http://mod.haxor.fi/ http://mod.haxor.fi/ and the source code at https://github.com/jhalme/webaudio-mod-player https://github.com/jhalme/webaudio-mod-player
- errozero 10y agoI did do a lot of back and forth testing with Rebirth, and the VST plugin: ABL3 whilst developing this and specifically whilst setting the max values for the cutoff, resonance and env.mod. - The tricky thing is that they all have an affect on each other, the max resonance is lower when the cutoff is lower for example. Regarding the rotary controls: These work by measuring the distance in pixels from the point you first clicked to the point the mouse have moved to. I only managed to test this on a 3 different computers so I think if you have a really high resolution, the knobs will move too fast. I'll change this at some point to be percentage based instead of pixel based. I added the right-click to delete as that is how FL-Studio works, which is my favorite daw. Its handy to keep the left click as you can use it to select a note in the drum editor and then set velocity. Thanks for checking it out!
- angersock 10y agoPlease fix the rotary controls. Use the atan2 of the mouse's current window position minus the position of the dial's center to calculate the "current angle"/offset of the dial. I'm just waking up, so there might be slightly more to it than that, but not much. The current solution is just bad bad bad. :( Awesome project otherwise. :)
- errozero 10y agoI will look into it now that it has been mentioned a few times.
- chillingeffect 10y agoi agree with cannam above. Many people prefer the vertical motion to change values.
- cannam 10y agoIt's impossible to please everyone with rotary controls. If I read you correctly, you're asking for them to be controlled by actual rotary movement of the mouse. Many people dislike that (and I'm one of them) because it's hard to make circular motions smoothly. Meanwhile, the rest of the people dislike linearly-mapped rotary controls because the motion doesn't match the visual form of the control. I would have suggested making them respond linearly, but to both x and y motion. That is, the effective position change is the maximum of the mouse x and y axis displacements from the click position. My view is that rotary motion is not useful in an on-screen GUI (unless you have a MS Surface Dial perhaps?); rotary-looking controls only exist to save space and provide a friendly appearance. The way they actually behave should be whatever is most efficient to drive, regardless of their shape.
- louthy 10y ago> I wouldn't say I was a 303/808 connoisseur I would, I own a real TB-303 (as well as a TR-808 and a TR-909), and this suffers from the same problems that all emulations suffer (even Roland's own TR-3 and TR-03): the sound is really 'static'; real 303s have an instability in the sound that gives them a nice natural vibrato, which at the extremes (resonance full, and sweeping the cut-off), causes mini-ripples of sound that give the 303 that sound. Have a listen to this to see what I mean (try to avoid the Roland shills with their "it's just as good" opinion) [1] It's pretty much the same with all emulations of analogue gear. I am yet to hear any plugin or emulation come close to the sound of analogue. The closest I've experienced to-date Uhe Diva, but even that doesn't have the liveliness of the real deal. [1] https://youtu.be/4lhXeTGMo2c?t=796 https://youtu.be/4lhXeTGMo2c?t=796
- beedogs 10y agoRoland's reissues are pretty dull and lifeless compared to the real thing. The x0xb0x and possibly the TT-303 are the only two 303 clones I've heard that get close, probably due to the fact they're close copies of the original's analog circuitry. But even they don't quite get there. That's why the 303 still commands such a high price, even after Roland's ACB reissues. The 909 and 808 are a lot easier to clone.
- Hydraulix989 10y agoI thought x0xb0x did a single blind test and they were indistinguishable? http://www.ladyada.net/make/x0xb0x/samples.html http://www.ladyada.net/make/x0xb0x/samples.html
- dharma1 10y agoI agree. It's the instabilities and nonlinearities in analog audio that give it character. Now whether that's worth emulating, or even noticeable by most people, I'm not sure. But I'm buying all analog, and mostly VCO synths
- problems 10y agoCurious if you'd notice similar from circuit emulator synths like Diva: https://www.u-he.com/cms/diva https://www.u-he.com/cms/diva
- dopamean 10y agoWho is your friend?
- rcbuse 10y agoHaving flashbacks to using Rebirth-338
- exDM69 10y agoVery nice. Sounds quite good and works very well. I tested it with Firefox 50 on Linux. No audio issues of any kind. Is there a way to use the keyboard to control the synth and the knobs? I grew up with trackers (and later Jeskola Buzz) and I always enjoyed playing with synths using a "keyboard piano" input.
- stinos 10y agoSound is close enough to a 303 yes. FF 50 on Windows is all pops and cracks though, on a machine with otherwise decent hardware.
- errozero 10y agoYou can use your keyboard number keys to play the drum machine. I could probably add in keyboard control for the synth knobs, I might add that in a future update. If you have a midi controller, you can control almost everything with the midi learn functionality.
- exDM69 10y agoI don't have a midi controller so it would be nice to have a way to play the notes "live" with the keyboard. And perhaps turn the knobs using number keys or function keys.
- jkrippy 10y agoThis took me a minute to figure out so writing it down in case it helps someone else. The sequencer button allows you to string your patterns together into a song. To actually play them in that sequence though, you need to click the "Pattern Mode" grey button at the top of the screen and toggle it to "Song Mode". Then, the play button (or spacebar) will play your song in that pattern.
- senorjazz 10y agoit "looks" a lot better than it did, but I have no idea what is going on. Used to play around with the old version quite a lot when bored at work :) I guess I was just used to how it worked before, this re-design of multiple full screen views is confusing, couldn't figure out how to get things to play, quick live edits don't seem possible now either.
- senorjazz 10y agoalso couldn't get it to work in FF, just sits at loading, even though had turned off ublock / noscript / privacybadger and had to load up chrome.
- errozero 10y agoIt should show a full screen message on FF to say that it will not work as well as Chrome. It has a continue button to hide the message. Did you see that or did it just show the loading bar straight away?
- errozero 10y agoIt did take me a while to make a decision about the separate screens. I wanted a more fully featured piano roll screen and couldn't fit it in properly underneath the synth like the old version. I thought about putting the piano roll in a window so that you could still see the controls at the same time. This could be an option in a future update.
- dharma1 10y agoNice work! Web Audio has come on a lot. ABL3 still sounds better to me, but it's no surprise, Mike (the guy who wrote it) has made analog emulation his obsession for years. Also, if you're in the market for actual analog hardware, I picked one of these up earlier this year, great juicy sounding little box, cheap as chips. https://www.thomann.de/gb/mam_mb33_retro.htm https://www.thomann.de/gb/mam_mb33_retro.htm https://www.youtube.com/watch?v=Bb9C7NRCmZ4 https://www.youtube.com/watch?v=Bb9C7NRCmZ4
- tuzemec 10y agoWow... that little box sounds really nice. Probably I'll get one.
- vdnkh 10y agoWow this is awesome! I'm building something similar with WebMIDI and WebAudio and I've been blocked trying to get recording to work. My current solution is sampling my OscillatorNodes with a MediaRecorder and turning the resulting blob into an .ogg file but it only works in Firefox (Chrome has a bug with decoding ogg with WebAudio). Do you mind elaborating on how you do your wav recording?
- errozero 10y agoI experimented with the MediaRecorder too but couldn't get anything to work. In the end, I used this: https://github.com/mattdiamond/Recorderjs https://github.com/mattdiamond/Recorderjs - It has been abandoned by the author and the forceDownload function does not work anymore so I had to replace that. I'll send you a copy of my version if you like?
- vdnkh 10y agoThat would be great, here's my code: https://github.com/johnBartos/buffer-oscillator-node/blob/master/src/index.js https://github.com/johnBartos/buffer-oscillator-node/blob/ma... I wonder if instead of encoding as ogg/opus I could switch the string to WAV instead?
- errozero 10y agoNice, I like the simplicity. Your download function is almost exactly the same as my modification to recorderJS, so you could just grab a copy of that and swap out the download function for your code.
- catshirt 10y agoslightly inefficient, but you can use a ScriptProcessorNode [1]. just copy the buffer right before it reaches your destination and encode it as WAV when you're done recording. (Audio Worker would be the ideal solution but i don't think they're implemented yet). something like this: http://pastebin.com/UP3F09Wn http://pastebin.com/UP3F09Wn [1] https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode https://developer.mozilla.org/en-US/docs/Web/API/ScriptProce...
- pistle 10y agoThis is very good work in this space. Rebirth 338 was the bees knees tipping point for virtual analog on a PC. We have been seeing numerous things that hint at the direction of where things can end up and this is a good way to establish cred for browser-based audio generation. Generally good piano roll implementation, controls. It'd be nice to have a master fader and possibly a compressor amongst the effects implmemented. I'd also love a swing parameter. Something I've noticed is that knobs with a touch screen can be rough since your digit is covering the visual feedback. Maybe a single vertical line indicator next to the knob could mean you would know where you are and how far you can go when tweaking one?
- deleted 10y ago[deleted]
- nucleardreamer 10y agoOh you are beautiful. It works in mobile chrome...
- racl101 10y agoAwesome! Brings back memories of playing with Rebirth. Love the different design. Boy I still remember playing with Propellerhead Rebirth in the late '90s and that was pretty great at the time. It made me a bit of money in high school to simply create some basslines and burn them onto a CD for friends. By the time Reason 3.0 came out I stopped playing with this kind of software and only really used tools like Audacity for editing sound files. But also, my taste for Electronic music had died down. It had become very generic for me for the most part. Still though, it's cool to a web version of this software and the amazing things you can do with HTML5.
- kowdermeister 10y agoI'm still affected, I got completely hooked on and transitioned to Reason. I'm a fan ever since. I remember fighting for the "server" Mac in the class room because that was only machine powerful enough capable of running ReBirth.
- jtblin 10y agoThere's an iPad version of ReBirth now: https://www.propellerheads.se/rebirth https://www.propellerheads.se/rebirth
- wazoox 10y agoWorks perfectly well for me in Firefox 50/Linux, on a 5 years old machine :)
- CamperBob2 10y agoCan't say I'm a fan of the skeuomorphic rotary knobs that don't even work like rotary knobs, but like vertical sliders.
- vincentriemer 10y agoThis is awesome! Now if only there was a web-protocol for syncing the audio clocks of two webapps I could really jam out with this and (shameless plug) http://io808.com http://io808.com together.
- errozero 10y agoNow I'm really trying to think of ways that could be done in a fast way. Any ideas? The instruments in Acid Machine 2 are built in a modular way, kind of like a basic vst plugin. This is because I started out trying to make a more fully featured web daw. It would be possible to add in more instruments in the future.
- hoorayimhelping 10y agoLove it so much. Going to go home and play with this for a few hours. Thank you for making this and sharing it.
- errozero 10y agoHey HN, this is something I have been working on for most of this year. It started out as a more fully featured web-based daw that would have lots of different instruments with its own plugin format. I got quite far into the project and built a very modular system so it is easy to create more instruments by just dropping in a js file and a view file for the visuals. It was taking longer than I thought so I decided to create a V2 of my old Acid Machine app using this code as a base. It's great to see people talking about it after being hidden away on my laptop for so long. If anyone has any technical questions, I would love to answer them. Also.. I am on the lookout for some freelance work at the moment.