【问题标题】:Play PCM with javascript用 JavaScript 播放 PCM
【发布时间】:2018-12-05 04:35:10
【问题描述】:

我在浏览器上播放 PCM 音频时遇到了一些问题。 PCM 音频来自具有 udp-protocol 的 android 设备,并在服务器上保存为 *.raw

我在 webaudioapi 的帮助下尝试播放这个保存的文件失败了。使用以下代码,给我播放一些带有白噪声的令人毛骨悚然的声音:

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
audioCtx.sampleRate = 16000;


// Stereo
var channels = 1;
// Create an empty two second stereo buffer at the
// sample rate of the AudioContext
var frameCount = audioCtx.sampleRate * 10.0;

var myAudioBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);


var req = new XMLHttpRequest();
req.open('GET', "example.raw", false);
req.overrideMimeType('text\/plain; charset=x-user-defined');
req.send(null);

function play(){
    for (var channel = 0; channel < channels; channel++) {

        var nowBuffering = myAudioBuffer.getChannelData(channel,16,16000);
        for (var i = 0; i < frameCount; i++) {
            // audio needs to be in [-1.0; 1.0]
            // for this reason I also tried to divide it by 32767
            // as my pcm sample is in 16-Bit. It plays still the
            // same creepy sound less noisy.
            nowBuffering[i] = (req.responseText.charCodeAt(i) & 0xff;

        }
    }
    // Get an AudioBufferSourceNode.
    // This is the AudioNode to use when we want to play an AudioBuffer
    var source = audioCtx.createBufferSource();
    // set the buffer in the AudioBufferSourceNode
    source.buffer = myAudioBuffer;
    // connect the AudioBufferSourceNode to the
    // destination so we can hear the sound
    source.connect(audioCtx.destination);
    // start the source playing
    source.start();
}

它正在播放一种无法识别的声音,我不确定它是否正在播放我认为它必须做的 pcm 文件。

我想它必须对 pcm 文件做一些事情。 PCM 文件的采样率为 16 kHz,每个采样 16 位,并且只有一个通道或单通道。

这里有人遇到同样的问题,或者有人有解决我问题的建议吗?

几天以来我一直在寻找解决方案,并感谢任何帮助。

【问题讨论】:

    标签: javascript audio wav web-audio-api


    【解决方案1】:

    首先:

    audioCtx.sampleRate = 16000; 不起作用。您不能修改 audioCtx.sampleRate。相反,您需要执行以下操作:

    var frameCount = req.responseText.length / 2;
    var myAudioBuffer = audioCtx.createBuffer(channels, frameCount, 16000);
    

    因为您的文件是 16 位的,所以它的字节长度是您需要的帧数的两倍。

    (req.responseText.charCodeAt(i) &amp; 0xff) 将产生一个介于 0 和 255 之间的值,表示单个 8 位字节。你需要 16 位。

    你需要知道你的样本的字节顺序,每次处理两个字节

    对于小端(LSB 优先):

    var word = (req.responseText.charCodeAt(i * 2) & 0xff) + ((req.responseText.charCodeAt(i * 2 + 1) & 0xff) << 8);
    

    对于大端(MSB 优先):

    var unsignedWord = ((req.responseText.charCodeAt(i * 2) & 0xff) << 8) + (req.responseText.charCodeAt(i * 2 + 1) & 0xff);
    

    这将产生一个介于 0 和 65535 之间的数字,表示一个无符号的 16 位整数。为了转换为有符号整数,您需要执行以下操作(将 X 替换为上面的代码)

    var signedWord = (unsignedWord + 32768) % 65536 - 32768;
    

    这将产生一个介于 -32768 和 32767 之间的数字,然后您可以将其除以 32768.0 以获得所需的结果。

    nowBuffering[i] = signedWord / 32768.0;
    

    编辑:工作示例https://o.lgm.cl/example.html(16 位 LSB)

    【讨论】:

    • 我使用Javacv的FfmpegGrabber从rtsp流中抓取音频,将抓取的socket推送到网页,并成功播放音频参考您提供的示例。这个例子真的很有帮助。
    【解决方案2】:

    @Locolois

    我尝试了您的建议/解决方案并获得了一些清晰的声音,但不幸的是听起来仍然不像原来的那样。它每秒也有白噪声,这比我的解决方案更令人毛骨悚然:D 但我仍然没有听到我录制的声音。我不确定 android.audiorecord 导出的 pcm 是大端还是小端,所以我尝试了两种方式。但是我通过使用你为大端提出的建议听到的声音对我来说听起来比小端版本更正确。小端版本也完全带有白噪声。

    你的解释是正确的实现吗?:

    for (var i = 0; i < frameCount; i+=2) {     
        var msbFirst = (req.responseText.charCodeAt(i) & 0xff) + (req.responseText.charCodeAt(i + 1) & 0xff) << 8;
        var msbSigned = (msbFirst + 32768) % 65536 - 32768;
        nowBuffering[i] =  msbSigned / 65536.0;
    }
    

    【讨论】:

    • 我的解决方案有错误。我提交了一个修复并添加了一个示例。
    • 我用你的例子试试。它仍然不起作用......:/你可以尝试用你的例子来玩这个原始的吗? taxameter.esy.es/example.raw
    • 好吧,我错了,每隔一帧提供一次。我的示例之所以有效,是因为它们具有平滑的数据。我更新了答案和工作示例。此外,根本不需要使用或混淆audioCtx.sampleRate
    • +4837923749 首先我认为它不起作用(用 Safari 尝试过)。在 Firefox 上,它就像一个魅力。太感谢了!!! Safari 抛出 NotSupportedError(DOM 异常 9):以下行不支持该操作: var myAudioBuffer = audioCtx.createBuffer(channels, frameCount, 16000);我会尝试修复并告诉你我的解决方案。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-05-27
    • 1970-01-01
    • 2017-05-23
    • 2012-05-04
    • 1970-01-01
    • 1970-01-01
    • 2011-04-28
    相关资源
    最近更新 更多