Audio tag security in html5

Question

Long version:

I use html5 audio tag to play mp3 files on my website. With Flash I can stream mp3's and secure it for 95%.

With html5 it is easy to find out the mp3 location and just download it from there. Even if I secure it with unique hashes it is not hard to inspect the network tab in chrome and see the mp3 url with hashes.

I was wondering if there are other ways to secure the mp3 from being ripped and if it is worth the time. For example bandcamp does generate unique hashes but it is still very easy to download the mp3. For youtube you got download websites that can proces the flv stream and rip the audio and save it for the user as mp3 format.

The first layer of security I can think of is change the extension of mp3 files to .txt or another common format.

95% of the users don't spot the extension because it is hidden by default on windows and apple. This will prevent the first 95% of the users to spot and play the mp3 file.

Short Version

Any suggestions to prevent users from stealing mp3 files while using html5 audio tag.

Is it your music? Why not just stream a low quality copy and use unique hashes to semi protect it. — shapeshifter
Or whisper your domain name in the middle of the mp3 every now and then. — shapeshifter
Both good options to consider. Different artists gave me the rights to play the audio on the website. — automaticoo
In that case I think your better off with low quality streams and links to buy the full quality version. — shapeshifter

marksyzm marksyzm · Accepted Answer · 2013-07-01T13:01:22

Kind of.

Grooveshark send a POST request to a server-side script for the MP3 that is being streamed which makes it very difficult to just access and spoof without dynamically creating a POST request yourself - especially seeing as you would have to then attempt to store the audio file that is collected. But you can use the new AudioContext to help solve this for most modern platforms...

I used a great example from HTML5Rocks.com to alter the headers used as follows:

var dogBarkingBuffer = null;
// Fix up prefixing
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();

function loadDogSound(url) {
  var request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  request.responseType = 'arraybuffer';

  // Decode asynchronously
  request.onload = function() {
    context.decodeAudioData(request.response, function(buffer) {
      dogBarkingBuffer = buffer;
    }, onError);
  }
  //this is the encryption key
  request.send("key=98753897358975387943");
}

As you can see I am also sending a key value which could possibly be part of a public/private pair too. This should put anyone off attempting to intervene - other than simply recording the MP3 as it's playing, of course, but what could possibly stop that in any environment inside or out of a computer?

Audio tag security in html5

3 Answers