Drupal: using 'Node displays' and 'Display Suite' to present audio in HTML 5 format

If you want to present video in HTML5 format in Drupal, the Video for Everybody! module works very well. For audio, you could also use Video for Everybody! but the dimensions of the player hardcodes a poster image and does not hide the video portion of the player. An 'Audio for Everybody' module could be written, but an alternative approach is to use Node Displays and Display Suite to create a 'HTML5 Audio field'. The advantages of this approach:

• 'HTML5 Audio' can be added to any content type
• Easy to tweak the code.

Installation

Required Drupal modules

• Node Displays
• Display Suite
• FileField Sources (highly recommended for managing the upload of large files)

Install JW Player version 4 into /sites/all/libraries/jw-player/4/ so that the path to player.swf is /sites/all/libraries/jw-player/4/player.swf.

Add the MIME types below to your web server. The lines below are from the .htaccess file.

AddType audio/mp4 .mp4
AddType audio/ogg .ogg
AddType audio/ogg .oga 

Custom Content Type

Create a custom Node Type called 'Interview' and add two file fields:

1. MP4 audio 
   • Label: MP4 audio
   • Field name: field_audio_mp4 
   • Widget type: File upload
   • Permitted upload file extensions: mp4, m4v
   • Path settings > File path: audio
   • File sources, enable all: 
     • IMCE file browser
     • Remote URL textfield
     • Autocomplete reference textfield
     • File attach from server directory 
2. OGG audio 
   • Label: OGG audio
   • Field name: field_audio_ogg
   • Widget type: File upload
   • Permitted upload file extensions: ogg, oga
   • Path settings > File path: audio
   • File sources, enable all: 
     • IMCE file browser
     • Remote URL textfield
     • Autocomplete reference textfield
     • File attach from server directory 

Create a Display Suite field

1. Go to Site configuration > Display suite > Node display > Fields
2. Under the 'Add new code field' section
   • Field key: html5_audio
   • Field title: HTML5 Audio
   • Field exclude: select all the node types that you don't want the audio fields to appear in - i.e. leave your audio node type unselected.
   • Toggle this checkbox if you are using tokens in this field: checked 
   • Field code: 

     <audio width="640" height="20" controls>
     <source src="[field_audio_mp4-filefield-fileurl]" type="audio/mp4" />
     <source src="[field_audio_ogg-filefield-fileurl]" type="audio/ogg" /><!--[if gt IE 6]>
         <object width="640" height="360" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
         [endif]--><!--[if !IE]><!-->
         <object width="640" height="20" type="audio/quicktime" data="[field_audio_mp4-filefield-fileurl]">
         <!--<![endif]-->
         <param name="src" value="[field_audio_mp4-filefield-fileurl]" />
         <param name="showlogo" value="false" />
         <object width="640" height="20" type="application/x-shockwave-flash"
     	data="/sites/all/libraries/jw-player/4/player.swf?file=[field_audio_mp4-filefield-fileurl]">
         	<param name="movie" value="/sites/all/libraries/jw-player/4/player.swf?file=[field_audio_mp4-filefield-fileurl]" />
         </object><!--[if gt IE 6]><!--></object><!--<![endif]-->
     </audio>
     

Customise the Display Suite layout for the Interview content type

1. Go to Site building > Display suite > Layout > Interview > Full node
2. Under the 'Disabled' section locate 'HTML5 Audio' and drag it into one of the regions (Left, Middle Right or Footer).
3. Click Save.

View and test

View an Interview node. You should see the appropriate HTML5 player controls.

MP3 Audio

An alternative approach is to use mp3 files. To do this just substitute 'mp4' with 'mp3'. So the best cross-browser combinations are mp4 + ogg or mp3 + ogg.

Video

Note that the this approach can be used for HTML5 video as well. You just have to add another custom field for the Poster field, and modify the Field code. Let me know how this goes for you.

Further reading

HTML5 Doctor: Native Audio in the browser

Dive into HTML5: Video on the Web