|
...Rockin’ to the Music with HTML 5 and Flash
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
skin_jsjs/jquery.1.6.2.min.js
skin_jsjs/jQuery.jPlayer.2.1.0/jquery.jplayer.js
skin_jsjs/jQuery.jPlayer.2.1.0/add-on/jplayer.playlist.js
skin_jsjs/jQuery.jPlayer.2.1.0/add-on/jquery.jplayer.inspector.js
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.
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:
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.
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!
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,
The Office Minstrel
|
|