We were recently asked by a client to build an audio streaming player for their proprietary recordings. What a fun opportunity to use some of the built-in multimedia features of HTML5! The basic audio player for WordPress audio streaming is very simple to code, and even those not familiar with hypertext markup language can understand:
<audio>
<source src=”example.mp3″ type=”audio/mpeg” />
Your browser does not support the audio element.
</audio>
As you can see, the audio file is specified (and the audio file format), as well as a default message to those users still on older browsers that do not support the audio player element. With a little elbow-grease we got this player set up on the client’s WordPress site, linked to the custom posts that they belonged to. But some implementation questions remained:
1. Where would the audio files be hosted? The WordPress media library can certainly store and deliver MP3s and other audio file formats. But these are large files, and serving them over a commercial web hosting package could easily become expensive both in bandwidth and disk storage.
2. How can these audio files be hidden, so that users can’t just download them? As you can see from the code example above, the url of the audio file is completely exposed in the source code. We don’t want to allow users to take these files permanently, but only to stream them temporarily.
Content Delivery Network
We solved the first issue by storing the files on Google Drive, using the client’s G Suite account, so that they could manage their files directly there. This was sufficient for the website’s needs, since the streaming there was sporadic and the audio files themselves were quite long (2-hour long lectures). Had these been small audio files like music tracks, and had there been continuous user demand, this method could have easily become a bottle-neck for the basic Google service, and we would have looked into other content delivery networks, such as Amazon CloudFront.
We utilized an excellent plugin to make this work called Google Drive Embedder for WordPress which when paired with another popular plugin, Google Apps Login, allows you to access your Google Drive account directly from WordPress, and simply choose which files to embed on the page. Easy!
How to Hide Audio Streaming Files
We could assume no one would steal these audio files, and that they would only use the audio streaming player as provided. But if the files are valuable, and if we are a little suspicious about the honesty of the average visitor, it may be worth protecting the location of the audio files. There are a number of methods to obfuscate file names so that the average user cannot simply download the streamable file.
- The audio player could be made invisible, but then the controls would not be accessible, and still any determined user could look at the source code and see the filename.
- Filenames could be encoded (base-64 works well for the common user), but there are many ways to decode this manually and get the real filename.
- A proxy could be developed that translates code into real filenames.
Ultimately for this project we built a PHP decoder that only accepts valid IDs, and additionally uses server variables to verify that the audio request only comes from authorized users on the client website.
If you would like to implement audio streaming software or any other multimedia technologies (like video streaming, live video, animations, etc) on your website, get in touch. We enjoy working with new media and emerging technologies.
