Hacker News new | past | comments | ask | show | jobs | submit login
Introducing the Web Audio Editor in Firefox Developer Tools (hacks.mozilla.org)
196 points by rnyman on June 18, 2014 | hide | past | favorite | 27 comments



A little over five years ago, when a whole lot of people were telling me that Javascript could do anything that Flash could do, whenever I brought up anything related to audio, I'd get silence. Writing something like http://www.audiotool.com/ to operate in the browser was just not possible without Flash (or maybe Java)

The continued envelope-pushing going on at Mozilla with regards to audio in the browser has been great to watch unfold. Part of what made the web browser so interesting to me was that I could easily build things in it using a text editor. I didn't need to buy a compiler or a textbook, because I could look at an interesting website and peek under the hood. It's been a gateway into other more complicated realms of software production for me, and it's exciting to see audio signal processing tools coming into the fold as well.


See, I'm not interested in what Flash could do. I'm interested in what Ableton, Garageband, etc. can do.

With Web Audio, you can't ask for mic permissions without listening indefinitely, using up battery. You can't process audio offline with the exact same API, you have to send a 0 gain signal to the speakers and do it slowly, real-time. Want complex-valued FFTs for adaptive frequency domain filters? Sorry, all you get is a toy magnitude spectrum with shitty exponential smoothing. This isn't envelope pushing in the slightest, and I don't understand why people are impressed by this. Except of course that web developers are easily amused.

In all this HTML5 malarkey, WebGL is the only API that managed to avoid "not invented here" syndrome, and even that is years behind what is considered normal on mobile, with essential extensions still waiting for approval.

Are we supposed to be impressed by the audio capabilities of 15-20 years ago simply because now you get to do them in single-threaded JavaScript, with annoying black box async APIs, shitty number types and no serious high resolution timing control? Go build a web audio API based audio player with real-time effects that can play skip-free for hours on a busy mobile device. Then I'll be impressed.


>See, I'm not interested in what Flash could do. I'm interested in what Ableton, Garageband, etc can do.

If you're coming from the angle of an Ableton user waving that kind of attitude around, why on earth would you even bring up Garageband, the novelty of which was solely in that it was baked into the operating system. It otherwise was far behind the capabilities of any number of DAWs you, I, or any number of folks here could list.

If you want envelope-pushing audio generation and processing, obviously that's not going to happen in a contemporary web browser. However, reducing developmental roadbloacks so that curious people can more easily dip their toes into the realm of audio DSP is always a wonderful development.

My own personal path went from Screamtracker (free) to Impulse Tracker (free) to Rebirth (affordable) to hardware synthesizers to drums, guitars, amplifiers, modifying analog drum machines, microphones... If it weren't for the taste that I got from an inexpensive gateway (Screamtracker) I wouldn't have plonked down for a cutting-edge Dave Smith Instruments Tempest a couple of years ago. Learning how to do things like flanging, chorus, and delays in the limited environment of mid-90s tracker software helped lay a foundation of understanding for the tools I came to use in the future. I do not still use Screamtracker when I'm recording music, but I continue to build upon what I learned because of Screamtracker.

If you're not impressed by this development because you want to push envelopes, please go back to the music you're making in Ableton and Garageband, which I'm sure is incredible.


If the comment didn't tip you off, I'm a DSP engineer. I don't make music, I make software. The software I want to make, I can't make with the Web Audio API.

Sandboxes are cute, but they are a shitty choice to build the platform of the future on.

I just don't understand why people ignore this elephant in the room.


You're not going to make the kind of software you want to make using the Web Audio API.

However, maybe the kid who's poking around with it on his computer today will be the one who expands on what they learn in that sandbox, and years down the road, sends you a resume that in addition to the typical work/school history, has the kind of exploration-driven side-projects on it that differentiate that resume from the rest of them.


Just for a note, there is OfflineAudioContext to process audio offline as fast as your filter chain allows.


> . Writing something like http://www.audiotool.com/ to operate

Sorry but in terms of holding the tempo the browser is still not accurate.Audio Synthesis is only one part of the problem.Flash is bloody accurate in term of sequencing and playing sounds at the right time.The browser is just not.that's why Flash sequencers are possible,but WebAPI ones arent.


Oh, believe me, I know. That was my first and foremost complaint. When I was ranting about this back then, I decided to put my money where my mouth was by recreating a Roland/Boss drum machine in the browser - http://www.bitrotten.com/dr110 - I was also a bit rusty on my CSS & Javascript, and it was a good excuse to brush up there. There were a few annoyances I ran into along the way, but what leaves the concept dead in the water was the completely unstable clock. The only browser at the time that came even close to stable was Firefox, on a fairly speedy machine. Having proved my point (to myself) that Javascript wasn't ready, I've basically abandoned that project as something to revisit later as audio capabilities of web browsers become more robust. It's still easily a decade and a half behind Flash on that front.


I disagree. I made a drum machine that, while has a few bugs (the beat url), tempo isn't one of them. Even when switching tabs.

http://beatpetite.com

As an aside, the drum sounds themselves are generate using the web audio api.


I don't think I can edit my other comment, so here's a new reply: The tempo's jittery for me, and the audio's dropping here and there, just with a single row of 16th note hihats. It also totally destroys the back button, flooding the browser history. I'm running Windows 8.1, Firefox 30, 16gb RAM, i7-2600@3.4ghz (it's my HD video & multitrack audio editing machine)

I'm not even switching tabs.

Doesn't appear to even display in IE11, although to be fair, I just opened my DR-110 up and, while it renders, and most of the buttons are functional, the knobs are not, and no audio plays back.

Playback of beatpetite seems steadier in Chrome, but as I typed that, I got an audio hiccup. The visuals are noticeably jerky. Again comparing to my DR-110, it's pretty clear I'm using a different approach to the audio playback because I'm getting seriously weird glitches on my playback. And the CSS buttons don't quite line up on mine in Chrome the way it does in the other two browsers.

I wouldn't spend too much time chasing a solid tempo down. That's essentially out of your control.


This is great feedback, thank you!

Yeah, I think Firefox isn't quite up to the job yet. But I think Chrome's performance is indicative that it is possible.

I'm using the technique described in this article, but with a web worker, meaning that the clock doesn't stop when changing tabs.

http://www.html5rocks.com/en/tutorials/audio/scheduling/


Awesome, thanks for sharing. This definitely looks like the way to go in the future, and with any luck, the abilities of the various browsers will catch up.


The tempo IS totally off,do you want me to record the output of your app and post it here? i've been developing audiosoftware for 10 years,trust me I tried with Web techs.The tempo is never accurate.Your sequencer doesnt hold a steady 120 BPM.


Yes, please do! Would love the feedback. Are you using Chrome?


The tempo is very jittery for me in Firefox for Linux.

Also, you might want to go a bit easier on history.pushState() :-). I had a heck of a time getting back here.


Yeah, as I mentioned above, I don't think Firefox performance is quite there yet. Haha, good point! Thanks for the feedback!


Nice! I'll have to take a look at this when I got home. It's been a while since I put my drum machine together, I'm looking forward to seeing how you approached tempo.


I wonder how small the bridge between flashplugin and the underlying OS was to enable easy audio sync. Because other than this, flash and javascript are almost dialect-cousins.

http://stackoverflow.com/questions/2268276/what-are-the-key-...


NPAPI doesn't sandbox audio at all. That's part of why Flash can deliver better synchronization and scheduling; it talks to the native OS audio libraries directly.


Now waiting for the visual counterpart of this: http://imgur.com/T95SENl


Finally - someone gets the UI for this right! This is the first thing that has made me want to install fireFox since...well, since Chrome came out.


Download link because I spent 10 minutes looking through the Mozilla site for the right version: http://www.mozilla.org/en-US/firefox/channel/#aurora


Question: how would this impact music piracy and the ability of every day people to rip audio off the web?


holy crap this is awesome. Firefox is no longer using a proprietary audio API right? assuming it's the standard Web Audio API i might have a reason to reintroduce Firefox to my toolset now. :)


Web Audio has been supported as of Firefox 25 or something: http://caniuse.com/audio-api

It never had a proprietary API, their proposal for WebAudio just lost out to the Chrome proposal and the latter was standardized.


I assume you're mentioning https://wiki.mozilla.org/Audio_Data_API. After we implemented Web Audio, we deprecated and removed support for the Audio Data API.


Does this support DRM on the audio files?




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: