JavaScript Web Audio

From microphone to .WAV to server with: getUserMedia and Web Audio

I blogged recently about capturing the audio from the Microphone with Web Audio and saving it as a .wav file. Some people asked me about saving the file on the server, I have to admit I did not have the time to look into this at that time, but it turns out, I had to write a little app this morning that does just that.

So I reused the code from the Web Audio article and just added the 2 additional pieces I needed.

  • The XHR code for the upload
  • 3 lines of PHP needed on the server.

So here we go. In the encoder, I had the following code to package our WAV file:

The key piece is the last line. This is our blob that we will send to the server. To do this, we use our good friend XHR:

It takes our blob as a parameter and sends it to our php file. Thank you Eric Bidelman for the great article about tricks with XHR on, the function is literally a copy/paste from there.

And then all you need are these 3 key lines of PHP code. Funny, these lines come from a Flash project where I needed to send raw binary data (ByteArray) through POST. Code recycling, simple, easy.

And that’s it. Voilà!

Posted on March 8, 2015 by Thibault Imbert · 10 comments CONTINUE READING
CSS Extract

Interested in next-gen PSD extraction? Have a look at Project Parfait!

If you use Photoshop for web purposes, you probably spend quite some time extracting things like colors, fonts, images and more out of your compositions. At Adobe, we think this process should be seamless and we have been thinking about a new way to do this through a new project called ‘Parfait’. A few weeks back, we gave a sneak peek of it at SXSW, and it was great to see you guys excited!

To ensure we develop the best product for you, we would love to have you test the beta of Project Parfait available at We can’t wait to hear what you guys think of it. See you on the forums!

Posted on April 22, 2014 by Thibault Imbert · 1 comment CONTINUE READING
River Trail
JavaScript Parallel Programming

A chat about River Trail

A few weeks ago, I got the chance to interview the team behind the River Trail project, developed at Intel in partnership with Mozilla. This is a great effort, trying to bring multicore programming in an elegant and concise way to JavaScript developers. It is great to see Intel contribute innovation to the web platform, especially on such a topic as parallel programming.

If you are curious about River Trail, here is the video interview below. I hope you guys will like it. Expect some more videos in the future about various topics, from JavaScript to more designer oriented episodes.  If you’d like to be notified when new videos are posted, follow @adobeweb or myself @thibault_imbert.

Important links mentioned in the video:

Official River Trail github repo:

Final API:
Sample workloads repo + tutorial:
Cool parallel JS articles:

Big thanks to Tatiana, Jaswanth and Stephan from Intel for their time and kindness.

Posted on November 18, 2013 by Thibault Imbert · 0 comments CONTINUE READING
Shape of my heart

Technology, a means to an end

Today, I had the chance to give a talk at the University of Arizona (Tucson) called “Technology, a means to an end” (video recording available here). I shared my perspective on technology and how I approach it today. To summarize it, I see technology as serving a goal, and never the reverse. Never be religious about technologies, they come and go. Focus on your goal, implementation is a detail.

Session description:

Technology is fascinating, but should this be what’s driving us? What are the things you can do to differentiate yourself today? With all that noise, what are things you should be looking at? In this talk we will look at the different technologies available today to build amazing experiences and what’s coming tomorrow. We will focus on the importance of learning, crafting and getting out of your comfort zone and most importantly, never be religious about a technology.

Posted on October 22, 2013 by Thibault Imbert · 4 comments CONTINUE READING
JavaScript WebGL

ShaderDSL.js: Writing shaders in JavaScript

If you have been playing with WebGL you probably have heard of GLSL, the shading language used with OpenGL and as a result WebGL. Due to its origin, GLSL is not very web developer friendly with a C style syntax, statically typed and an implicit data passing model (re:varying registers).

This is what a typical GLSL shader usually looks like:

As a recall, a shader program is made of a vertex (for vertices position) and a fragment (pixel color) shader. As you can see, it really is just C code embedded in the page, which may feel a little unnatural to most web developers. That’s why we recently started a little experiment, to make shader programming a little easier and more web friendly, so please meet ShaderDSL.js, a project initiated and led by Krzysztof Palacz at Adobe.

Posted on September 2, 2013 by Thibault Imbert · 6 comments CONTINUE READING

Intel8080 emulator: Explicit coercion fix for Chakra

I was pointing out recently the disappointing performance of JavaScript in IE11. As a test I was using the Intel8080 emulator I wrote a few months ago. John-David Dalton (PM for the Chakra VM at Microsoft)  kindly investigated the issue and came back with a one line fix, improving largely the performance. This was the line causing the issue (line 44 in screen.js):

Which should be changed to:

Posted on July 29, 2013 by Thibault Imbert · 0 comments CONTINUE READING
JavaScript Web Audio

From microphone to .WAV with: getUserMedia and Web Audio

Update: The new MediaStream recording specification is aiming at solving this use case through a much simpler API. Follow the conversations on the mailing list.

A few years ago, I wrote a little ActionScript 3 library called MicRecorder, which allowed you to record the microphone input and export it to a .WAV file. Very simple, but pretty handy. The other day I thought it would be cool to port it to JavaScript. I realized quickly that it is not as easy. In Flash, the SampleDataEvent directly provides the byte stream  PCM samples) from the microphone. With getUserMedia, the Web Audio APIs are required to extract the samples. Note that getUserMedia and Web Audio are not broadly supported yet, but it is coming. Firefox has also landed Web Audio recently, which is great news.

Because I did not find an article that went through the steps involved, here is a short article on how it works, from getting access to the microphone to the final .WAV file, it may be useful to you in the future. The most helpful resource I came across was this nice HTML5 Rocks article which pointed to Matt Diamond’s example, which contains the key piece I was looking for to get the Web Audio APIs hooked up. Thanks so much Matt! Credits also goes to Matt for the merging and interleaving code of the buffers which works very nicely.

First, we need to get access to the microphone, and we use the getUserMedia API for that.

Posted on July 22, 2013 by Thibault Imbert · 52 comments CONTINUE READING

Concurrency in JavaScript

Just like with Flash, JavaScript code runs by default on the UI thread, and any expensive computation will usually affect the UI responsiveness. As you may know, at 60 fps, you have around 16ms (1000ms/60) per frame to do what you have to do (computations, rendering and other misc logic). If you exceed that budget, you will alter the frame rate and potentially make your content feel sluggish or worse, unresponsive.

Frame budget

Frame budget

Web Workers are now broadly available in most browsers even on mobile ( stats for Web Workers) and give you the power of concurrency from within JavaScript. It will allow you to move expensive computations to other threads, to permit best responsive programming, and ideally open the doors in the future to true parallelization in JavaScript. Let’s have a look at the reasons why you may be interested into leveraging Web Workers.

  • Responsive programming: When you have an expensive computation and don’t want to block the UI.
  • Parallel programming: When you want to leverage multiple CPU cores by having computations running concurrently to solve a specific task.

We will see later on that parallel programming with Web Workers can be challenging, and that they are not really designed for that today unfortunately. But before we dive into the details of responsive programming and parallel programming, let’s start with some more details about Web Workers. Note that we will cover here dedicated Web Workers, not the shared Web Workers.

Posted on July 1, 2013 by Thibault Imbert · 28 comments CONTINUE READING
1 2