Experiments with audio, conclusion

I’ve been working with an amazing group of web, audio, and Mozilla developers on a project to expose audio data to JavaScript from Firefox’s audio and video elements. Today those experiments are over.

In December a few of us working on processing.js had an idea–what if we could visualize sound data coming out of an <audio> or <video> element?  My colleagues were good at thinking in terms of “how can we make what we have now work?” but I had another idea.  “Let’s try and teach Firefox how to do this.”  In December I set myself a challenge:

This post marks the beginning of what I expect to be a somewhat regular series of posts in which I will document my thinking, learning, and progress related to some Firefox development.  I say “Experiments” above, because I am going to try a number of things.  First, I’m going to push into a part of the Firefox source code where I haven’t worked before, namely, the DOM implementation (note: it scares me, to be honest).  Second, I’m going to do so in an open and pedagogic way, attempting to cast aside my own ego and hesitation at looking foolish–I don’t actually know how to do what I’m going to try, and will learn and fail as I go–on the way to producing an authentic model of open development for my students.  Third, I’m going to work with a few others who are also interested in extending themselves and extending the web.  The only thing I can assure you of at this early date is that these posts will be an honest account of the attempt.

Yesterday, the end result of that work landed in mozilla-central, on its way to inclusion in Firefox 4.  I’m immensely proud of the work we’ve done, and thrilled that my peers in the Mozilla community have also accepted it.  I’m also very tired :)

There’s lots of things that I could talk about in terms of the code and API, and probably we’ll do some of that soon (you can already use the API in a Firefox nightly, read about the API, and try live demos).  But what I wanted to end this series of posts by saying something about how Firefox, the Mozilla community, and the open web, make what we did possible.

The other day my family had some friends over, and we got talking about what I do.  Of course they had heard of Firefox, and used it themselves.  “But can you explain the difference between this and the other one I use, Internet Explorer.”  One of the big differences, I explained, is participation, the community of involvement, and the accountability that comes with this.

When we started these experiments, we did so without needing permission.  I didn’t have to sign an NDA, go talk to and convince the right people, or get approvals.  I just grabbed the source code and started messing around.  And I did make a mess, at first.  I learned as I went, and we iterated on the API a lot (I have over 80 versions of it here, not to mention the various implementations of those).  We weren’t judged for doing it wrong, or for the pace or directions we took.  Instead, we heard of lot of “this is very cool!” and “have you thought about this?”.  We were able to take one of the world’s premier applications (Firefox) and rework it.  It’s hard to overemphasize how significant this is.  We couldn’t do what we did in very many other contexts.

I said above that participation is paired with accountability, and this is also very important.  In the early months we built something that worked, but not what we have today.  As much as Mozilla made it possible for me to experiment, they also made sure that what got accepted was of the highest quality.  I haven’t blogged about audio much over the past three months, mostly because we’ve been too busy getting the patch fixed up based on reviews.  Before it could land we had to think about testing, security, JS performance, DOM manipulations, memory allocation, etc.  To get this landed we needed lots of advice from various people, who have been generous with their time and knowledge

What’s different about Mozilla?  I think of something Joe Hewitt wrote on twitter back in the spring that struck me:

Bottom line: we can currently only move as fast as employees of browser makers can go, and our imagination is limited by theirs. @joehewitt

Not one of the people who did this work is an employee of the Mozilla corporation.  When we decided to get serious about trying to include this in Firefox 4, one of the people working with us filed a bug, and the response was, “I don’t think we have the cycles to get this done in time.”  “That’s OK, we’ll do it then,” was the reply.  And we did.

The web is too big and too important to only go as fast and as far as a small group of employees can take it.  Mozilla gets this, and values community involvement like ours.  What we did is not unique–there are other great features and bug fixes coming in Firefox 4 that were done by community members vs. employees.  In fact the distinction between the two is often hard to see when you’re working on this stuff–we all work together.

Having said that, let me publicly congratulate my amazing audio peers, without whom this work wouldn’t have happened: Al MacDonald, Corban Brook, Yury Delendik, Charles Cliffe, Ricard Marxer, and our cheerleader and supporter, Chris Blizzard.  Also thanks to the dozen others who wrote demos with our stuff in the early days.  Demos are how you win (Chris Blizzard taught me that).

I’ll end with a video someone shot of my keynote talk at the recent Mozilla Summit.  I was doing a quick demonstration of what is possible with this API.  I look forward to seeing what the rest of the web will do with it.

This entry was posted in CDOT, Experiments with audio, Mozilla, Mozilla Education, Seneca, Teaching Open Source. Bookmark the permalink. Both comments and trackbacks are currently closed.

8 Comments

  1. Posted August 26, 2010 at 12:13 pm | Permalink

    Terrific story, I loved the demos at the Summit and I am very thankful for all of the work you and the others have put in on this awesome feature. This is the way the web moves forward!

  2. Posted August 26, 2010 at 6:04 pm | Permalink

    I enjoyed the story and I appreciate your humility.

    The tone you set when you opened up the project must have been very empowering.

    Seems to me that the video is evidence of great progress that you can call a success.

    Thank you!

    –r

  3. Brian Cleland
    Posted August 26, 2010 at 6:07 pm | Permalink

    Congrats David! I hope to be using this technology in some projects soon, and your hard work to get it included in Firefox 4 is much appreciated.

  4. Dan
    Posted August 27, 2010 at 7:38 am | Permalink

    My poor P4 can’t cope with the realtime effects demos! Cool stuff though.

  5. Posted August 27, 2010 at 7:41 am | Permalink

    My most sincere congratulations!
    This is still an amazingly inspiring work for me!

  6. Catherine Leung
    Posted August 30, 2010 at 9:58 am | Permalink

    Great post Dave! Grats on getting it landed.

  7. Jonah Williams
    Posted September 8, 2010 at 4:14 am | Permalink

    I don’t get it. It looked like a video from many years ago.
    I mean, Windows Media Player for years visualizes sounds. And many simple audio tools show what sound looks like in many differnt ways, plus beats per minute etc. And how about those automated voice overs I hear on YouTube, they sound many times more natural than the sign off ‘goodbye’ on the video above.
    Feel like I got caught in a time warp, watching the vid.

  8. Dave R.
    Posted September 9, 2010 at 7:33 am | Permalink

    @Jonah: the difference here is that all the audio processing and graphical effects are being done entirely within the web browser. There is nothing installed on the client machine to enable this and no browser add on either. As you say, previously you’d have had to rely on a media player or other standalone application to achieve this.

    It’s very impressive work. I consider it amazing that we’re able to get Javascript to work with raw audio now; the performance has progressed in leaps and bounds recently.

    Many thanks for the post and congratulations on the release, David.

17 Trackbacks

  1. [...] энтузиастов из числа разработчиков Firefox завершили эксперимент по обработке средствами Javascript звуковых потоков из [...]

  2. [...] his excellent post Experiments with audio, conclusion, Dave Humphrey mentions the following Tweet from Joe Hewitt: Bottom line: we can currently only [...]

  3. [...] experience a speech or a song through Firefox. Professor and Mozilla Developer Dave Humphrey has a more detailed blog post, and offers this demonstration to illustrate the power of this new [...]

  4. [...] Audio Data API is now available. See David’s blog post here (see screencast [...]

  5. [...] with Windows Media player. You can read more about this feature at a Mozilla developers blog post here or watch the video embedded [...]

  6. [...] HTML5 の <audio> <video> 要素中の音声データの視覚化 (詳細は Dave Humphrey 氏のブログ記事および YouTube [...]

  7. By Firefox 4 è Beta 5 e utilizza le DirectX 10 on September 8, 2010 at 1:57 am

    [...] add-ons rivoluzionari. Chiunque volesse approfondire l’argomento Audio API può leggere il Post di David Humphrey, Professore del Seneca College di Toronto. “Firefox 4 Beta introduces a new audio API to expose [...]

  8. [...] visualiseren van geluid is een feature die het goed doet in promotievideo’s (zie de video onder dit artikel). In deze [...]

  9. By Blog UNDAKOVR » Mozilla Firefox 4 Beta 5 on September 8, 2010 at 9:01 am

    [...] の開発者でもある Dave Humphrey 教授が、より詳しいブログ記事 と、この新 API のパワーを示す デモ動画 を公開しています。 [...]

  10. [...] the audio API offers, check out our earlier write up and be sure to read through Mozilla developer Dave Humphrey’s blog post. To see the new tools in action, check out the video Humphrey created to showcase some of [...]

  11. [...] the audio API offers, check out our earlier write up and be sure to read through Mozilla developer Dave Humphrey’s blog post. To see the new tools in action, check out the video Humphrey created to showcase some of [...]

  12. [...] más información sobre lo que esta aplicación ofrece, revisa el blog del desarrollador Dave Humphrey y el video que hizo para mostrarnos  qué más se puede hacer con este [...]

  13. By Un colpo a Firefox 3.6.9 e uno a Firefox 4 | Webnews on September 10, 2010 at 9:37 am

    [...] risposta di Mozilla è sì: si [...]

  14. [...] the audio API offers, check out our earlier write up and be sure to read through Mozilla developer Dave Humphrey’s blog post. To see the new tools in action, check out the video Humphrey created to showcase some of [...]

  15. By Mozilla Meluncurkan FireFox 4 Beta « OneDay's Blog on September 14, 2010 at 9:04 am

    [...] untuk pengalaman visual pidato atau lagu melalui Firefox. Profesor dan Mozilla Developer Dave Humphrey memiliki posting blog yang lebih rinci , dan menawarkan ini demonstrasi untuk menggambarkan kekuatan API baru [...]

  16. [...] experience a speech or a song through Firefox. Professor and Mozilla Developer Dave Humphrey has a more detailed blog post, and offers this demonstration to illustrate the power of this new [...]

  17. [...] experience a speech or a song through Firefox. Professor and Mozilla Developer Dave Humphrey has a more detailed blog post, and offers this demonstration to illustrate the power of this new [...]