4 ms·
I'm impressed how responsive the keys are! Will definitely be checking out on desktop if I can see how the audio rendering code works (unless someone here alrea
by Aachen 1y ago
I'm impressed how responsive the keys are! Will definitely be checking out on desktop if I can see how the audio rendering code works (unless someone here already knows). I presume the audio synthesis API and ontouchstart but maybe there's something clever in addition like prerendering the audio samples rather than synthesising them on press
Maybe it also helps that I've got a headphone jack plugged in instead of the Bluetooth I'm used to from listening to things during the day, but even so, my touchscreen just doesn't feel this responsive normally, including in games. It's on my list of things to check the delay of, but since my phone's 960 fps camera is the equipment I use to check that, it is a bit tricky
Edit: ontouchstart calls noteOn method https://github.com/wcgbg/terpstrakeyboard/blob/03d526a0ed5c76e227c413b2e5034b66b670726f/keys.js#L663 https://github.com/wcgbg/terpstrakeyboard/blob/03d526a0ed5c7...
This eventually calls into audio api start with 0 delay https://github.com/wcgbg/terpstrakeyboard/blob/03d526a0ed5c76e227c413b2e5034b66b670726f/keys.js#L1032 https://github.com/wcgbg/terpstrakeyboard/blob/03d526a0ed5c7...
The data to play was retrieved from the server (based on the instrument you selected) and parsed ahead of time https://github.com/wcgbg/terpstrakeyboard/blob/03d526a0ed5c76e227c413b2e5034b66b670726f/keys.js#L1079 https://github.com/wcgbg/terpstrakeyboard/blob/03d526a0ed5c7...
It loads samples at four frequencies and plays the nearest one at the appropriate rate (proportional to the target frequency) https://github.com/wcgbg/terpstrakeyboard/blob/03d526a0ed5c76e227c413b2e5034b66b670726f/keys.js#L1023 https://github.com/wcgbg/terpstrakeyboard/blob/03d526a0ed5c7...
The settings.audioContext variable is simply an instance of the web audio API as expected (with a fallback to support Safari/webkit) https://github.com/wcgbg/terpstrakeyboard/blob/03d526a0ed5c76e227c413b2e5034b66b670726f/keys.js#L1060 https://github.com/wcgbg/terpstrakeyboard/blob/03d526a0ed5c7...
This gainNode it's connecting is just about playback volume it seems https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createGain https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioCo... and "audioContext.destination", MDN says, you can think of as a speaker device
So nothing too special here: of course preloading server data but then simply creating a new sound source during ontouchstart is enough. I guess delay in other software comes from the extra cruft they have such as big libraries (and Bluetooth, in the cases where I use that), not from any actual delay in touchscreen or audio rendering
- dist-epoch 1y agoresponsive, but there is a small click between notes. maybe they start mid phase
- Aachen 1y agoWhat browser and OS is that? I experience no clicks on Android 10 with a chromium webview-based browser
- mikepurvis 1y agoButter-smooth for me on Window 11 + Firefox
- matteason 1y agoI had a quick look - it's sample-based (eg organ has 4 preloaded samples, http://terpstrakeyboard.com/web-app/sounds/organ440.mp3 http://terpstrakeyboard.com/web-app/sounds/organ440.mp3 plus 110, 220 and 880Hz variants), and different notes are created by adjusting the playbackRate of the closest sample It's also all just vanilla JS which probably helps keep it snappy