Dropbox Audio Stream Embed Solution for WordPress

While Dropbox started making the headlines earlier this week thanks to their Space Race campaign, there are some other interesting things you may like to know about this cloud storage service. For example, how to make the best use of your audio material stored on Dropbox.

Not long ago we received an interesting request from the folks at the Emmanuel Institute in Pullman, MI who were looking for a way to harness their Dropbox for Teams subscription to its full potential. Having all of their website material stored in the cloud it was necessary to have it integrated in their premium WordPress theme and in addition they were particularly interested in streaming their audio materials to make them easily available to their visitors. The only problem was the WordPress theme they purchased didn’t provide a solution to stream the audio content hosted on their Dropbox. In fact, no WordPress theme can do that unless you tweak it. And here’s how we’ve done that.

Dropbox Integration with WordPress

The Emmanuel Institute material includes text, audio, and video content files, most of which were stored in their Dropbox account. In order to make them accessible for downloading and embedding we first had them moved in the public folder. This was especially important for the audio and text files, since the video files were already uploaded to our client’s Vimeo Pro account. In fact, at one point they were considering to use Vimeo as a solution for streaming audio files. Since Vimeo was considered the best video embed option available, we made things a little simpler. For this task we implemented a custom field for our client to use by simply pasting the video’s URL code without having to worry about adjusting the embed code to the theme each time a new video is added.

The same custom fields were used to to facilitate Dropbox hosted files downloads for visitors, while labeling fields were
implemented for website editors to choose what type of format should be displayed for various files.

Initially books and leaflets were regarded as reading material, but eventually it became clear that due to different file types and formats the labeling system should be more flexible. In addition to the download link field we also implemented: the book type field and the alternative book label field which allows editors to change the resource name from Book to anything else that will suit their needs. In this example the ZIP file was labeled as Download.

This is a great solution not only because of Dropbox’s performance reliability, but also its collaboration options when using Dropbox for Teams together with WordPress.

Dropbox Audio Stream Embed for WordPress

While we used the same custom fields to create an interface for our client to insert the audio file Dropbox link, the real magic happens behind the scenes. Once we had the editor’s embed interface implemented we had to find an audio player that can play audio files from an external URL and be flexible enough to integrate in our client’s WordPress theme. Following the research and testing phase we narrowed down the audio player list to three options and eventually chose a stable minimalist HTML5-based audio player plugin that did not crash during our tests, but which needed extensive styling work for the website theme integration. We also had to adapt the audio player functionalities and bypass the short-code embed system provided by the default plugin version. The result can be found on the
Emmanuel Institute website.

The design and implementation of this Dropbox audio streaming component works great and allows us to easily manage streaming content on our WordPress website. Our organization can’t be happier with the way Dream Production has harnessed this excellent tool to be used on our website.

Shane Hochstetler, Emmanuel Institute of Evangelism.

 

WordPress Customization Tip

In case you’re looking to have a similar solution implemented on your own WordPress website we suggest you resist the temptation to alter the default plugins in any way and seek professional advice instead. An improper plugin customization might work for a while, but will most likely give you headaches as soon as the default plugin gets an update. In case you need a similar solution for your website, or an altogether different custom WordPress solution, don’t hesitate to drop a line and tell us more about it.