As a last minute request for a client I was asked to embed an MP3 onto a website. Typically I stream mp3 using a QuickTime Server and a special setup. In this case the client had only a single MP3 file to playback on their website.
Doing a little bit of research I came across this great module called MediaElement for Drupal7. This module uses mediaelement.js to provide a consistently themed media player for your multimedia files across all major browsers. The benefits listed on the project page are:
The two big reasons to use the MediaElement library are browser support and consistent theming. The MediaElement library enables browser support for the audio and video tags to the following browsers (and their method for supporting the tag/h.264):
iPhone, iPad: native HTML5
Android: native HTML5
Safari: native HTML5
Chrome: Silverlight/Flash
Internet Explorer 9: native HTML5
Internet Explorer 6,7,8: Silverlight/Flash
Firefox: Silverlight/Flash
Opera: Silverlight/FlashThe second reason is the consistent display of the player. Each of the major browsers has their own display for the video and audio element. MediaElement provides a consistent player that can be themed consistently across all browsers.
The benefit to Drupal is that by using a simple FileField in Drupal you can then configure a custom view_mode to use MediaElement as the display for the piece of media. By default it applies a media player to all multimedia files on the website. This allows me to easily achieve simple MP3 playback from my webpage.
An example configuration screen for my audio clip media element is, it basically only has options to load the javascript files across all pages of your website:
MediaElements Drupal configuration screen.
The output then for this audio file is simply a small media player within the webpage:
Example MediaElements.js player for mp3 file.
With minimal setup and requirements this module helped me to embed an audio file to playback seamlessly on the website in under 30 minutes!
Looking for quality Drupal Web Hosting? Look no further than Arvixe Web Hosting!
