A oddity of #WebAudio that got my ass for a few hours: When passing in sines and cosines for doing Fourier synthesis with PeriodicWave, the first cosine is a DC offset, /not/ the fundamental. Likewise, the second sine is the fundamental, but the first is completely ignored.

I only needed sines, so I had zero hints as to what was going on aside from a big wiggle in my expected output.

Креативное программирование: визуализация звука

Привет, я Игорь Аникин, Frontend разработчик RUTUBE TECH. Медиадизайнер, специализируюсь на компьютерной графике. Увлекаюсь программированием более 15 лет. Это небольшой мастер-класс, как визуализировать звук двумя способами. Текст подойдёт любому читателю, которому интересна выразительная часть цифрового мира.

https://habr.com/ru/companies/habr_rutube/articles/1028574/

#визуализация #звук #webaudio #javascript #touchdesigner

5 years ago I released the first video of the @mercury Playground for the browser, for live coding in the web! 🙂

Here's a new short video to celebrate some of the changes and updates that have been made since then:

https://www.youtube.com/watch?v=97hKDQJfgJo

All the code can be downloaded through links in the description of the video.

#mercurylivecoding #webaudio #browserbased #livecoding #web

New FM synth added to the Mercury Playground @mercury, coded with a single AudioWorkletProcessor inside a ToneAudioNode from ToneJS

https://mercury-playground.cc/#Ly8gPT09IFRVVE9SSUFMIDI0MzogRk0gSW5zdHJ1bWVudHMgPT09Ci8vIEZNIGNhbiBiZSB1c2VkIHRvIHNpbXVsYXRlIG1hbnkgZGlmZmVyZW50IGluc3RydW1lbnQgc291bmRzLiBBIHZlcnkgZmFtb3VzIAovLyBGTSBzeW50aGVzaXplciB3YXMgdGhlIFlhbWFoYSBEWDcsIHdoaWNoIGNvbnRhaW5lZCBhIGJ1bmNoIG9mICJhbGdvcml0aG1zIiAKLy8gKGRpZmZlcmVudCBjb25maWd1cmF0aW9ucyBvZiBjYXJyaWVyL21vZHVsYXRvcikgYW5kIGRpZmZlcmVudCByYXRpb3MsIAovLyBpbmRleGVzIGFuZCBmbS1zaGFwZXMuIEJlbG93IGFyZSBzdWdnZXN0aW9ucyBmb3IgYSBiYXNzLCB4eWxvcGhvbmUgYW5kIHBsdWNrIAovLyBzb3VuZCBjb21iaW5lZCBpbnRvIGEgc2hvcnQgY29tcG9zaXRpb24uCgpzZXQgdGVtcG8gOTAKc2V0IHNjYWxlIG1pbm9yIGViCgpuZXcgc3ludGggZm0gbm90ZSgwIC0xKSBuYW1lKGJhc3MpIHNoYXBlKDEgMS80KQogICAgc2V0IGJhc3MgdGltZSgxLzQpIHBsYXkoMC43KSAKICAgIHNldCBiYXNzIGluZGV4KDUpIHJhdGlvKDIpIGZtU2hhcGUoNSA0MDApCiAgICAKbmV3IHN5bnRoIGZtIG5vdGUoc3ByZWFkKDcpIFsxIDJdKSBuYW1lKHh5bG8pIHNoYXBlKDEgMS8yKQogICAgc2V0IHh5bG8gdGltZSgxLzgpIHBsYXkoMC41KSByYXRpbyg3OC4zKSBmbVNoYXBlKDEgNDAwKSAKICAgIHNldCB4eWxvIGZ4KHJldmVyYiAwLjUgMTcpCiAgICAKbmV3IHN5bnRoIGZtIG5hbWUocGx1Y2spIG5vdGUoZHJ1bmsoOCAzKSAzKQogICAgc2V0IHBsdWNrIHRpbWUoMS80IDEvOCkgZngoZGVsYXkpCiAgICBzZXQgcGx1Y2sgcmF0aW8oMykgaW5kZXgoNCkgZm1TaGFwZSgwIDMwKSBzaGFwZSgxIDEvOCkKICAgIApzZXQgYWxsIHNjb3BlKCk%3D

It's a basic FM with a single modulator-(envelope)->carrier setup, and can be extended with extra voices and detuning to run 2-3 or more operators.

Syntax: `new synth fm index() ratio() fmShape()`

Some tutorials available on the website

#mercurylivecoding #fmsynthesis #webaudio #audioworkletprocessor #javascript #mercury #browserbased

Here's me showing off some audio work, from my 20 years in #JavaScript #development:

https://www.marquisdegeek.com/slytherin/

This is a simple #softsynth that also demonstrates #harmonics. Works with MIDI
and #LeapMotion

#webaudio #webmidi

You don't need an audio file to create a metronome click!

Built this entirely with Web Audio API oscillators.

5 lines of code, exponential envelope, zero file overhead.

Here's how:

#WebAudio #JavaScript