pouët.net

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.

* WAVE PCM generation ... easy, but a bit "roots"
* WEB Audio API ... powerful but support across browser is rather recent.

AFAIK kb is working on a JS syntie.

For oldschool WAVE generation, you could have a look at SoundBox.

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!

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.

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.

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.

> 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.

I see that you've created a simple bytebeat engine. Are you using it with the Web Audio API?

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:

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.

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.

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.

Generate the whole audio first, evaluate "snapshost" using audio.currentTime * 1000 at run time for your synchs.

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 :)

i would be happy if firefox on mac would play mp3s already. been pending on buglist for months.

psenough: This is not a bug per se. It's a codec/patent issue that's not gonna get solved overnight.

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.

Aaaah! I guess that's covered by the Cisco's gratis H264 codec. Great!

Ok. So the timeupdate event doesn't fire that often. At least not in Chrome. So I'll stick to my setInterval.

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.

paldepind, my tiny bytebeat engine doesn't use Web Audio API, but a floatbeat engine for 44100/48000 surely will.

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.