Audio.php

A lot of the talk about, and the APIs for attachments are centered around images. After all it’s their most common use case by a huge margin. But what about audio?

I won’t pretend this is a comprehensive guide, but considering the lack of basic examples, here’s how to implement a basic audio attachment template.

By default, WordPress will show a link to the audio file, and not much more. Your template will probably attempt to show the image dimensions of your audio file, and fail with a small blank space ( audio files don’t have a height and width ).

Create an audio.php file in your theme, based on an existing attachment.php or single.php. Remove any references to images or image dimensions that may be present, and place the following inside the loop:

View the code on Gist.

This will display the current attachment using a set of html5 audio tags, the result will be similar to this:

HTML5 Audio player in Chrome

Or if you’re using a modern browser here’s a working html5 audio control ( apologies for the rendition ):

One will need to watch for format support of course, the above control is tied to an M4A file using mpeg encoding, so most browsers will work under the premise of it being effectively MP3. Opera and some others on the other hand won’t. For full coverage you will need to upload both MP3/MPEG and OGG Vorbis.

In the future one could go further with this, extracting the time and other meta data into the template, but at a base level, displaying an audio control allows the attachment to be usable without requiring a full download and save of a file.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.