Working on SoundBox

I’ve done some more work on the SoundBox tool, and as some of you may have noticed that it’s now live on the dedicated site:

Compared to the Lite version (posted to the Mozilla Dev Derby), a few new additions have been made:

  • You can now import/export binary song files from/to your local computer.
  • You can import Sonant songs into the editor.
  • WAV export should now work much better in most browsers.
  • You get real-time audio playback when you enter notes (requires the Web Audio API, tested in Firefox Nightly and Chrome).
  • You can even enter notes using a MIDI input device (currently requires the Jazz-Plugin, in anticipation of the Web MIDI API).
  • There’s a stand-alone player routine: player-small.js.

It keeps getting better – hope you like it!

This entry was posted in JavaScript. Bookmark the permalink.

4 Responses to Working on SoundBox

  1. Austin says:

    Thank you so much for this tool! I really appreciate you making something like this and it means a lot to me that you would offer something like this for everyone to use. This seems to be perfect for my needs as I am using a Chromebook and needed a web based tracker.

    I look forward to the implementation of some richer oscillators and noise generators as well as the ability to save your own presets. I also would like to see a way to change up the spacing and sizing of the interface as I have lots of unused screen real estate.

    In any case, this is awesome and I greatly look forward to your further development on it! :)


  2. losso says:

    Real-time playback, small player – that’s fantastic!

    Kudos and thanks!

  3. Anton says:

    could you help me to make the player-small.js stopable.

    I made a javascript code and started the music but I also need to stop it in order to start another melody. Is there any funktion which can stop playing music? Just like startmusic() starts the music.

    Another question: is there any possibility to make music loops?

    • m says:


      As far as player-small.js is concerned, it just returns a WAVE formatted typed array (the createWave() method). It’s up to you to do something with the result. The natural way is to put the WAVE data into an Audio element, and then call play() on that element.

      See for instance the following demo: demo.html

      Here’s the critical piece of code:
      var wave = player.createWave();
      var audio = document.createElement("audio");
      audio.src = URL.createObjectURL(new Blob([wave], {type: "audio/wav"}));;

      Here you can add audio.loop = true , and you can do audio.pause(). You should be able to re-use the same audio element for playing different WAVE:s.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>