Design with Silverlight

I finally had an opportunity to update my Silverlight drumpad program to be a little more what I had in mind when I started.

There are now 6 different drum kits you can choose from on the fly. This was done by adding the sound bites for the drums to the project as a resource, and assigning the path of the sound file to a string when a particular kit is selected from the list box. This is done through a case statement, a portion of which is shown here:

case "Yamaha RX-21":
bassDrumSound = "sounds/YamahaRX21/Bassdrum.wma";
snareDrumSound = "sounds/YamahaRX21/Snaredrum.wma";
closedHatDrumSound = "sounds/YamahaRX21/ClosedHat.wma";
openHatDrumSound = "sounds/YamahaRX21/OpenHat.wma";
tomHighDrumSound = "sounds/YamahaRX21/TomH.wma";
tomMedDrumSound = "sounds/YamahaRX21/TomM.wma";
tomLowDrumSound = "sounds/YamahaRX21/TomL.wma";
clapDrumSound = "sounds/YamahaRX21/Clap.wma";
clapPad.msgDrumType.Text = "Clap";
crashDrumSound = "sounds/YamahaRX21/Crash.wma";
break;

As described in my previous drumpad post, due to problems with repeating audio clips, I elected to insert a media element each time a key is pressed. Because of this, it was easy to utilize the string variables defined above to make a quick change to the source property of the media element before inserting it into the application:

_mediaElement.Source = new Uri(snareDrumSound, UriKind.Relative);

In the case of the "80's Drum Kit", there is a cowbell sound instead of the clapping sound attached to the drumpad triggered with the "D" key. When this kit is selected, the label on the appropriate pad is also updated. You can see the text property being changed in the statement shown above, and when the 80's kit is selected, the label is updated right after the new sound file is assigned. Here's what that looks like:

clapDrumSound = "sounds/80s/Cowbell.wma";
clapPad.msgDrumType.Text = "Cowbell";

Another big change is the addition of backing tracks to which you can play along. For these, I initially figured I'd use a loop-based program (Sony ACID Studio 7.0) to create some tracks, but given time constraints, I instead elected to use the software to render out MIDI files I found online. The upside is that it's a big time saver, and it's very easy to pull out the drum tracks before rendering the file to a .wma for use in the app. The downside is, they don't always sound so great.

The drum sound effects are all fairly compact - ranging from 15-40K a piece. There's a couple that are bigger, but the majority are small. The backing tracks are fairly heavily compressed, but the songs still average around 1MB a piece. This made the app a little bigger than I had hoped, but I like having the sounds all there "on demand".

The other change that happens under the covers is the cleaning mechanism. As I described previously, the sounds are added to a special container canvas on the fly as keys are pressed. I set a cleaning threshold, then run a method to remove the old media elements from the container when it reaches a certain size. This worked, but it would cause some hesitation in the sounds from time to time, because it would clean out the entire containing canvas, meaning the sound that was playing, too. I changed this so that the threshold is much lower (8 nodes), but the cleaner only pulls out the bottom 4, so it will typically not touch the sound that is currently playing. This turns out to be much smoother and cleaner, as well as doing its job a little more quickly.

The final app can be seen here.

This entry was posted on Monday, April 7th, 2008 at 5:59 am and is filed under Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.