如何将原始 mp3 二进制文件转换为 blob url 并在音频标签中播放答案

【问题标题】：how to convert raw mp3 binary into blob url and play it in audio tag如何将原始 mp3 二进制文件转换为 blob url 并在音频标签中播放
【发布时间】：2019-01-19 04:38:18
【问题描述】：

我正在做的是通过 websockets 将 mp3 数据作为 base64 字符串发送并在浏览器端对其进行解码，现在我想做的是将原始数据转换为 blob 并在音频标签中播放，但我不知道你能提供什么帮助解码base64字符串也很滞后有没有更好的方法

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

【问题讨论】：

您已经添加了许多层的复杂性。你为什么要做你正在做的事？如果您向一个方向发送数据（从客户端到服务器，或从服务器到客户端），则不需要 Web 套接字。即使您要使用 Web Sockets，它们也支持二进制传输，因此无需承受 33% 的大小开销和所有额外的 CPU。即使在所有这些之后，当您可以直接流式传输数据时，也没有理由制作这些大型 MP3 块。如果您只是正常使用 HTTP，则可以丢弃所有这些代码并使用 <audio> 标记。

标签： javascript websocket blob

【解决方案1】：

您无需将其转换为 raw 。 HTML5 Audio 已经支持 base64 作为 URL：

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

【讨论】：

【解决方案2】：

您可以尝试使用来自Web Audio API 的Audiocontext。将AudioContext.createBuffer() 用于原始数据，然后可以通过传递给AudioBufferSourceNode 来播放。您也可以使用decodeAudioData() 方法来使用音频文件。

【讨论】：

【解决方案3】：

不确定“js.buffer”是什么类型的数据？但是如果它已经是base64编码的，只需像@Ashraf所说的那样添加前缀：

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

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

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

【讨论】：