Embed an MP3 Player in Community Server Posts

2007-01-30 | Community Server CarKnee Bundle

A member on the Community Server forums asked about embedding an MP3 player in his blog posts and I thought this would be a great addition to the bundle!

To implement this we are going to create a basic CSModule that works off of the PreRenderPost event. In our module we will try to match text that looks like this 

[mp3]*Some Uri*[/mp3]

and turn it into a Flash MP3 Player pointing to the specified Uri.

Our code is very simple and looks like this:

Post post = content as Post;  
if ((post != null) && (e.Target == PostTarget.Web))  
{  
  Match Mp3Match = Regex.Match(post.FormattedBody, @"\[mp3\](.*?)\[/mp3\]", RegexOptions.IgnoreCase);  

  if (Mp3Match.Success)  
  {  
    string uri  = Mp3Match.Value;  
    uri = uri.Substring(5, uri.Length - 11);  
    post.FormattedBody = Regex.Replace(post.FormattedBody, @"\[mp3\](.*?)\[/mp3\]", CreatePlayerCode(uri), RegexOptions.IgnoreCase);  
  }                  
}

The MP3 Player I decided to use for this can be found here. 

To use this module all you need to do is insert the following code into your post:

[mp3]http://www.example.com/File.mp3[/mp3]

It will automatically turn your link into a flash based MP3 player as shown here:

[mp3 width=300 height=78]/blogs/files/test.mp3[/mp3]

There is an issue with cross site loading of MP3 files though. If you are linking to a file that resides outside of your domain you will need to have a crossdomain.xml file on the domain you are linking to. This is a security feature built into the Flash Player.

To install this, download the [bundle] and follow the directions in the readme.txt file.

The [cs] module used to show this player has been updated. Please read this post for the updated version. 

Other Posts

Comments

Thanks, the player is great. Everything works fine, except the audio plays at a high speed. The MP3s have a sampling rate of 44 kHz.

We had the opposite problem over at DigitalDjPool.com. From the Flash Players Developer: If you encounter too fast or too slow playback of MP3 files or if your progressbar is messed up, your MP3 files contain variable bitrate encoding. Flash isn't very good at handling these, it's best to stick to constant bitrate encoding. Also make sure to stick to a sampling frequancy that is a multitude of 11.025kHz (48kHz, for example, also poses problems)

I can't thank you enough. I realized that most of my MP3s had a sampling rate of 24 kHz and after changing them to 44.1kHz everything worked fine. The player is just what I have been looking for. It would be cool if you good get the title on the player to be customizable as opposed to defualting to the name of the MP3 file.

I was just looking at the MP3Player.txt file and noticed the url for the flash player. The player on that page is actually different than the one above. Is there anyway to switch players or at the very least hide the fake equalizer (it takes up a lot of space)? I've tried to do this myself, but I've failed miserably.

You can modify the player by editing the xml file in the ~/Utility/MP3/ directory!

i use CS 2.1 (sp2 i think) to get this done. i know this post is a little old but what i have done to play multiple mp3's in a row was 1. upload all my mp3s to a folder on my server 2 open windows media play 3 created a playlist (.wpl) 4 upload playlist to the same folder as mp3s on my server 5 under the video option i added (example http://yourhost.com/playlist1.wpl) to my suprise it worked like a charm. the only bad thing is no one nows whats in the list but me or the person creating the blog. but if you wanted you could make multiple playlist and then list what song is in the playlist on each blog. hope this helps aleast on person out there o this also works if you create a playlist for videos as well