9 ms·
WASM SYNTH, or, how music taught me the beauty of math
- timdaub 5y agoOP here. As I received some attention with my WASM SYNTH project in another thread [1], I thought I may post it as full post to HN again. - 1: https://news.ycombinator.com/item?id=27276180 https://news.ycombinator.com/item?id=27276180
- red_trumpet 5y agoA small note on your LaTeX use: If you use \sin, the sin will be upright (instead of italics), which is considered standard use for math operators (other operators of the top of my had that also use this: tan, cos, log, dim, deg). If you encounter an operator, where the corresponding command with \ does not exist, you can create it with \DeclareMathOperator{\operator}{operator}
- worldmerge 5y agoThat is so cool! Also your website is really nice! Is that an available theme or did you make it yourself? I ask because I'm remaking my website.
- timdaub 5y agohttps://github.com/probberechts/hexo-theme-cactus https://github.com/probberechts/hexo-theme-cactus have fun!
- javajosh 5y agoI didn't know about hexo - it's Jekyll for node. https://hexo.io/ https://hexo.io/
- worldmerge 5y agoThank you!
- gregsadetsky 5y ago@dang, I think that the link should be changed to not go to the footnotes. Thanks!
- timdaub 5y agoop here: Ah damn, I just noticed it too. I tried editing but I can't change the link.
- tessierashpool 5y agoendorse. following the link through is quite jarring. non-footnote version: https://timdaub.github.io/2020/02/19/wasm-synth/ https://timdaub.github.io/2020/02/19/wasm-synth/
- Anktionaer 5y agoI had the opposite experience (based on the title): I read Goedel, Escher Bach because I thought programming and math were really interesting and it ended up getting me into music.
- deleted 5y ago[deleted]
- alfl 5y agoTo answer the question in footnote 1, off the top of my head: setTimeout and setInterval have no timing guarantees because in the browser window/tab context there's no guarantee that they're active/visible. It doesn't make sense for a UI event to fire (their intended use) if the UI is hidden/inactive, and timing guarantees are therefore deferred to specific implementations. requestAnimationFrame does make those timing guarantees.
- mdtusz 5y agoRAF is still imprecise for audio use. For audio in the browser, you usually want to defer all timing events that must be precise to a scheduler that uses either the webAudio context time or even more ideally, use a lookahead scheduler to schedule events by audio frame using an internal counter and the sample rate. A great programming exercise that forces you to wrap your head around JavaScript timing events is writing a small step sequencer that can be used while it is running with minimal latency.
- alfl 5y agoInteresting point, thank you. I was reading the docs today and encountered the following (presented fyi): It turns out that this is currently true [0] because the base audio context (BAC) time is accurate to within 20us whereas RAF is accurate to within 1ms [1]. However in future browser versions the default sensitivity for BAC is going to drop to 2ms. This is done to help improve user privacy by hampering browser fingerprinting. This is all configurable and its materiality depends on use case, but interesting read: thank you. [0] https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/currentTime https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioCo... [1] https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window/requ...
- PUSH_AX 5y agoI thought they weren't accurate because the callback is only added to the stack once the timer expires, this means you may need to wait for the stack to clear before execution happens.
- 5y ago
- LegionMammal978 5y agoIn a default installation, as far as I am aware, Emscripten uses Clang as its compiler, while the code at the bottom implies it uses GCC. (To support existing build pipelines, it attempts to recognize arguments for either compiler.) Is this in error, or can Emscripten be configured to use GCC?
- timdaub 5y agoOP here. Hey, if you have a source on your statement I'm happy to change the blog post towards what is correct. It may be that I assumed emscripten to use gcc but since its been over a year I wrote about it, I'm not sure anymore and so I default to trusting what I wrote. Happy to change with a source.
- inamiyar 5y agohttps://emscripten.org/docs/tools_reference/emcc.html https://emscripten.org/docs/tools_reference/emcc.html > To see the full list of Clang options supported on the version of Clang used by Emscripten, run clang --help. Could probably find a more authoritative statement but just a quick search.
- timdaub 5y agoThanks. Should be updated soon.
- LegionMammal978 5y agoIt appears to be noted in the readme for the repo [0]: "Emscripten compiles C and C++ to WebAssembly using LLVM and Binaryen." A 32-bit Clang is present in my own emsdk installation. [0] https://github.com/emscripten-core/emscripten/ https://github.com/emscripten-core/emscripten/
- timdaub 5y agoThanks. Should be updated soon.
- jacquesm 5y agoIf this stuff interests you have a look at Pianoteq. They take this to a whole new level, through physical modelling they get extremely close to being able to generate realistically sounding pianos.
- timdaub 5y agoInteresting one! For the time I played piano, I ended up buying myself 2 ADAM A7X monitors and played with Ableton's Grand Piano. I also downloaded a supposedly other library that allowed me to use sampled grand piano sounds which was supposed to improve sound quality. It, however, never ended up sounding quite as good as my brothers's simple 300€ Yamaha keyboard. Even after having trained my ears for many months, I still don't know why the piano sounds from my speakers just weren't as pleasing as what by bro's Yamaha produced.
- jacquesm 5y agoThe modern Yamaha keyboards use samples from real pianos. In mine there is both a Yamaha and a Bosendorfer and both sound quite good. But being sample based they are essentially just playing back recorded sounds. Pianoteq generates the sounds using nothing but a bit of software and it is really most impressive.
- TheOtherHobbes 5y agoI've never been able to work out if Pianoteq uses physical modelling - modelling the strings and soundboard as the solutions of differential equations - or spectral modelling - overtone resynthesis, which is rooted in sampling but reassembles the harmonics in samples dynamically instead of playing back a fixed sample series at different rates. I suspect it's the latter, because there's a hint of detail missing in the way the overtones move.
- matheist 5y agoThe wikipedia article[1] says it's "Fourier construction" but without reference (that I can find) and without elaboration. At their website[2] they list some of their staff; I looked up research by one of their researchers and found a paper "Modeling and simulation of a grand piano"[3] which looks quite heavy on the physical modeling of strings and soundboard. I'd expect that to work better than spectral modeling because I think the latter would introduce (too much?) latency via needing to collect an entire spectral window (plus extra computation to compute the phases, and even then I don't think it could sound good enough?). Whereas physical modeling works directly in the time domain and there's a wealth of literature around it. See e.g. J. O. Smith III's waveguide synthesis work[4]. [1] https://en.wikipedia.org/wiki/Pianoteq https://en.wikipedia.org/wiki/Pianoteq [2] https://www.modartt.com/modartt https://www.modartt.com/modartt [3] https://hal.inria.fr/file/index/docid/768234/filename/RR-8181.pdf https://hal.inria.fr/file/index/docid/768234/filename/RR-818... [4] https://ccrma.stanford.edu/~jos/swgt/ https://ccrma.stanford.edu/~jos/swgt/
- skybrian 5y agoThis is doing it the hard way if you just want to generate a sine wave, because WebAudio’s OscillatorNode [1] will do it for you, no WebAssembly required. It likely works in more browsers too. You can also use setPeriodicWave() to have it iterate over any sampled waveform you like. There is enough in the JavaScript API to fool around with basic subtractive synthesis where you connect an oscillator to a filter. I also recommend Syntorial [2] for understanding what subtractive synthesis is capable of. It won’t help you synthesize real instruments, but you learn what the various knobs on synthesizers do by trying to reproduce increasingly sophisticated synthesizer sounds. Learning the basic math is useful too though. [1] https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode https://developer.mozilla.org/en-US/docs/Web/API/OscillatorN... [2] https://www.syntorial.com/ https://www.syntorial.com/
- timdaub 5y ago100%, I looked past APIs as I wanted to learn myself audio programming audio autodidactically.
- Weebs 5y agoI think you provided a great guide for people looking to do the same, I appreciate the write up! Real time audio is a tricky thing to get into and even moreso in the browser, starting with a sine wave here is a great launch point for more experiments.
- Weebs 5y agoIs there a way to supply a PeriodicWave a specific wavetable or series of floating points to represent the wave form? It appears from the docs that PeriodicWave is a way to generate waveforms by shaping sinewaves One problem I've had in the past trying to do audio on the web is I struggled to find any reference material on how to generate my own waveforms and rely on the browser APIs only for playback. This tutorial, with the AudioWorklet, is the first piece I've seen on how to easily do this.
- javajosh 5y ago
- errozero 5y agoI made a synth with web audio a few years ago using the built-in oscillator and filter nodes which are actually quite capable when combined. Synth: http://www.errozero.co.uk/stuff/poly/ http://www.errozero.co.uk/stuff/poly/ Source: https://github.com/errozero/poly-synth https://github.com/errozero/poly-synth Works best in chrome
- capableweb 5y agoNot sure what went wrong and I'm not sure about the exact measurements but your synth has huge input or output latency, maybe around 100ms or something like that? Other WASM/web synths I've tried doesn't suffer from the same problem. Otherwise it's a nifty little toy, thanks for sharing :) Lots of fun.
- apanloco 5y agoi don't have this issue! awesome synth! and i really like the tracker-style keys ;D
- errozero 5y agoThanks! :) Yeah the keyboard layout is based on the tracker style. I spent a lot of time with FastTracker 2.
- Ameo 5y agoYeah some browsers/operating systems have worse latency issues than others with Web Audio. However, it's possible to tune the `latencyHint` a bit when constructing the `AudioContext` to specify a custom value. You have to find a balance between too low where have buffer underruns and miss samples and too high where it adds noticeable delay. After a good bit of trial and error, I came up with a setup that works well on all platforms I could test: https://github.com/Ameobea/web-synth/blob/master/src/index.hbs#L18 https://github.com/Ameobea/web-synth/blob/master/src/index.h...
- delineator 5y ago@errozero: I made a synth with web audio/midi based on your synth engine a few years ago: https://web-audio-midi.herokuapp.com/ https://web-audio-midi.herokuapp.com/ Adding a keyboard, scale selection, oscilloscope, score note viewer, sound font player, bluetooth/web midi controller detection, etc :) Did you decide on a license for your synth code?
- _han 5y agoThe link points to a footnote in the page. Can it be changed to the page itself? (Remove the tailing 3 characters from the URL.) EDIT: I don't think it was intended to refer to the footnote, because the title of the discussion refers to the title of the page itself.
- timdaub 5y agoI think it was finally changed :)