Web Audio API – Playing simple RTTTL Melody

Web Audio API is powerful and easy to use API that allow web sites do play different kind of sounds. It is possible to apply sound effects, play mp3, wav etc, and much more.

For this very simple tutorial, I am translating an old class I used in Arduino to play melodies in the buzzer. Very few modifications later and it is able to play RTTTL melodies in web browser.

About the old library (Arduino)

The Arduino library received the RTTTL (Ring Tone Transfer Language) string representation of the melody and played using the buzzer.  The RTTTL is a simple format, as you can check in this Wikipedia extract.

From WIKIPEDIA

The RTTTL format is a string divided into three sections: name, default value, and data.

The name section consists of a string describing the name of the ringtone. It can be no longer than 10 characters, and cannot contain a colon “:” character. (However, since the Smart Messaging specification allows names up to 15 characters in length, some applications processing RTTTL also do so.)

The default value section is a set of values separated by commas, where each value contains a key and a value separated by an = character, which describes certain defaults which should be adhered to during the execution of the ringtone. Possible names are

The data section consists of a set of character strings separated by commas, where each string contains a duration, pitch, octave and optional dotting (which increases the duration of the note by one half).

The format of RTTTL notation is similar to the Music Macro Language found in BASIC implementations present on many early microcomputers

In the example below, I added the folowing RTTTLs: The Simpsons, Entertainer, Beethoven, MissionImp, Looney, Bond, GoodBad, Flinstones, TopGun, Jeopardy, Muppets,
Xfiles, StarWars, TakeOnMe, LedZeppel, Indiana.

Important to notice, I am not a musician. Some of those RTTTls have one or another wrong note, but you can find several other using google.

Introduction

This post is to show the code to play RTTTL melodies in the browser. If you need detailed info about Web Audio API, please check this Getting Started with Web Audio API or/and Mozilla – Web Audio API

Web Audio API can be accessed using the class AudioContext.

Now audio is a context where you can add several kind of sources like oscillator and stream.

This is the full source code. I have included some RTTTL samples.

 

You can try the example here:   RTTTL Melody sample