如何在浏览器中播放的字节数组（不是文件！）用JavaScript

Question

对于多数安全原因，我不能存储在服务器上的WAV文件，通过浏览器访问。我所拥有的是一个字节数组包含音频数据在服务器（WAV文件，我相信的数据部分），我希望它在浏览器中通过JavaScript（或小程序，但JS首选）上播放，我可以使用JSON-中国整个的byte []送过来，或者我可以打开一个套接字流过来，但在任何情况下，我不知道是谁在浏览器中播放的byte []？

Answer 1

下面的代码将在0.5和2.0播放正弦波。调用函数play_buffersource()在你的按钮或任何你想要的。

使用Chrome与网络音频测试的标志启用。对于你的情况，所有你需要做的就是重新洗牌音频字节到buf。

<script type="text/javascript">
const kSampleRate = 44100; // Other sample rates might not work depending on the your browser's AudioContext
const kNumSamples = 16834;
const kFrequency  = 440;
const kPI_2       = Math.PI * 2;

function play_buffersource() {
    if (!window.AudioContext) {
        if (!window.webkitAudioContext) {
            alert("Your browser sucks because it does NOT support any AudioContext!");
            return;
        }
        window.AudioContext = window.webkitAudioContext;
    }

    var ctx = new AudioContext();

    var buffer = ctx.createBuffer(1, kNumSamples, kSampleRate);
    var buf    = buffer.getChannelData(0);
    for (i = 0; i < kNumSamples; ++i) {
        buf[i] = Math.sin(kFrequency * kPI_2 * i / kSampleRate);
    }

    var node = ctx.createBufferSource(0);
    node.buffer = buffer;
    node.connect(ctx.destination);
    node.noteOn(ctx.currentTime + 0.5);

    node = ctx.createBufferSource(0);
    node.buffer = buffer;
    node.connect(ctx.destination);
    node.noteOn(ctx.currentTime + 2.0);
}
</script>

参考文献：

• http://epx.com.br/artigos/audioapi.php
• https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html

如果您需要重新采样的音频，您可以使用JavaScript重采样：https://github.com/grantgalitz/XAudioJS

如果你需要以base64数据进行解码，也有大量的JavaScript的base64解码：https://github.com/carlo/jquery-base64

Answer 2

如果您在服务器上的字节，那么我会建议你将流字节的响应为WAV文件在服务器上创建某种处理程序。该“文件”将只能在服务器上的内存，而不是在磁盘上。然后，浏览器可以直接处理它像一个正常的wav文件。将所需的服务器堆栈上的更多细节就如何这会在你的环境中完成的更多信息。

Answer 3

我通过下面的代码来实现这一点。我通过在从wav文件到功能playByteArray包含数据的字节数组。我的解决办法是类似彼得李的，但我不能让他在我的情况下工作（输出为乱码），而这个解决方案很适合我。我证实，它工作在Firefox和Chrome。

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

    var arrayBuffer = new ArrayBuffer(byteArray.length);
    var bufferView = new Uint8Array(arrayBuffer);
    for (i = 0; i < byteArray.length; i++) {
      bufferView[i] = byteArray[i];
    }

    context.decodeAudioData(arrayBuffer, function(buffer) {
        buf = buffer;
        play();
    });
}

// Play the loaded file
function play() {
    // Create a source node from the buffer
    var source = context.createBufferSource();
    source.buffer = buf;
    // Connect to the final output node (the speakers)
    source.connect(context.destination);
    // Play immediately
    source.start(0);
}

Answer 4

我怀疑你可以用HTML5音频API很轻松地做到这一点：

https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension

该库可能会派上用场过，虽然我不知道这是否反映了最新的浏览器行为：

https://github.com/jussi-kalliokoski/audiolib.js