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
Internet Explorer 9: native HTML5
Internet Explorer 6,7,8: Silverlight/Flash
The 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.
The output then for this audio file is simply a small media player within the webpage:
With minimal setup and requirements this module helped me to embed an audio file to playback seamlessly on the website in under 30 minutes!