Mike Taulty's Blog
Bits and Bytes from Microsoft UK
Windows 8 Metro style simple music app example

Blogs

Mike Taulty's Blog

Elsewhere

Archives

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)

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.


Posted Tue, Apr 10 2012 9:19 AM by mtaulty

Comments

Biztalk Musings wrote Win8 Music App Dev
on Tue, Apr 10 2012 2:30 PM

Win8 Music App Dev

Mike M wrote re: Windows 8 Metro style simple music app example
on Tue, Apr 10 2012 6:43 PM

I've always enjoyed your tutorials. You have a knack for explaining yourself very well. Thanks for sharing!

Philip wrote re: Windows 8 Metro style simple music app example
on Wed, Apr 11 2012 11:37 AM

Great tutorial!

I like also that you show making mistakes ...

André Krämer wrote re: Windows 8 Metro style simple music app example
on Thu, Apr 12 2012 9:20 PM

Great stuff!

I watched the first two videos so far and really liked them.

Rainsurte. wrote re: Windows 8 Metro style simple music app example
on Mon, Apr 16 2012 1:45 AM

where is sample file????

Rainsurte. wrote re: Windows 8 Metro style simple music app example
on Mon, Apr 16 2012 1:50 AM

where is sample file?????????

how can i download it???

mtaulty wrote re: Windows 8 Metro style simple music app example
on Mon, Apr 16 2012 9:13 PM

Rainsurte,

What sample file? I don't remember promising anybody a sample file :-)

Mike.

Microsoft UK Faculty Connection wrote Windows 8 Versions Announced
on Tue, Apr 17 2012 7:25 AM

As your aware from the Building Windows 8 blog a key driver for Microsoft is that All editions of Windows

genefer wrote re: Windows 8 Metro style simple music app example
on Tue, Apr 17 2012 9:59 AM

cool demonstration! eventhough HTML5 audio player might not pack all of the features it works well..

it let’s iOS folk hear the mp3, tho the player will launch in a new webpage; and to return to your original page,

<a href="http://html5socket.com">html5 music player</a>

MSDN UK Team blog wrote Article: Windows 8 Metro style simple music app example
on Wed, Apr 18 2012 8:54 AM

Mike Taulty has created six screencasts around a simplistic Windows 8 metro style app that lets you play

Mike Taulty's Blog wrote Windows 8 Metro Style– Bits of Binding
on Thu, Apr 26 2012 12:08 AM

Data binding is a useful tool in putting an application together and I’ve spent quite a long time with

viji wrote re: Windows 8 Metro style simple music app example
on Thu, Apr 26 2012 9:21 AM

hi its a very good tutorial for metro style apps...

in album page how can i bind the song image..

album page u  r binding song name,duration and bitrate at the same i want to add song image on that page..

mtaulty wrote re: Windows 8 Metro style simple music app example
on Thu, Apr 26 2012 1:38 PM

Viji,

You would bind it the same way as I did for the album image. You can get a thumbnail for each track but it will be the same image for all of them.

Mike.

Viji wrote re: Windows 8 Metro style simple music app example
on Thu, Apr 26 2012 3:33 PM

hi

i tried binding the images as of the album image but no image is getting displayed in the list view of the tracks

can u pls guide me in this

Anonymous wrote re: Windows 8 Metro style simple music app example
on Sat, Apr 28 2012 7:56 AM

Hi Mike, sorry I cannot download the video...  can you kindly help? Thanks.

mtaulty wrote re: Windows 8 Metro style simple music app example
on Sat, Apr 28 2012 4:46 PM

What's the problem with downloading the video?

Mike

genefer wrote re: Windows 8 Metro style simple music app example
on Mon, Apr 30 2012 8:11 AM

Nice post. It would be even better if this site featured stand demos of these features so that users can get a clean look at the code. Please add a demo section containing a working implementation plus an explanation of the code.Buying and taking that plugin and integrating it into WP is really good for beginers .

I would just like to share with everyone,<a href="http://html5socket.com">html5 video player</a>.

serkan wrote re: Windows 8 Metro style simple music app example
on Tue, May 8 2012 11:10 PM

hi mike  ı am very hapy to see your tutorials  ı  hope one day ı meet with you in england

MSDN Bosna i Hercegovina wrote Resursi za Windows 8 Metro Style app razvoj
on Wed, May 16 2012 11:03 AM

Microsoft je još u oktobru prošle godine tokom Build konferencije ponudio veliki broj informacija vezanih za razvoj Windows 8 Metro Style aplikacija, odnosno o novoj generaciji Visual Studio paketa. Korisnici i programeri već sada mogu preuzeti

ian wrote re: Windows 8 Metro style simple music app example
on Mon, Jun 4 2012 10:47 PM

when i load the app, i dont get any images for my albums. no errors either. yet, when i open the albums up in windows media player or VLC, the album artwork appears.

how can i make the artwork appear? is there a way to set thumbnails?

andrew wrote re: Windows 8 Metro style simple music app example
on Wed, Jun 6 2012 10:16 PM

I was following tutorial 6, and did everything you had done up to 7:10 into the video. Yet, my state is not being saved.

I am using the release preview of Win 8 and Visual Studio 12, but everything else in your videos has been working up until now. Do you know any reason why the state isn't being saved.

ian wrote re: Windows 8 Metro style simple music app example
on Wed, Jun 6 2012 10:17 PM

never mind my question, i was able to fix it after a reboot of visual studios