The Human Element Blog

Magento & jPlayer: Play Nice Together!

Posted Feb 06, 2012 by

blog-jplayer-3

Have you ever wanted to play media samples on Magento product pages that are manageable directly through the product admin? Well, by default, Magento will use the built-in browser functionality to play media samples that open in a separate window. But this is not always an elegant solution, and now, with new versions of FireFox not supporting MP3 in the HTML5 audio tag, we need a better solution.

Read more on this issue:

Mozilla defends Firefox’s HTML5 support for only Ogg Theora video

Enter jPlayer, a “completely free and open source (GPL/MIT) media library written in JavaScript.” The jPlayer jQuery plugin “allows you to rapidly weave cross platform audio and video into your web pages.” (Chek out jPlayer.org) And not only is the support forum maintained by an excellent staff, but this baby is easy to install and get running quickly on your site.

Can you say awesome?

What I would like to discuss in this article is one implementation of jPlayer with Magento. The goal of the implementation was to be able to play samples of downloadable MP3s within a player on the product page. I did some research on Magento extensions to do this before I thought about implementing jPlayer, but what I found was that the extensions weren’t necessarily going to do what I wanted them to, or they were expensive and this was intended to be a low-budget task.

In the end I decided on jPlayer because I wanted it to have the support for multiple filetypes and media formats. That is, if we decided to use some video later on it would be supported with the same plugin. (Plus, it was free and only required a bit of development to get going.)

Here are a couple extensions I looked at before I decided on using jPlayer.

MageWorld MP3 Player

Desv.us MP3 Player

Now let’s take a look at the implementation.

First, I had to make sure that my site is using jQuery and I downloaded, installed, and included the jPlayer correctly. Here is the installation location of jQuery/jPlayer and the entries in my page.xml

 

blog-jplayer-1
<action method="addItem"><type>skin_js</type><name>js/jquery.1.6.2.min.js</name><params></params></action>

<action method="addItem"><type>skin_js</type><name>js/jQuery.jPlayer.2.1.0/jquery.jplayer.js</name><params></params></action>

<action method="addItem"><type>skin_js</type><name>js/jQuery.jPlayer.2.1.0/add-on/jplayer.playlist.js</name><params></params></action>

<action method="addItem"><type>skin_js</type><name>js/jQuery.jPlayer.2.1.0/add-on/jquery.jplayer.inspector.js</name><params></params></action>

The next step was looking at how the samples are rendered on the product page. One of the goals was to use jQuery on the page without any sort of admin areas. So if there are MP3 samples loaded into the product, jQuery will sniff them out and manipulate the DOM to create a JSON playlist from the samples, generate the player HTML, and finally load the playlist into the player and display it on the page.

Breaking it apart into steps looks like this:

Step 1: Use a jQuery selector to detect if there are samples in the product

This is the first part of the script that finds the MP3 and creates the JSON we will use for the playlist.


1.<script>
2.var $_ = jQuery.noConflict();
3.$_(document).ready(function(){
4.// Create an empty variable for the playlist
5.var playlistJson = "";
6.// Create a selector to find sample MP3s
7.var selector = $_("dl.item-options dd a");
8.// Count the number of items and store the total
9.var lastIndex = $_("dl.item-options dd").length;
10.// Create a variable to reset the count
11.var count;
12.// Use my selector to create a loop through the MP3s
13.selector.each(function(){
14.// Make the count specific to this instance
15.count = selector.index(this);
16.// Set media, title, and artist for use in the JSON
17.media = $_(this).prop("href");
18.title = $_(this).text();
19.artist = $_(this).prop("title");
20.// Begin to create the playlist JSON.
21.// If it is the first item create the initial bracket.
22.// For each additional item use are variable to form the JSON
23.if (count == 0){playlistJson += "["; }
24.if (count != (lastIndex - 1)){ playlistJson += '{title:"'+title+'",artist:"'+artist+'",mp3:"'+media+'"},'; }
25.else { playlistJson += '{title:"'+title+'",artist:"'+artist+'",mp3:"'+media+'"}]';}
26.});
27.});
28.</script>

Step 2: Create a variable to hold the MP3 player html

If you go to jPlayer.org you can view the source on the page to grab the HTML, basically the concept is to set up the HTML in the javascript so that we do not have to include the MP3 player in the template.

We can choose to add it in only if samples are available.

Along these lines:


1. <script>
2. var mp3Player = "";
3. mp3Player += "<div id='jquery_jplayer_1' class='jp-jplayer'></div>";
4. mp3Player += "<div id='jp_container_1' class='jp-audio'>";
5. mp3Player += "<div class='jp-type-playlist'>";
6. mp3Player += "<div class='jp-gui jp-interface'>";
7. // Here we check to see if there are options and then load our HTML into the conatiner
8. if($_(".catalog-product-view .item-options").length > 0){
9. $_(".catalog-product-view .item-options").html(mp3Player);
10. }
11. </script>

Step 3: Initiate the jPlayer, Create a Playlist Object, Evaluate our JSON, and finally load it up.

This is the final step and really is pretty standard operating procedure for the playlist.


1.<script>
2.// Tell jPlayer what the ID of our container is for the player
3.var cssSelector = {jPlayer: "#jquery_jplayer_1", cssSelectorAncestor: "#jp_container_1"};
4.// Create an empty playlist variable
5.var playlist = "";
6.// Setup our playlist options.
7.// The only tricky part about this section is the swfPath.
8.// The swf path is an absolute path from the document root, not relative to the js folder.
9.var options = {playlistOptions: { autoplay: true, enableRemoveControls: false }, swfPath: "/skin/frontend/oddfellow/f001/js/jQuery.jPlayer.2.1.0", supplied: "mp3"};
10.// Create a new jPlayer playlist object
11.var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
12.// The JSON we created needs to be evaluated as JSON instead of looking at it as a text string
13.var myObject = eval(playlistJson);
14.// Set the playlist equal to our JSON of MP3s
15.playlist = myObject;
16.// Load it all up
17.myPlaylist.setPlaylist(playlist);
18.</script>

Now if we take a look at a product page that has sample MP3s you should see the jPlayer load up the tracks. That’s it! We successfully implemented a version of jPlayer on the Magento product page for local Ann Arbor record label Oddfellow Music, which loads a sample MP3 into the player. Awesome!

blog-jplayer-2

As I mentioned before, there are many ways to implement the jPlayer and this is just one version. I hope this helps anyone looking to use jPlayer as a method to play Magento MP3 Samples! As always, if you have any questions or issues, post a comment and I’ll try to help you out!

Happy Coding,

Danny2The Office Minstrel

Tags: Magento

Posted By

Senior Software Engineer

go

Magento

  • support
  • -replatform
  • -enterprise

We have all of the solutions for all of your Magento needs

Comments (8)

Mike Lorenz posted

Web site creation So as a novice programmer I can duplicate this code and insert my own MP3 play web site?

Leon posted

Great tutorial Can this code be downloaded? as I need this feature on my Magento site? What version of Magento will this work on?

    Paul posted

    Community 1.6 Hey Leon, You can download the jPlayer from jplayer.org. The rest of the code is not available in a download package, but you should be able to copy and paste into a js file outlined in the structure above. I used community 1.6 to install this but it should work with versions of Enterprise and Community without any major changes.

Ravi Choudhary posted

Regarding mp3 player adding Hi Paul, Its very nice tutorial, Thanks a lot for sharing. Please alsso add the following lines to this. skin_csscss/blue.monday/jplayer.blue.monday.css and for adding mp3 product must be a downloadable products and you can add mp3 file in sample section of that. If you want to add this player in to sample products then do this add this HTML of your product descriptions

Samples
Annie May
County Line
Thanks Again! Happy Coding. Regards Ravi

Matt posted

Adding Audio Samples to non-downloadable products Awesome post! This seems to be ALMOST exactly what I'm looking for... We sell MP3s and CDs on our site, and I am looking for a method to add audio samples to downloadable and non-downloadable products alike. As I understand it, this method requires the audio sample to be uploaded through Magento, is this correct? Magento doesn't seem to offer a method for uploading samples to non-downloadable products. Can you recommend any solutions to this problem? I'm self-taught and have very little coding experience... but I'm a quick learner and can follow clear steps. Thanks very much, people like you have helped me through countless scrapes! Spread the info friend! _____________ Magento 1.6

pbriscoe posted

Maybe try a custom option Hi Matt, If you have a simple product you might be able to add a Product Attribute that store the URL linking to your sample. To give it a shot you would go to Catalog->Attributes->Manage Attributes. Create a new attribute as a text field, create a label, make it "Visible on Product View Page on Front-end" = "Yes". Also set the attribute option that allows HTML. Next go to Catalog->Attributes->Manage Attribute Set. Click on Default or whichever attribute set you want to add this product to. On the next page, nn the right column you should see the new attribute you created. Drag it into the 'General' folder and save the attribute set. Now, when you go to Catalog->Manage Products and get to the product edit screen you should see a field to enter in a custom value. Put the url to your sample here. It will help to wrap it in an

  • tag like:
  • Title of Sample
  • Now, assuming everything went well, when you navigate to this product page on the frontend you should see that URL stored in the "Additional Information" section inside of an
  • tag. Inspect the element to verify. Now you would want to modify the selector from the example above. var selector = $_("dl.item-options dd a"); become var selector = $_(".audio-sample"); You will want to change this in all the relevant spots. Try it out with this approach and see what you get. If you want to post a link to your sample site I can try and take a look at your progress. Good luck! Paul

  • jdf posted

    help please How do I make the player show up where it needs to go. I mean I have done everything in this tutorial... including making the sample.js file which took me a while to figure out because you have '' surrounding each of the samples above which confused me. I get no console errors so everything seems to be where it needs to go... all the script urls are working... the swf path is correct. And now that I have all that plugged in nothing happens. From what your tutorial says, once I drop all this in it will work.. bam!! But, I get none of this magic. How do I get it to show up on the page?! I'm using the template: Hellowired

    Geovane Fedrecheski posted

    Worked for me! Thank you very much, your solution is very well explained and worked absolutely fine for me! (sorry for my english)

    Post a comment