Generating music for JS demos?

category: music [glöplog]
What techniques are available for JavaScript demos for generating sound? It seems like bytebeat can be done using HTML5 audio. But most JS demos I've found have been without sound.

If anyone can recommend anything and/or link to JS demos with sounds of some kind of quality I'd highly appreciate it. I'm working on my first demo in JS and I'd really like to do something with integrating sound and visuals.
added on the 2013-11-02 18:17:18 by paldepind paldepind
* WAVE PCM generation ... easy, but a bit "roots"
* WEB Audio API ... powerful but support across browser is rather recent.
added on the 2013-11-02 18:39:19 by p01 p01
AFAIK kb is working on a JS syntie.
added on the 2013-11-02 18:42:28 by Salinga Salinga
For oldschool WAVE generation, you could have a look at SoundBox.
added on the 2013-11-02 18:46:02 by losso losso
This is probably the easiest setup for WAVE generation. Bytebeat is dead simple to implement, but you can build a full fledged softsynth around this WAVE PCM setup, like SoundBox and Sonnant Live.

Salinga: Wow! Looking forward to hear that!
added on the 2013-11-02 20:34:19 by p01 p01
i wrote a few paragraphs on the different options for sound on js intros when i wrote the reports on what i been working on. you might find them useful somehow: http://js-lm.blogspot.pt/

For demos (without size restrictions) i would just use web audio api to load an ogg or mp3.
added on the 2013-11-02 21:23:45 by psenough psenough
p01: Nice to get a respondent from you. I've been following your work for a couple og years now!

psenough: Thanks for the link to your blog. I just read a few of your posts. They where very enjoying to read!

I think I'll go with p01s software synth since I'm really aiming for a small size with this thing. And my focus is to get a connection between the audio and the visuals more than a the actually quality of the sound.
added on the 2013-11-02 21:38:03 by paldepind paldepind
The newly released Firefox 25 has support for the Web Audio API, making it decently cross-browser friendly. As for an example, the synth in HONEYCOMB plays MIDI using the Web Audio API.
added on the 2013-11-03 04:50:01 by sigveseb sigveseb
> The newly released Firefox 25 has support for the Web Audio API
Really? They finally made something that looks like a modern browser? Cool. If only they started flex-wrap support and input type=number... I'd consider it a modern browser.

P.S. Pure wave data synth it more compact but very slow, especially for looped playback with gaps you can't avoid, so WAAPI FTW.
added on the 2013-11-03 09:06:58 by Suborg Suborg
I see that you've created a simple bytebeat engine. Are you using it with the Web Audio API?
added on the 2013-11-03 12:17:58 by paldepind paldepind
paldepind: Thanks. Suborg's bytebeat function doesn't use the Web Audio API. It generates a 8bits 8Khz mono WAVE PCM file based on the "bytebeat" code you pass it, just like the one I linked to in my previous comment. To play the sound, you just do:
Code:new Audio(beat(youByteBeatExpression,theDurationYouWantInSeconds).play();
added on the 2013-11-03 13:54:11 by p01 p01
p01, ok. So that's pretty much the same. I've also considered the technique you use in your JS1K Speech Synthesizer and Hypersonic Mandelbulb. It seems very compact.

But with both that and using bytebeat I can't think of any way to render the visuals in accordance to the audio which is what I'd like to do. I've previously created a sound visualizer with bars using the Web Audio API but it takes a lot of boilerplate. Not sure I can make it fit.
added on the 2013-11-03 14:29:04 by paldepind paldepind
My original idea was, that since the sound you get from bytebeat is essentially a function I could use that function as a part of my visuals as well. But doing that is pretty tough since the audio file might get ready faster in some browsers and the visuals might be slower to render in other browser. Things go out of sync.
added on the 2013-11-03 14:36:46 by paldepind paldepind
Well, using bytebeat, you DO have a function that represents your audio. So nothing forbids you from re-using that function. You could even evaluate that function ( passing the audio.currentTime * 1000 ) during the demo to do whatever crazy synch you want. In that case you might want to do like in MATRAKA, that is to generate a multichannel WAVE PCM, so that your bytebeat function returns an array of values ( one per channel ). That way you can do your synch for individual channels.
added on the 2013-11-03 14:38:12 by p01 p01
Generate the whole audio first, evaluate "snapshost" using audio.currentTime * 1000 at run time for your synchs.
added on the 2013-11-03 14:39:34 by p01 p01
Yes, reusing that function was my idea exactly.

For some reason I had gotten into my head that currentTime returned a whole number and therefore was pretty useless. Wouldn't make much sense. But the fact that it doesn't is great. Then my idea might be possible after all. Maybe I could even bind my main loop to the timeupdate event! We'll see about that.

I've managed to get my current rendering/visual code down to 550 bytes. It should be possible go find room for the music too :)
added on the 2013-11-03 16:06:33 by paldepind paldepind
i would be happy if firefox on mac would play mp3s already. been pending on buglist for months.
added on the 2013-11-03 16:22:07 by psenough psenough
psenough: This is not a bug per se. It's a codec/patent issue that's not gonna get solved overnight.
added on the 2013-11-03 16:23:36 by p01 p01
p01: last time i checked the bug report i believe it mentioned the patent issue had been resolved and that the support should come out in production soon. was hoping to see it on 25, but alas.
added on the 2013-11-03 16:26:18 by psenough psenough
Aaaah! I guess that's covered by the Cisco's gratis H264 codec. Great!
added on the 2013-11-03 16:57:47 by p01 p01
Ok. So the timeupdate event doesn't fire that often. At least not in Chrome. So I'll stick to my setInterval.
added on the 2013-11-03 17:26:51 by paldepind paldepind
p01, it _is_ a bug. Why? Because if I'm not living in US/Germany/Japan (the only countries these MP3 patents are still working in), and I do have an open-source MP3 decoder (LAME) installed systemwide, I am expecting the browsers to see and use that codec just as well as they see and use systemwide-installed Flash plugin with no limitations. And as an end-user, I don't give a shit what's happening thousands of kilometers and several borders away from me. We do have a right to use MP3 in our development process.
It's not only about Narcofox, you know. While G00gle Chrome has the internal Flash player and MP3 decoder, Chromium relies on systemwide-installed Flash. Why can't it rely on a systemwide-installed MP3 codec too, if present? Because of some greedy hands spreading the "divide-and-rule" tactics.

but fear not, we have Aurora.js and some other kits, though it's too bad that they don't fit the scene requirements.
added on the 2013-11-03 17:36:07 by Suborg Suborg
paldepind, my tiny bytebeat engine doesn't use Web Audio API, but a floatbeat engine for 44100/48000 surely will.
added on the 2013-11-03 17:43:36 by Suborg Suborg
by p01:
psenough: This is not a bug per se. It's a codec/patent issue that's not gonna get solved overnight.

by psenough:
p01: last time i checked the bug report i believe it mentioned the patent issue had been resolved and that the support should come out in production soon. was hoping to see it on 25, but alas.

Firefox on Windows solved it by outsourcing any non-browser-native support of formats to an OS audio system. Thus on Windows 7 it can play back MP3 files. It gets around their objections on such formats because someone else dealt with the requisite licensing/etc. issues, not them.
yes, we know it's only a pending issue on mac side.
added on the 2013-11-04 14:25:22 by psenough psenough