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: sb.bitsnbites.eu.

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.

13 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! :)

    Cheers,
    -Austin

  2. losso says:

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

    Kudos and thanks!

  3. Anton says:

    Hello,
    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:

      Hi!

      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"}));
      audio.play();

      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.

  4. byc says:

    This is great fun. Made a little track. But the instruments desperately need a copy/paste function! For anyone who makes or edits presets that is crucial!

    • byc says:

      I love this thing,but I ran out of tracks and patterns!

      • m says:

        Amazing work! I especially like how you tricked the synth into doing arpeggio effects (something I’ve been thinking about how to introduce support for).

        Yeah, I should probably increase the number of patterns and number of song positions – it should come with no penalty for the song size. The number of patterns per track is actually mostly limited by the editor right now (you have to type in 0-9, I could probably add A-Z too ;-) ). With some effect commands (that I see that you are familiar with) you can kind-of extend the number of tracks by changing instrument parameters enough that you get two different instruments (but not at the same time, of course).

  5. Kikito says:

    Hi there,

    Thanks for making SoundBox. I used it to create the tune in my Ludum Dare attempt, Earth, Hell & Space. It’s not a great tune, but I had to familiarize myself with the tool first, and I also only had one weekend for making the whole game.

    I have three questions:

    1 – Is it possible to increase/decrease the duration of a played note? I could not find any.
    2 – Are there any keyboard shortcuts for copying and pasting? Doing it with the mouse was tiresome.
    3 – Any particular reason why there’s Copy and Paste, but no Cut command?

    Regards!

    • m says:

      I actually found the tune quite nice (listened to “life-in-the-80s.ogg” on GitHub) :-)

      1. Well, the most straight forward way to alter the length of a note is to use the effect column to alter the instrument sustain or release parameters (mark the desired line in the effect column and drag the knob in the envelope controls). It takse a bit of fiddling, but once you get used to it it’s not that difficult. See this example for instance.

      2. No (not that I know of ;-) ). I think I didn’t implement it since I started thinking about things like Mac OS X not using CTRL+C for copy, and if I could make a more generic/portable solution than just checking for CTRL and C.

      3. I guess less code, screen real estate and I didn’t have the “Cut” icon at hand? Plus, it’s quite easy to simulate it with Copy + Del (and I wanted to focus on getting the most important functions in place first).

      In any event – good feeback. I’ll have a look at adding the suggested functionality when I get around to SB coding again.

      • Kikito says:

        Woah, that seems a bit overkill – modifying one instrument to change a note length, I mean. But whatever works, I guess. I confess that in my 2-hours time with SoundBox I didn’t use the third column at all (could not figure out how it worked).

        I think it would have helped better if the instruments updated themselves when I clicked on the third column. In the example that you gave me, when I click on the numbers of that column, the instruments remain unchanged. So I could not deduce that they were related at all (I didn’t find the docs until after the challenge).

        I have another suggestion: instead of (or in addition to) exporting javascript, export JSON. That way I can load the songs in a non-javascript environment (I could translate player-small.js to Lua, for example)

        That is all. Thanks!

  6. mackinac says:

    Hey! I’ve downloaded the Jazz plug-in to get MIDI recognition for my browser (which works on the Jazz-Soft website) but SoundBox refuses to do so. I know it’s been a bit since you’ve updated the site, but I’ll ask anyways: Any idea why?

    I’m using one of the latest versions of Chrome on a Macbook and an Akai MPK mini.

    • m says:

      Actually, one reason might be that Chrome is using a native implementation of the Web Midi API, whereas the Jazz plugin is used for a Web Midi API shim. My guess is that the shim will not be activated when there is a proper Web Midi API present.

      Since the Web Midi API is still under development, and SoundBox was developed against a fairly early version of it, it’s possible that SoundBox is not compatible with the version exposed by Chrome. I’ll have a look at it when I get the chanse.

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>