Sunday, 16 June 2013

MP3 to base64 encoder and decoder


A while ago a friend of mine told me “I am still not clear on which scenarios make data URIs preferable over linked files. “

In developing a Cross-Platform HTML5 Offline App I had to include MP3 files in the offline cache. The problem I ran into is that some browsers simply refuse to cache audio files and fail silently, even if they’re explicitly defined in the cache.manifest. Playing cached audio for offline use on mobile devices was a challenge that was proved to be mission impossible. I really had no idea what was causing this but I needed a solution. So I decided to the adventage of the Web Audio API and base64 encode the files and serve them up using a data URI.

HTML5 Web Audio API offers developers direct control over the AudioBuffer and allows us to convert data formats on-the-fly and feed them directly to the Web Audio API for playback. For example, in my case I had to encode an MP3 file as a Base64 string and than play it.

Playing the audio from Base64 string was relatively straightforward:

<audio controls="controls" autobuffer="autobuffer" autoplay="autoplay">
<source src="data:audio/wav;base64,UklGRhw...dlIDguMAAA"/>
</audio>

The only thing left was encoding an Audio File. You can easily convert an MP3 file to a Base64 string using OpenSSL. But what about converting MP3 files and testing the output directly in a browser?

Here's a MP3 Base64 Encoder / Decoder widget. It outputs a Base64-encoded string representation of your sound file. After the string is processed it decodes the Base64 into a Uint8Array typed array and stores it in arrayBuffer. Once this is done the stored audio data is decoded using Web Audio decodeAudioData() function. We can now test the audio by clicking play/stop buttons.

Full Demo and Source Code


JS Bin

Check out the source code repository for a complete example of the techniques discussed in this article.

<html>
<head>
<title>Web Audio API: Converting audio files from and to base64 string</title>
</head>
<body>
<input accept="audio/*" type="file" />
<button disabled="" onclick="playSound()">Start</button>
<button disabled="" onclick="stopSound()">Stop</button>
<div>
This will be the output of a base64 string representation of your sound file.<br />
<textarea cols="100" id="mp3String" rows="10">
</textarea>
</div>
<script>
var context = new window.webkitAudioContext();
var source = null;
var audioBuffer = null;

// Converts an ArrayBuffer to base64, by converting to string 
// and then using window.btoa' to base64. 

var bufferToBase64 = function (buffer) {
    var bytes = new Uint8Array(buffer);
    var len = buffer.byteLength;
    var binary = "";
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
};

var base64ToBuffer = function (buffer) {
    var binary = window.atob(buffer);
    var buffer = new ArrayBuffer(binary.length);
    var bytes = new Uint8Array(buffer);
    for (var i = 0; i < buffer.byteLength; i++) {
        bytes[i] = binary.charCodeAt(i) & 0xFF;
    }
    return buffer;
};

function stopSound() {
    if (source) {
        source.noteOff(0);
    }
}

function playSound() {
    // source is global so we can call .noteOff() later.
    source = context.createBufferSource();
    source.buffer = audioBuffer;
    source.loop = false;
    source.connect(context.destination);
    source.noteOn(0); // Play immediately.
}

function initSound(arrayBuffer) {
    var base64String = bufferToBase64(arrayBuffer);
    var audioFromString = base64ToBuffer(base64String);
    document.getElementById("mp3String").value=base64String;
    context.decodeAudioData(audioFromString, function (buffer) {
        // audioBuffer is global to reuse the decoded audio later.
        audioBuffer = buffer;
        var buttons = document.querySelectorAll('button');
        buttons[0].disabled = false;
        buttons[1].disabled = false;
    }, function (e) {
        console.log('Error decoding file', e);
    });
}

// User selects file, read it as an ArrayBuffer and pass to the API.
var fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function (e) {
    var reader = new FileReader();
    reader.onload = function (e) {
        initSound(this.result);
    };
    reader.readAsArrayBuffer(this.files[0]);
}, false);

// Load file from a URL as an ArrayBuffer.
// Example: loading via xhr2: loadSoundFile('sounds/test.mp3');

function loadSoundFile(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function (e) {
        initSound(this.response); // this.response is an ArrayBuffer.
    };
    xhr.send();
}
</script>
</body>
</html>

5 comments:

  1. Great post. Thank you very very much.This article is efficient. Thank you for sharing it with us. I am visiting this blog on a daily basis and I am finding so much helpful article each time.
    Keep working on this and thank you once again.Do you know about adultrian.
    Click Here: xnxx

    ReplyDelete
  2. Very interesting subject. Nice information, I really appreciate the way you presented. I have learnt a lot from this post. I read with great pleasure.If you get wearable technology news. Click Hear:-
    wearable technologies
    fitbit sleep tracker
    best fitness band

    ReplyDelete
  3. This tool encodes certain characters in a URL by replacing them with one or more character like % followed by hexadecimal digits.
    encoder decoder online

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. lol, the spam comments. DUDE, thank you so much for this post. Total game changer.
    My web app loads a full piano's worth of audio to each page, and I was struggling with having to make 88 separate http requests. Because of this post, those requests have now been reduced down to zero.

    I owe ya!


    Cheers,
    Matt

    ReplyDelete