如何通过javascript / html5播放wav音频字节数组？ [英] How to play wav audio byte array via javascript/html5?

问题描述

我使用以下方法播放包含wav数据的字节数组。该函数正在从GWT项目中调用。

这个函数播放声音，但它听起来像是某种地狱怪物。采样率绝对正确（声音由neospeech生成），我已经尝试了numberOfSamples的各种值，这似乎代表了音频数据的长度。

numberOfSamples的值大于30000将播放音频文件的全长，但是它很乱，很可怕。

所以，我做错了什么？

  function playByteArray（ byteArray，numberOfSamples）{
 sampleRate = 8000; 
 
 if（！window.AudioContext）{
 if（！window.webkitAudioContext）{
 alert（您的浏览器不支持任何AudioContext并且无法播放此音频。 ）; 
 return; 
} 
 window.AudioContext = window.webkitAudioContext; 
} 
 
 var audioContext = new AudioContext（）; 
 
 var buffer = audioContext.createBuffer（1，numberOfSamples，sampleRate）; 
 var buf = buffer.getChannelData（0）; 
 for（i = 0; i< byteArray.length; ++ i）{
 buf [i] = byteArray [i]; 
} 
 
 var source = audioContext.createBufferSource（）; 
 source.buffer = buffer; 
 source.connect（audioContext.destination）; 
 source.start（0）; 
} 
  

解决方案

我想出了如何做我在我的问题中描述了什么，并认为我应该为了其他人的利益而发布它。代码如下。我调用playByteArray并传递一个包含pcm wav数据的字节数组。

  window.onload = init; 
 var context; // Audio上下文
 var buf; //音频缓冲区
 
函数init（）{
 if（！window.AudioContext）{
 if（！window.webkitAudioContext）{
 alert（Your browser不支持任何AudioContext并且不能播放此音频。）; 
 return; 
} 
 window.AudioContext = window.webkitAudioContext; 
} 
 
 context = new AudioContext（）; 
 
 
函数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（）; 
}）; 
} 
 
 //播放加载的文件
 function play（）{
 //从缓冲区
 var source = context创建一个源节点。 createBufferSource（）; 
 source.buffer = buf; 
 //连接到最终的输出节点（扬声器）
 source.connect（context.destination）; 
 //立即播放
 source.start（0）; 
} 
  

I'm using the following method to play a byte array containing wav data. The function is being called from a GWT project.

This function plays back sound, but it sounds like some kind of Hellish monster. The sample rate is definitely correct (the sound is being generated by neospeech) and I've tried all kinds of values for numberOfSamples, which just seems to represent how long the audio data is.

A value greater than 30000 for numberOfSamples will play the audio file's full length but it is garbled and horrible.

So, what am I doing wrong?

function playByteArray(byteArray, numberOfSamples) {
    sampleRate = 8000;

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

    var audioContext = new AudioContext();

    var buffer = audioContext.createBuffer(1, numberOfSamples, sampleRate);
    var buf = buffer.getChannelData(0);
    for (i = 0; i < byteArray.length; ++i) {
        buf[i] = byteArray[i];
    }

    var source = audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(audioContext.destination);
    source.start(0);
}

解决方案

I figured out how to do what I described in my question and thought I should post it for the benefit of others. The code is below. I call playByteArray and pass it a byte array containing pcm wav data.

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

这篇关于如何通过javascript / html5播放wav音频字节数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！