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...

15. October 2011 at 11:30 - Music (Tags: , , , , ).

  • 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

    Mind blowing 😀

    No votes yet.
    Please wait...
  • Where is the fish?

  • Further info

  • Twitter

    Follow @jurajmichalek on twitter.

  • Comments

  • Tags

  • Topics