how to convert raw mp3 binary into blob url and pl

Question

What im doing is sending mp3 data through websockets as base64 strings and decoding it on browser side now what im trying to do is turn that raw data into a blob and play it in an audio tag but i dont know how can you help also decoding base64 strings is laggy is there a better way

JAVASCRIPT

var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/rn/g,"n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

    var AudioType = "audio/mp3";
    var protocol = "ws://";
    var host = "127.0.0.1";
    var port = 4446;
    var uri = protocol + host + ":" + port + "/"
    var ws = new WebSocket(uri);
    ws.onopen = function() {
        console.log("Connected");
        ws.send(JSON.stringify({"reqID3":1}));
        ws.send(JSON.stringify({"init":1}))
    }
    ws.onmessage = function(e){
        var js = JSON.parse(e.data);
        if (js.id3) {
            document.getElementById("bitrate").innerHTML = js.id3.bitrate;
            document.getElementById("length").innerHTML = js.id3.length;
            document.getElementById("title").innerHTML = js.id3.title;
        }
        if (js.buffer) {
            //console.log(js.buffer)
            var b = Base64.decode(js.buffer)
            console.log(b)
            var audio = document.getElementById("audio");
            audio.type = AudioType;
            audio.src = window.URL.createObjectURL(b);


        }
    }
    ws.onclose = function() {
        ws.close()

Answer 1

Not sure what kind of data is "js.buffer"? But if it is base64 encoded already, just prefix it like @Ashraf said as:

var audio = document.getElementById("audio");
audio.type = AudioType;
audio.src = "data:audio/mpeg;base64," + js.buffer;
// audio.src = "data:" + AudioType + ";base64," + js.buffer;

FYI: Modern browsers have built-in base64 encode/decode.

Use:
   atob() - decode base64
   btoa() - encode base64

Answer 2

You don't need to convert it to raw . HTML5 Audio already supports base64 as a URL :

<audio controls src="data:audio/mp3;base64, ...

Answer 3

You can try using Audiocontext from Web Audio API. Use AudioContext.createBuffer() for raw data and then it can be played by being passed into an AudioBufferSourceNode. You can also use the decodeAudioData() method to use an audio file.