将Java代码重写为JS - 从字节创建音频？

Question

我正在尝试将我发现用 Java 编写的一些（非常简单的）android 代码重写为静态 HTML5 应用程序（我不需要服务器来做任何事情，我想保持这种方式）。我在 Web 开发方面有广泛的背景，但对 Java 有基本的了解，对 Android 开发的了解更少。

该应用程序的唯一功能是获取一些数字并将它们从字节转换为音频啁啾。将数学逻辑转换为 JS 完全没有问题。我遇到麻烦的地方是实际产生声音的时候。这是原代码的相关部分：

import android.media.AudioFormat;
import android.media.AudioManager;
import android.media.AudioTrack;

// later in the code:

AudioTrack track = new AudioTrack(AudioManager.STREAM_MUSIC, sampleRate, AudioFormat.CHANNEL_OUT_MONO, AudioFormat.ENCODING_PCM_16BIT, minBufferSize, AudioTrack.MODE_STATIC);

// some math, and then:

track.write(sound, 0, sound.length); // sound is an array of bytes

我如何在 JS 中做到这一点？我可以使用dataURI to produce the sound from the bytes，但这是否允许我控制此处的其他信息（即采样率等）？换句话说：在 JS 中最简单、最准确的方法是什么？

更新

我一直在尝试复制我在this answer 中找到的内容。这是我的代码的相关部分：

window.onload = init;
var context;    // Audio context
var buf;        // Audio buffer

function init() {
if (!window.AudioContext) {
    if (!window.webkitAudioContext) {
        alert("Your browser does not support any AudioContext and cannot play back this audio.");
        return;
    }
        window.AudioContext = window.webkitAudioContext;
    }

    context = new AudioContext();
}

function playByteArray( bytes ) {
    var buffer = new Uint8Array( bytes.length );
    buffer.set( new Uint8Array(bytes), 0 );

    context.decodeAudioData(buffer.buffer, play);
}

function play( audioBuffer ) {
    var source    = context.createBufferSource();
    source.buffer = audioBuffer;
    source.connect( context.destination );
    source.start(0);
}

但是，当我运行它时，我得到了这个错误：

Uncaught (in promise) DOMException: Unable to decode audio data

我觉得这很不寻常，因为这是一个如此普遍的错误，它设法漂亮地告诉我到底是哪里出了问题。更令人惊讶的是，当我一步一步调试这个时，即使错误链（预期）从context.decodeAudioData(buffer.buffer, play); 行开始，它实际上在 jQuery 文件（3.2.1, uncompressed）中运行了几行，通过行5208、5195、5191、5219、5223，最后是 5015，然后再出错。我不知道为什么 jQuery 与它有任何关系，并且该错误让我不知道该尝试什么。有什么想法吗？

Answer 1

如果bytes 是ArrayBuffer，则无需创建Uint8Array。您可以将ArrayBuffer bytes 作为参数传递给AudioContext.decodeAudioData()，它返回一个Promise，将.then() 链接到.decodeAudioData()，以play 函数作为参数调用。

javascript at stacksn-ps，<input type="file"> 元素用于接受音频文件的上传，FileReader.prototype.readAsArrayBuffer() 从File 对象创建ArrayBuffer，并传递给playByteArray。

window.onload = init;
var context; // Audio context
var buf; // Audio buffer
var reader = new FileReader(); // to create `ArrayBuffer` from `File`

function init() {
  if (!window.AudioContext) {
    if (!window.webkitAudioContext) {
      alert("Your browser does not support any AudioContext and cannot play back this audio.");
      return;
    }
    window.AudioContext = window.webkitAudioContext;
  }

  context = new AudioContext();
}

function handleFile(file) {
  console.log(file);
  reader.onload = function() {
    console.log(reader.result instanceof ArrayBuffer);
    playByteArray(reader.result); // pass `ArrayBuffer` to `playByteArray`
  }
  reader.readAsArrayBuffer(file);
};

function playByteArray(bytes) {
  context.decodeAudioData(bytes)
  .then(play)
  .catch(function(err) {
    console.error(err);
  });
}

function play(audioBuffer) {
  var source = context.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(context.destination);
  source.start(0);
}

<input type="file" accepts="audio/*" onchange="handleFile(this.files[0])" />

Answer 2

我自己解决了。我对MDN docs explaining AudioBuffer 进行了更多阅读，并意识到两件重要的事情：

1. 我不需要对AudioData 进行解码（因为我自己创建数据，所以没有要解码的内容）。实际上，我从我正在复制的答案中吸取了这一点，回想起来，这完全没有必要。
2. 由于我使用的是 16 位 PCM 立体声，这意味着我需要使用 Float32Array（2 个通道，每个 16 位）。

当然，我的一些计算仍然存在问题，导致声音失真，但就产生声音本身而言，我最终做了这个非常简单的解决方案：

function playBytes(bytes) {
    var floats = new Float32Array(bytes.length);

    bytes.forEach(function( sample, i ) {
        floats[i] = sample / 32767;
    });

    var buffer = context.createBuffer(1, floats.length, 48000),
        source = context.createBufferSource();

    buffer.getChannelData(0).set(floats);
    source.buffer = buffer;
    source.connect(context.destination);
    source.start(0);
}

我可能可以进一步优化它——例如，32767 部分应该在此之前发生，在我正在计算数据的部分中。另外，我正在创建一个具有两个通道的 Float32Array，然后输出其中一个，因为我真的不需要两个通道。我不知道是否有一种方法可以使用 Int16Array 创建一个通道单声道文件，或者是否有必要\更好。

无论如何，基本上就是这样。这实际上只是最基本的解决方案，我对如何正确处理数据的了解很少。希望这对那里的任何人都有帮助。