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

Question

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

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

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

从现在开始谢谢。

Answer 1

你可以简单地获取这个 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();

<audio src="https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3" id="aud" controls>

或者使用 fetch API：

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

<audio src="https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3" id="aud" controls>

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

Answer 2

您好，您可以先将其转换为 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 制作音频 blob

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