javascript - 处理原始音频JavaScript

Question

我项目的目标是能够处理原始音频数据，例如此问题:Play raw audio with JavaScript。分为五个步骤:

录制音频

将生成的blob转换为ArrayBuffer

用ArrayBuffer处理音频数据的DataView(例如，使其速度提高两倍或两倍)。

转换回blob

播放操纵的音频

当我将音频数据的blob转换为 ArrayBuffer，并将 ArrayBuffer转换为 Int8Array以便可以查看数据时，它看起来像这样(我仅显示前几个值，而不是整个内容):

[26,69,-33,-93,-97,66,-122,-127,1,66,-9,-127,1,66,-14,-127,4,66,-13,-127,8,66,-126,-124,119,101,98,109,66,-121,-127,4,66,-123,-127,2,24,83,-128,103,1,-1,-1,-1,-1,-1,-1,-1,21,73,-87,102,-103,42,-41,-79,-125,15,66,64,77,-128,-122,67,104,114,111,109,101,87,65,-122,67,104,114,111,109,101,22,84,-82,107,-65,-82,-67,-41,-127,1,115,-59,-121,-103,-103,-9,91,-16,59,77,-125,-127,2,-122,-122,65,95,79,80,85,83,99,-94,-109,79,112,117,115,72,101,97,100,1,1,0,0,-128,-69,0,0,0,0,0,-31,-115,-75,-124,71,59,-128,0,-97,-127,1,98,100,-127,32,31,67,-74,117,1,-1,-1,-1,-1,-1,-1,-1,-25,-127,0,-93,65,52,-127,0,0,-128,-5,-125,2,-60,-1,-2,127,-4,102,-43,102,31,98,87,-112,-55,-17,-20,-88,89,39,108,97,84,44,38,-113,61,36,122,7,39,61,27,-103,-91,-23,80,64,36,9,-4,-51,-127,12,109,38,100,99,-101,-18,74,124,108,59,71,81,23,-30,93...]

由于似乎不可能从 Int8Array回到 ArrayBuffer，最终回到可以作为音频播放的 Blob，所以我决定使用 DataView来操纵 ArrayBuffer。
当我完全不更改 ArrayBuffer时，它可以成功地将其转换回blob，然后转换回音频。但是，当我尝试使用 ArrayBuffer更改 DataView时，出现以下错误:

index.html:1 
Uncaught (in promise) DOMException: Failed to load because no supported source was found.

在网上查看后，该错误似乎是某种CORS问题，但这没有任何意义，因为当我不更改ArrayBuffer时它就可以工作。问题与数据类型有关吗？
这是我的整个JavaScript:

let AudioContext = window.AudioContext || window.webkitAudioContext;
var mediaRecorder;

function start(){ //start recording
    audio = navigator.mediaDevices.getUserMedia({
        audio: true,
        video: false
    }).then(record);
}

function record(stream) {
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.start(); //start recording

    mediaRecorder.addEventListener("dataavailable", event => {
        event.data.arrayBuffer().then(processAudio); //event.data is a blob, converts it into an arrayBuffer
    });
}

function processAudio(buffer){
    var view = new DataView(buffer); //to change the ArrayBuffer
    var array = new Int8Array(buffer); //this typed array contains all of the audio data
    
    view.setInt16(0, 1); //when I comment out this line and don't change the ArrayBuffer at all, it works.

    var newBlob = new Blob([buffer]); //convert back into blob

    var newAud = document.createElement("audio"); //create audio element to play the recording
    newAud.src = URL.createObjectURL(newBlob);
    newAud.play();
    document.body.appendChild(newAud);
}

function done(){ mediaRecorder.stop(); }

我还要提及的是，当我尝试绘制 Int8Array时，会得到如下图所示的随机静态数据:
我很确定应该使用8位编码，因为 ArrayBuffer的字节长度并不总是2的倍数。
任何帮助表示赞赏。

Answer 1

我认为您在列表中没有保留关键步骤:将输入数据转换为有意义的PCM值。
看来您已交付了带符号字节流。这些值都在-127到127之间是有启发性的。
实际的PCM最有可能包含由每个PCM值两个或三个或什至四个字节组成的值。最常见的音频格式是16位编码。为了得到您的PCM值，将需要按照低位或大位的顺序连接两个字节。
用PCM表示信号后，就可以进行有意义的处理。请注意，您不仅限于减半或加倍:还可以通过线性插值法推断信号中的中间点，这使您有机会以所需的任何速度播放声音。
当然，在对信号进行操作之后，必须将各个PCM值分解成系统所需的预期字节顺序格式。但是，由于不了解JavaScript音频的细节，也许有些方法或函数使您无需进行字节级转换即可流PCM。
我的经验是使用Java，而不是JavaScript，但这看起来非常相似。我确实知道，例如Android允许人们直接流PCM数据，例如带符号的标准化浮点数。