Windows 8 Metro style simple music app example

Posted on by

It was a long weekend here in the UK and it rained a little and so I had a bit of spare time to put together a make-it-up-as-you-go-along screencasts around a simplistic Windows 8 metro style app that lets me play music from albums found in my music library.

I chose to do this in HTML and JavaScript.

As always, I’m not suggesting this is “perfect” or “correct” but I thought it might be useful and along the way it touches on some topics like;

  • using a query against the local storage to get a view of the music collection
  • using a ListView to present both list and grid views of the data
  • playing music with an HTML5 audio tag
  • using Visual Studio and Expression Blend to write the code/set up the basics of the UI
  • allowing music to continue in the background and handling the controls to make sure the user can still pause/play etc. on that music
  • making sure that the app tries to do the right thing to respond to sound level changes such that when another music app comes along, it pauses its playing
  • making sure that the app tries to do the right thing to respond to suspend/resume/terminate on Windows 8 so that it saves state to try and remember what music it was playing.

This ended up as 6 separate screencast videos that I’ve linked to below in order – I’m not sure whether Vimeo is the best means for this or not as my strong recommendation would be to download the videos and then play them at 1.6 to 1.8 times their original speed as it makes my voice less boring Smile

Part 1 (click the Vimeo icon to download the video)

http://vimeo.com/moogaloop.swf?clip_id=40036382&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1&autoplay=0&loop=0

Part 2 (click the Vimeo icon to download the video)

Part 3 (click the Vimeo icon to download the video)

Part 4 (click the Vimeo icon to download the video)

Part 5 (click the Vimeo icon to download the video)

Part 6 (click the Vimeo icon to download the video)

Enjoy. I have some more of these (with a little more structure to them perhaps Smile) which I’m hoping to push to Channel 9 at some point in the coming weeks or, alternatively, I’ll drop them out here if that doesn’t work out.