HTML Structure

Listing 10 shows the sample application's HTML document. The application makes use of the Traceur compiler, a tool that lets you test ECMAScript 6 code by converting it to a form that is compatible with contemporary JavaScript implementations (see the box titled "Traceur").

Traceur

The Traceur compiler [7] acts as a stopgap for missing or incorrectly implemented features in Firefox, Chrome, and Internet Explorer version 10 or newer.

Traceur translates programming code from ECMAScript 6 back into the previous ECMAScript 5 version, which is compatible with native JavaScript code. The AngularJS open source project [8] is already programming the next version of its JavaScript framework with Traceur. Traceur has been developed by Google under the Apache License 2.0 since 2011. The compiler is currently at version 0.0.46.

Listing 8 shows the installation of Traceur for local use on a server running Ubuntu 12.04. Because Traceur itself is implemented in JavaScript, line 1 initially installs the server-side JavaScript implementation Node.js with the Apt package manager. Line 2 then adds the Node.js package manager Npm.

Line 3 first allows Npm to use Ubuntu's self-signed SSL certificate so that line 7 can then retroactively load the Node.js Commander module. Lines 4 and 5 download and unzip the latest release of Traceur. Figure 2 shows the terminal after successful installation. Use the traceur command to convert ECMAScript 6 back to Version 5 in the root directory of the release:

Figure 2: The installation of the Traceur compiler has completed successfully.

./traceur --out ecma5.js   --script ecma6.js

Listing 9 shows how to use Traceur on the fly in an HTML document. The compiler converts ECMAScript into native JavaScript through the browser before execution. The script tag in line 4 loads the Traceur compiler, and that in line 5 loads the required bootstrap.js module from the network. The statement in line 6 activates all features of Traceur. In the following script tag, the type attribute uses the module value to tell Traceur to compile the JavaScript code within the tag.

The developer can use a document like Listing 9 to test ECMAScript 6 code and Traceur. Add code to the script tag in line  7 and then load the document in current versions of Firefox or Chrome. The results appear in the browser's JavaScript console, which you can open using the Ctrl+Shift+J keyboard shortcut.

The computer needs an Internet connection to test Traceur on the fly. The HTML document has to come from a web server if you use Chrome, even if it is a local server. Figure 3 shows the output from Listing 9 in the Chrome browser console.

Figure 3: The JavaScript code in Listing 9 writes the text 123 to the console in line 7.

Line 4 of Listing 10 integrates formatting instructions from a CSS file into its header (lines 3-10). Lines 5 and 6 load the Traceur compiler and line 7 the open source jQuery [9] JavaScript framework. Line 9 ultimately integrates the sample application's JavaScript code. Line 8 unlocks all the available features of Traceur. The div container stores the list with the control elements (lines 14-18) and the title in the h1 element in lines 12 to 19. The input field in line 15 is of the number type; the buttons (lines 16 and 17) are of the button type.

Listing 11 contains the ECMAScript 6 code [10]. The first line imports the Metronome class; line 2 defines the met variable for storing a Metronome instance. In the line that follows, a jQuery expression creates and stores an instance of Metronome.

Event handling in line 4 responds to a click on the Start button by calling up the play() method and, in doing so, starts the metronome. The jQuery expression $('#beats').val() in the method call's parameter list first reads the meter from the text field with the ID beats (Listing 10, line 15). Clicking the Stop button calls the stop() method.

The Metronome class constructor function (Listing 7, lines 2-5) initializes the context attribute in line 3 with the audio context of the Web Audio API. ECMAScript then uses this attribute to call all the API methods. The webkit manufacturer prefix takes the Chrome browser into consideration. Line 4 calls the loadBuffer() method (lines 7-13). It loads the audio file with the pulse audio file from the server and transfers it for further processing to an audio buffer. Additionally, line 8 first generates and stores an XMLHttpRequest object in the request variable. Line  9 loads the audio file from the server using the open() method.

Audio Processing

The callback function in line 11 further processes the loaded audio file: The application converts it with the decodeAudioData() method into an audio buffer and stores it in the object's buffer attribute. The play() method (lines 15-22) plays the beat in a loop. First, in line 16, it stops the beat being played by calling up stop(). Line 17 then produces a playable audio node of type AudioBufferSourceNode using createBufferSource() and stores it in the src attribute.

Line 18 sets up the audio buffer loaded from the server as an input. The extendBuffer() method first sets the buffer to the right length. Line 19 causes the playable audio node to repeat the audio buffer constantly, before line 20 connects it to the computer's sound system. Calling up the start method in line 21 starts playback. Figure 4 demonstrates how audio buffers, playable audio nodes, and the sound system are connected.

Figure 4: Schematic function of the Web Audio API.

The pulse lasts for about 0.1 seconds. The extendBuffer() method (lines 28-34) extends the duration of the beat to reflect the configured meter: to 0.5 seconds for a meter of 120 beats/minute and to 1 second for a meter of 60 beats/second. Line 29 also calculates the required playing time in units of the sample rate at which the audio file of the beat was digitized and stores it in the total variable. The configured meter is converted to the playing time via the beats variable in the call up.

The subsequent line starts the createBuffer() method to produce an empty audio buffer from the previously computed playing time. Additionally, the code adopts the number of channels and the sample rate from the audio buffer with the beat. The final for loop copies each channel of the audio buffer with the beat to the start of the corresponding channel in the extended buffer.

Conclusion

Table 1 shows the status of ECMAScript 6 implementation in current browsers and the Node.js server [11]. You can find a very useful description of ECMAScript 6 in Firefox in the Mozilla documentation [12].

ECMAScript 6 rejuvenates a hitherto classless language with elements from other programming languages. The latest upgrade simplifies and modernizes the language, and it is likely headed for success with users. However, it will be some time before browsers become fluent in ECMAScript  6. Meanwhile, the Traceur compiler provides developers with an opportunity to take advantage of the modernized scripting language today.