如何将原始mp3二进制文件转换为blob url并在音频标签中播放 [英] how to convert raw mp3 binary into blob url and play it in audio tag

问题描述

即时通讯正在做的事情是通过websockets以base64字符串的形式发送mp3数据，并在浏览器端对其进行解码，即时通讯正在尝试将原始数据转换为blob并在音频标签中播放，但我不知道您如何提供帮助还要解码base64字符串比较滞后，有没有更好的方法

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

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()

推荐答案

不确定"js.buffer"是哪种数据?但是，如果已经对base64进行了编码，则可以像@Ashraf那样将其前缀为:

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;

仅供参考:现代浏览器具有内置的base64编码/解码功能.

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

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

这篇关于如何将原始mp3二进制文件转换为blob url并在音频标签中播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！