We thought it would be cool to make an application to generate music.

Initially our idea was to create something similar to the reactable table. Reactable is an electronic music instrument that uses a big translucent table and with the help of objects that you place on top of the table you can create music or sounds effects (it’s one of the cases where a video is better than 1000 words so please check in youtube if you are interested). However, this project would have been a bit too tough and complex to begin with, so we decided to create a simple beat sequencer managed with gestures. After checking an online beat sequencer we thought it would be cool to do something like that for android and we went for it.

The idea behind soundfuse is quite simple: we have a matrix where samples are represented by rows and the tempo is represented by columns. Moreover, there is also a progressbar that shows the position of the current beat.

Development

When this project started we were 4 persons. We all created the specifications and objectives for the day and divided the work between two groups of two persons.

One group took care of the sequencer part while the other group was taking care of the board UI and the communication to the sequencer. All interaction with the UI is reported back to the sequencer. It was really important to get the specifications well defined from the beginning of the project and, since the development of the two groups was running simultaneously, communication between teams was a key factor to success.

The application is divided basically into two main parts:

Layout overview

Each cell is implemented by using a ToggleButton view in disguise (the default style of the ToggleButton was overwritten by our custom theme).

Note that the entire board layout is created programmatically. We didn’t really feel like defining 32 togglebuttons plus the different layouts for each sample. Moreover, we already had in mind to make the number of samples and beats dynamically on runtime so it made sense to us to create the layout in the code.

The layout hierarchy is similar to:

  • rootLayout (FrameLayout)

    • progressBarView
    • mainLayout (LinearLayout)
      • boardLayout (sample 1)
        • ToggleButton 0
        • ToggleButton 1
        • ToggleButton 7
      • boardLayout (sample 2)
        • ToggleButton[0 ... 7]
      • boardLayout (sample 3)
        • ToggleButton[0 ... 7]
      • boardLayout (sample 4)
        • ToggleButton[0 ... 7]

FrameLayout was needed to display the progressbar on top of the board layout. The progressbar is a canvas element.

For the ToggleButtons width and height we had to calculate the screen dimensions beforehand by using the Display class. In other words, a cell width is display width / number of beats (8). The border and padding of the cell need to be taken into consideration as well.

There are some other options available through the menu to reset the bpm or overwrite a sample with a custom sound file stored in device’s sd card. We have included a simple file picker activity for that.

Sequencer

This part is responsible of generating the sound by using the SoundPool class provided by Android.

The sounds are played periodically until it’s stopped (by toggling the sound from the ui or by moving the application to the background).

The Sequencer has an internal representation of the board (currently a matrix but it could be changed for performance improvements) as well as methods to change the status of any cell. All togglebuttons implement a click listener that communicates any cell’s status change to the sequencer.

Sequencer has also methods to overwrite a sample, change the BPM etc.

You can find the source code at the SoundFuse Github repository.

Limitations and things to do

  • Adding more samples (rows) at runtime.
  • Implementing gestures to create sounds

Team

The following persons have been coding in soundfuse so far:

Download

Download latest SoundFuse APK (experimental)

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>