×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

I’m working on a little sample application for music management in Silverlight using WCF RIA Services and some other new Silverlight 4 features.  One thing that I wanted to add to the application was the ability to drag an audio file and either lookup the data and/or add a new album/artist/song to the library automatically.

Audio formats have a ‘tag’ format known as ID3.  It’s a format used for audio file metadata that is used in Windows Media Player, iTunes, and various hardware devices as well.  Over the years there has been an evolution of this format, with the older ID3v1 format basically taking up a header space with fixed character spaces for various things like Album, Artist, Title, Year, Track.  Over time though the ID3v2 format has been adapted more as it is more flexible for things like album art, and longer titles, etc.  There are various implementations of ID3 libraries for .NET that developers can choose from.  All of these implementations don’t take into account Silverlight unfortunately.

Silverlight can only reference Silverlight-compatible libraries.  Most of these libraries were targeted for the full .NET Framework and thus I can’t binary reference them.  Luckily most of them (except one) are Open Source so I could tinker.  I took the step of simply copying the files to a Silverlight project and recompiling.  This did not work 100% in a single task.  Most of the libraries had some form of Serialization attributes/constructors and almost all used some form of ASCII encoding for various string manipulation of byte arrays.

I settled on TagLib# as the library that was the easiest to modify for me.  I had to make the same changes I mentioned above to this library as well.  I created a new Silverlight 4 class library and compiled it as such.  One thing that TagLib# didn’t have was a stream input implementation.  Most of the libraries, in fact, assumed a local file path.  Luckily the library was written using a generic ‘File’ interface, so I just had to create my own StreamFileAbstraction.  I chose to do this within my project rather than the base library.  It was easy since the LocalFileAbstraction actually perfomed an Open on the file as it’s first task and set some public variables.  My abstraction basically just hands the stream already and ready to go.

Now, using the Silverlight 4 drop target feature, I created just a simple test harness to test my theory.  My XAML basically is this (pretty rudimentary just to test my theory):

   1: <Grid x:Name="LayoutRoot" Background="White">
   2:         <StackPanel>
   3:             <Border x:Name="DropZone" Width="700" Height="300" Background="Silver" CornerRadius="8" AllowDrop="True" Drop="DropZone_Drop">
   4:                 <TextBlock TextWrapping="Wrap" Text="drop here" FontSize="64" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Gray"/>
   5:             </Border>
   6:             <Grid Height="255" Width="700">
   7:                 <Grid.ColumnDefinitions>
   8:                     <ColumnDefinition Width="111"/>
   9:                     <ColumnDefinition Width="*"/>
  10:                 </Grid.ColumnDefinitions>
  11:                 <Grid.RowDefinitions>
  12:                     <RowDefinition Height="Auto"/>
  13:                     <RowDefinition Height="Auto"/>
  14:                     <RowDefinition Height="Auto"/>
  15:                     <RowDefinition Height="Auto" />
  16:                     <RowDefinition Height="50*" />
  17:                 </Grid.RowDefinitions>
  18:                 <dataInput:Label Content="Artist" HorizontalAlignment="Right" VerticalAlignment="Top" FontWeight="Bold" Margin="4" />
  19:                 <dataInput:Label Content="Album" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top" FontWeight="Bold" Margin="4" />
  20:                 <dataInput:Label Content="Title" Grid.Row="2" HorizontalAlignment="Right" VerticalAlignment="Top" FontWeight="Bold" Margin="4" />
  21:                 <dataInput:Label Grid.Column="1" HorizontalAlignment="Left" Name="Artist" Margin="4" />
  22:                 <dataInput:Label Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" Name="Album" Margin="4" />
  23:                 <dataInput:Label Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top" Name="Title" Margin="4" />
  24:                 <Image Grid.Column="1" Grid.Row="4" Height="118" HorizontalAlignment="Left" Margin="4,2,0,0" Name="AlbumArt" Stretch="Fill" VerticalAlignment="Top" Width="118" />
  25:             </Grid>
  26:         </StackPanel>
  27:     </Grid>

Notice on the Border the AllowDrop=”True” attribute.  This tells Silverlight that the element can be used as a drop target (for a file from the file system).  The rendered UI looks like this:

Sample MP3 test UI

You may also notice the Drop attribute on the Border element that maps to the event handler DropZone_Drop.  This event handler basically gives us an event argument that represents the dropped objects on the surface (yes you can drop more than one).  The initial stub of this function looks like this:

   1: private void DropZone_Drop(object sender, DragEventArgs e)
   2: {
   3:     IDataObject drop = e.Data as IDataObject;
   4:  
   5:     object data = drop.GetData(DataFormats.FileDrop);
   6:  
   7:     FileInfo[] files = data as FileInfo[];
   8:  
   9:     FileInfo file = files[0];
  10: }

I’m being a little verbose in the code to show each of the steps.  As you can see you get a FileInfo array and can pull items out of that.  For my sample I’m just assuming one item was dropped.  In the next steps I just need to get the Stream from the file and use my library.  Here is the full function (with a quick check to make sure it is a supported audio file):

   1: private void DropZone_Drop(object sender, DragEventArgs e)
   2: {
   3:     IDataObject drop = e.Data as IDataObject;
   4:  
   5:     object data = drop.GetData(DataFormats.FileDrop);
   6:  
   7:     FileInfo[] files = data as FileInfo[];
   8:  
   9:     FileInfo file = files[0];
  10:  
  11:     if (file.Extension.ToLower() != ".mp3" && file.Extension.ToLower() != ".wma")
  12:     {
  13:         MessageBox.Show("Must be an MP3 file");
  14:     }
  15:     else
  16:     {
  17:         Stream fileStream = file.OpenRead();
  18:  
  19:         TagLib.File.IFileAbstraction fileAbstraction = new StreamFileAbstraction(fileStream, file.Name);
  20:  
  21:         TagLib.File tagFile = TagLib.File.Create(fileAbstraction);
  22:  
  23:         if (tagFile.Tag.TagTypes.HasFlag(TagLib.TagTypes.Id3v2))
  24:         {
  25:             Artist.Content = tagFile.Tag.FirstAlbumArtist;
  26:             Album.Content = string.IsNullOrEmpty(tagFile.Tag.Album) ? "NO ALBUM NAME" : tagFile.Tag.Album;
  27:             Title.Content = tagFile.Tag.Title;
  28:             if (tagFile.Tag.Pictures.Length > 0)
  29:             {
  30:                 IPicture pic = tagFile.Tag.Pictures[0];
  31:                 MemoryStream img = new MemoryStream(pic.Data.Data);
  32:                 BitmapImage bmp = new BitmapImage();
  33:                 bmp.SetSource(img);
  34:  
  35:                 AlbumArt.Source = bmp;
  36:             }
  37:         }
  38:         else
  39:         {
  40:             MessageBox.Show("no id3v2 tag");
  41:         }
  42:     }

Once all the pieces are together you drag an audio file on the drop surface and the items will populate.  Here’s a quick video showing how it all works together.

Get Microsoft Silverlight

So this is just a start – and I’ve got only the tag reading working…didn’t bother looking at the other parts of the library so I know it isn’t fully ported for Silverlight.

What do you think?  Found a better implementation of ID3 tag reading?




This work is licensed under a Creative Commons Attribution By license.


1/30/2010 4:02 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
Nice post, very helpful! especially your work on selecting a decent ID3 lib ;)
1/30/2010 5:41 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
This is great. Thanks Tim!
1/31/2010 4:02 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
That's a good thing, Tim..
1/31/2010 11:46 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Hi Tim, great post.

I've also played around with Drag'n'Drop in Silverlight 4. One big thing I've missed are the "DragDropEffects".

Your check:
if (file.Extension.ToLower() != ".mp3" && file.Extension.ToLower() != ".wma")

12: {

13: MessageBox.Show("Must be an MP3 file");

14: }

should be in a DragEnter-Event and set the Effects to None. Do you know if such possibilities will be added to the final of Silverlight 4?
2/1/2010 2:07 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
It's possible to download your code ?
2/2/2010 6:35 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Same as Steo. I am faced with similar scenario. Is it possible to get you customization of the TagLib# library? Can it be downloaded somewhere?

Thanks
6/10/2010 1:36 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Hi,
is there any chance you could explain how you did that StreamFileAbstraction?
Im stuck at the point where the taglib cant open my mp3 file when I just declare the path of the file as a property (TagLib.File.Create("mp3File.mp3")) Also does not work if the file is in the ClientBin. Thank you very much.

John
9/10/2010 3:59 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Silverlight provides a retained mode graphics system similar to Windows Presentation Foundation, and integrates multimedia, graphics, animations and interactivity into a single runtime environment. In Silverlight applications, user interfaces are declared in Extensible Application Markup Language and programmed using a subset of the .NET Framework. XAML can be used for marking up the vector graphics and animations. Silverlight can also be used to create Windows Sidebar gadgets for Windows Vista.seo india - Get good SEO services from SEO company in India,USA,UK. If you need SEO services, organic SEO & managed search engine marketing call us +91.8013242527
Gravatar
11/29/2010 3:19 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
I am currently learning to use silverlight. Thanks, this surely is a great help.
Financial Articles
12/16/2010 12:33 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
The James Bond reference actually comes from Austin Powers, I believe. Which I suppose does indirectly relate it to James Bond… Sample Analyst Resume

1/7/2011 10:11 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
The internet world is constantly revolving. When we thought we already figured something out, then something will chang nose huggie and make nose smaller
1/19/2011 10:01 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Highly Recommended which you Post here.
Good Points you wrote in very good summarize way.
Great Show It Was. I want to more and more from you so i will come back soon very often.
breast augmentation miami

1/28/2011 2:12 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
thanks for this post !
David of vitre teinté
2/4/2011 5:13 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Wonderful post, thanks for putting this together! This is obviously one great post. Thanks for the valuable information and insights you have so provided here.
Divorce Attorney Jacksonville
2/13/2011 11:25 PM | # 
Simply desire to say your article is as amazing. The subject buy lyrica clearness in your post is just great and i can assume you're an expert on this. Fine with me your permission to allow your grave RSS feed to keep updated with forthcoming post Thanks a million and please carry on the work rewarding.
Gravatar
2/15/2011 12:18 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
Great application, I hope one day I can learn to make something out of this. Gold Nuggets
2/17/2011 6:09 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Im glad to have found this post as its such an interesting one drugstore.com! I am always on the lookout for quality posts and articles so i suppose im lucky to have found this! I hope you will be adding more in the future…
2/23/2011 8:50 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
This is a good post. This post gives truly quality information. I’m definitely going to look into it. Really very useful tips are provided here. thank you so much. Keep up the good works.
iphone casinos
3/3/2011 11:42 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Thanks for the amazing article here. I was searching for something like that for quite a long time and at last I have found it here. Your blog is better than others because of useful and meaningful posts. Keep posting them in the future too, I will be waiting for that!
san diego printers
3/8/2011 11:16 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
This post shows the information which is close to standard. Hope next You will again post a nice Article/Information.
chimney chicago janitorial services

3/12/2011 2:58 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
I stiff at near corroborate up subvene to your blog uncountable times. The added articles are incredibly captivating and interesting. I unswerving to signup in compensation your rss nurture, so I can innervate advised of your remodelled editorials.Cheap Hotels and Apartments
3/22/2011 1:06 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
I presume 120 cod tablet tramadol has got a lot going for it. I've located this secret. There are a hundred ways to talk respecting blood pressure medicine and tramadol reactions, but I thought I'd mention it to give you a frame of reference.ottawa computer repair
3/31/2011 10:17 AM | # info
i like it this is very importent information
wholesale mortgage lenders
4/1/2011 7:40 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.
Interesting post and thanks for sharing. Some things in here I have not thought about before.Thanks for making such a cool post which is really very well written.will be referring a lot of friends about this.Keep blogging
Local Stories
Gravatar
4/24/2011 10:41 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
This is something people need to know about. Your blog is really incredible and the design is really top notch. Really, your blog is incredible. Keep going, man. Keep going!
Austin Houses for Sale
5/15/2011 6:25 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
This is my first comment here so I just wanted to give a quick shout out and tell you I really enjoy reading your articles cedar park real estate :: Leander Roofing Company
6/12/2011 10:19 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
this was a really very intresting article. i m glad that u shared this. i m really impressed with this information.
jeux de mario
Juegos de Ben 10

6/22/2011 3:01 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
I always follow all your news but this one I have missed. It is really a new fact for me about Trojans and I will definitely try to find more publications about her. Well, I have to admit that she is really a beautiful woman and personally I think that she is very similar like Alexis Texas! Look at her. Anyway thanks a lot for sharing these wonderful new.
Austin Home Rentals
Real Estate Austin TX
Juegos de Bob Esponja
jeux de football
7/1/2011 2:36 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Thanks for informative and helpful post, obviously in your blog everything is good.If you post informative comments on blogs there is always the chance that actual humans will click through. Beleuchtung für Renault
7/2/2011 3:05 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
Finally, an issue that I am passionate about. I have looked for information of this calibre for the last several hours. Your site is greatly appreciated.model train layouts
7/19/2011 10:53 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
good Thank you for this very interesting article. Keep up the good work. opskrifter
mobiltelefoner uden abonnement
billige lån hurtigt


7/26/2011 9:31 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
This one is very nicely written and it contains many useful facts. I am happy to find your distinguished way of writing the post. Now you make it easy for me to understand and implement. Thanks for sharing with us.shark vac then steam mop
8/13/2011 1:35 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
Thanks for the marvelous posting ! I definitely enjoyed reading it, you might be a great author.I will make sure to bookmark your blog and will often come back later in life. Access Panels

8/14/2011 9:29 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Well this is very interesting indeed. Would love to read a little more of this. Great post. Thanks for the heads-up. This blog was very informative and knowledgeable.Band name protection and promotion
9/2/2011 4:37 PM | # How To Get A Flat Stomach In Week
How To Get A Flat Stomach In WeekI like very much your blog, the account information that is very modern and interesting.
9/5/2011 6:02 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Well this is very interesting indeed. Would love to read a little more of this. Great post. Thanks for the heads-up. This blog was very informative and knowledgeable.credit repair companies los angeles
9/13/2011 8:55 AM | # Kerrville Real Estate
Kerrville Real Estate
Round Rock real estate
Really amaze to read this nice and very simple to teach post.
9/17/2011 3:35 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Thanks for sharing the method of Reading MP3 metadata with Silverlight and drag-drop with the computer program.Otithi@childminding courses in US.
9/23/2011 11:16 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
your blog very much because it has very helpful articles on various topics like different culture and the latest news. reputation management
7/21/2012 2:47 AM | # Flower
I should tell you that your blog articles and other content is extremely great. It truly is not simple to retain this kind of top quality in the webpage. Keep up the good .Cheers and thanks for posting something worth readings.
florists new jersey
5/25/2013 9:26 AM | # re: Reading MP3 metadata with Silverlight and drag-drop
Good one.

Can you pass the taglib-sharp.dll which you used in silverlight application ? Coz the default dll, cannot be added to silverlight apps.

5/30/2013 1:31 PM | # re: Reading MP3 metadata with Silverlight and drag-drop
Hi MusicMan,

Can you send it to me?

 
Please add 7 and 2 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.