The tools I use with my Microsoft Azure Web App

I wanted to share with you my positive experience with the Microsoft Azure App Service (of which Web Apps, formerly known as Websites, is just one aspect). I also thought it might be of interest to some folks if I give a run-down of the tools I use to create the content on my Web App which is at https://voices.azurewebsites.net/.

If you want to create your own Web App, you'll begin by signing in with your Microsoft Account and creating a free trial subscription. If you're wondering why the submit button doesn't light up and why the credit card section is collapsed, that's because first you have to press the button to validate your Microsoft Account and then enter the security code you'll be sent. Then you can fill in your payment details (which, the site says, will not be used as long as you stick with your free subscription). It's all very quick and easy, and the management portal is very impressive, beautiful, full-featured, and a pleasure to use.

For authoring html and css, I use Microsoft Expression Web 4. You can get a free version here. Grab the ftp details from the Azure portal and plug them into Expression Web and you're ready to author and publish. I find Expression Web very easy and pleasant to use. It has everything I need but if you have ideas for alternatives, please let me know in the comments. That goes for any tool I mention here.

Next comes interactivity. I have just one page with interactive little controls on it, and that's the introductory page to my elements of music section. The controls are rendered with the Silverlight browser plugin, which is arguably anachronistic in this day and age. But it's familiar to me and I know it far better than I know HTML5 (which is barely at all). And I use Visual Studio (and sometimes Blend for Visual Studio) to develop my Silverlight controls. The 3D helix is made of plain old Silverlight Ellipse shapes z-sorted, perspective projected, and rendered back to front. Complicated, but effective. The piano keyboard control uses a MediaStreamSource to generate sample buffers and play them back through a MediaElement.

For images, I typically generate those using my Silverlight controls and then take screenshots. Then I manipulate them in Paint or sometimes in Paint.net. By the way, be careful if you try to download Paint.net: the product's website hosts some clickjacking ads even more prominently than it does its own download link. For that reason I hesitate even to link to it. You can find it very easily, though.

Finally, there's the musical score and the audio files, examples of which you can see on the harmony/suspense page. I use Steinberg Cubase 7.5 to record midi and then use the score editor to make it look just right. I then export it as a png at 100dpi and then just clip it to size in Paint. The audio is recorded in Cubase simply by recording into an audio track while playing back the midi. Then it's exported as an audio mixdown in mp3 format. I use an img element to show the score and an audio element for the mp3.

Building this site has been tremendous fun so far, and I have a lot more content to add to the harmony section before I'm done. And hopefully a lot more recordings.

Let me know what you think!

-Steve