如何使用 Javascript 从现有音频元素中获取 Blob 数据答案

【问题标题】：How to get Blob data from an existing audio element with Javascript如何使用 Javascript 从现有音频元素中获取 Blob 数据
【发布时间】：2019-03-26 07:53:54
【问题描述】：

我知道mp3 文件在我的服务器中的位置。我已将它加载到我的视图中，<audio> 元素可以播放它。现在我想从<audio> 元素中提取加载的blob 数据。我在网上找到了示例，但这些示例仅显示了如何使用 <input> 元素上传文件。

我想知道如何从现有的<audio> 元素中获取二进制数据，如下所示：

<audio id="myAudio" src="/Media/UserData/mp3DataFolder/5f67889a-0860-4a33-b91b-9448b614298d.mp3"></audio>

从现在开始谢谢。

【问题讨论】：

stackoverflow.com/questions/40326823/javascript-make-audio-blob/…
谢谢，但我在此链接中没有任何 base64 数据。你知道如何使用 javascript 将这个 mp3 文件转换为 base64 吗？
你想用这个 Blob 做什么？

标签： javascript audio binary blob

【解决方案1】：

您好，您可以先将其转换为 base 64，然后再转换为 blob：

关键方法：

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);
};

[https://codepen.io/xewl/pen/NjyRJx]

然后按照这个答案创建 blob。

Javascript make audio blob

演示：https://jsfiddle.net/sanddune/uubnnr0w/

【讨论】：

感谢您尝试帮助我，但只需要从我的音频元素中读取这些数据，因为我已经有了源路径。

【解决方案2】：

您可以简单地获取此 url 并将您的请求的 responseType 设置为"blob"。

var aud = document.getElementById('aud');
var xhr = new XMLHttpRequest();
xhr.open('GET', aud.src);
xhr.responseType = 'blob';
xhr.onload = e => console.log(xhr.response);
xhr.send();

&lt;audio src="https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3" id="aud" controls&gt;

或者使用 fetch API：

var aud = document.getElementById('aud');
fetch(aud.src)
  .then(response => response.blob())
  .then(console.log);

&lt;audio src="https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3" id="aud" controls&gt;

当然，这假设保存您的音频文件的服务器允许您从客户端获取它（在您的情况下应该这样做，因为您显示了相对 url）。

【讨论】：