Composing and playing music with HTML5

I was searching for a web based music note editor. I found HTML5 Cloud Composer from Greg Jopa.

Then I found something more like good old FastTracker: Sonant Live composer.

You can use Sonant Live composer to create tracks with music.

What is even more interesting about this composer is that you can store your song into pure JavaScript file and replay it with js-sonant.

The princeple of js-sonant is quite simple. You just store music structure into song variable and then you call createAudio. It will produce HTML5 audio object with wav rendered from your song tracks.

Here is sample code:

var songGen = new sonant();

for (var t = 0; t < 8; t++)
{
    songGen.generate(t);
}

audio = songGen.createAudio();
audio.loop = true;
audio.play();

Here you can play my simple attempt to make music. :-)

Note: Your browser must support HTML5 audio in order to play this music. Browsers which have support for HTML5 audio: Google Chrome, Firefox, Opera, Safari.

Note 2: Please wait few seconds after you clicked the Play button. You browser will render JavaScript music notation into playable Wav.

No votes yet.
Please wait...

Leave a comment

15. October 2011 at 11:30 - Music (Tags: , , , , ). Both comments and pings are currently closed.

3 Responses to “Composing and playing music with HTML5”

  • cool demonstration! eventhough HTML5 audio player might not pack all of the features it works well.. it let’s iOS folk hear the mp3, tho the player will launch in a new webpage; and to return to your original page, html5 music player

    No votes yet.
    Please wait...
  • hey thank u for posting this article as I’m currently doing abit of looking into this just now and this has help’d loads I hope you keep up the great effort

    No votes yet.
    Please wait...
  • Tony Pirat Gustafsson says:

    Mind blowing :D

    No votes yet.
    Please wait...