JavaScript

posts displayed by category

photo-1420708392410-3c593b80d416
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 HTML5Rocks.com, 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 Read More
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: https://github.com/RiverTrail/RiverTrail/wiki

Prototype: https://github.com/RiverTrail/RiverTrail
Final API: http://nightly.mozilla.org/
Sample workloads repo + tutorial: https://github.com/IntelLabs/ParallelJavaScript
Cool parallel JS articles: http://smallcultfollowing.com/babysteps/blog/categories/pjs/

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

Posted on November 18, 2013 by Thibault Imbert · 0 comments Read More
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 Read More
JavaScript

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 Read More
3d-graphics-color-spectrum
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 · 48 comments Read More
Parallel
JavaScript

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 (caniuse.com 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 · 24 comments Read More
JavaScript

Adobe Scout: Profiling Taken to the Next Level – Session video

Here is the recording from the Adobe Scout: Profiling Taken to the Next Level session from Adobe MAX 2013.

We are sneaking here for the first time an experiment we have been working on, to support HTML/JS inside Scout, check at 27:00 ;)

I recommend you playing it fullscreen in HD. Thanks to all of you who attended in person. If you are checking it now, I hope you guys like it!

Posted on May 10, 2013 by Thibault Imbert · 0 comments Read More
JavaScript WebGL

Introducing Starling.js

Starling.jsAlmost 2 years ago, Starling was born, an open-source ActionScript 3 framework for game development powered by Stage3D in Flash. In the past year, the momentum we have seen around Starling has been fantastic. Companies like Zynga, Rovio but also many small studios or indie developers have been using Starling to create beautiful mobile and desktop games. The Starling community has been growing with today over 3000 members of the Starling forum contributing extensions and improving the framework everyday.

With the growing demand around mobile browser-based games, we thought it would be useful for developers who love Starling to be able to use the framework they know on top of web standards. Starling.js is based on canvas (WebGL in the longer term) and is developed with TypeScript, allowing developers to choose over the plain JavaScript or TypeScript version to leverage ES6 features and valuable things like optional static typing.

Here is small class, showing what it looks like:

We hope you will love Starling.js, we just posted a little demo here. Daniel posted some more details on his blog.

To get notified when Starling.js is available, you can subscribe here.

Posted on May 2, 2013 by Thibault Imbert · 3 comments Read More
1 2