Clash Royale CLAN TAG#URR8PPP

how to convert raw mp3 binary into blob url and play it in audio tag

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)r>>4;u=(r&15)<<2return 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)u>>2;i=(u&3)<<6t=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>>6elset+=String.fromCharCode(r>>12return 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&63);n+=2elsec3&63);n+=3return 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()


<audio>

3 Answers
3

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

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

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

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.

Audiocontext

AudioContext.createBuffer()

AudioBufferSourceNode

decodeAudioData()

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.