HTML5网络音频-减速播放音频提前截断

19
我正在开发一个基于Web的音乐制作软件,注意到在我的采样回放程序中,音频上下文似乎仅存在于采样的持续时间内,并且当我对采样进行音高变换时,Web Audio API似乎不会调整播放持续时间。例如,如果我将一个音符下移一个八度,程序只会播放声音的前半部分然后截断。更强烈的音高下移导致更少的声音播放,虽然我不能确定,但我怀疑加速音频会导致在声音离开缓冲区之前相对较长的静默期。

这是我目前的音频播放程序。到目前为止,比起扩展此程序的功能,更多的工作已经投入到确保其他函数向其发送正确的数据中。

function playSound(buffer, pitch, dspEffect, dspValue, volume) {

  var source = audioEngine.createBufferSource();  
  source.buffer = buffer;
  source.playbackRate.value = pitch; 

  // Volume adjustment is handled before other DSP effects are added.
  var volumeAdjustment = audioEngine.createGain();
  source.connect(volumeAdjustment);
  // Very basic error trapping in case of bad volume input.
  if(volume >= 0 && volume <= 1) { 
    volumeAdjustment.gain.value = volume; 
  } else { 
    volumeAdjustment.gain.value = 0.6; 
  }

  switch(dspEffect){
    case 'lowpass':
      var createLowPass = audioEngine.createBiquadFilter();
      volumeAdjustment.connect(createLowPass);
      createLowPass.connect(audioEngine.destination);
      createLowPass.type = 'lowpass';
      createLowPass.frequency.value = dspValue;
      break;
    // There are a couple of other optional DSP effects, 
    // but so far they all operate in about the same fashion.
  }
  source.start();
}

我的意图是希望样本能够完全播放,无论应用了多少音高变化,如果必要的话,我希望限制所允许的音高变化量。我发现将几秒钟的静默附加到声音上可以解决这个问题,但由于需要处理大量声音,这很繁琐,我更喜欢基于代码的解决方案。

编辑:在我可以测试的浏览器中,这只似乎是在Google Chrome中存在问题。在Firefox中,样本可以完全播放,在Internet Explorer中不支持Web Audio API,而且我没有方便地访问Safari或Opera。这无疑改变了我所寻找的帮助的性质。


你有这种情况的托管示例吗?虽然更改播放速率不应更改播放完毕的声音,但如果没有看到它在实际操作中,我就无法进行调试。 - cwilso
这个例程是Tracker2D程序的一部分,可以在http://gabekagan.github.io/Tracker2D/上获得。最近我发现这个错误似乎在Firefox中不会发生。我错过了它,因为我大多数时间都在Chrome中开发,我将编辑原始问题以指示这一点。 - Jessica Kagan
我建议您仔细检查最新的Chromium夜间版是否出现了此问题,然后在Chromium问题跟踪器https://code.google.com/p/chromium/issues/list中提交一个错误报告。 - Mikko Ohtamaa
4
Chrome 中存在一些问题,当播放速率小于 1 时,源节点的播放可能会出现问题。我认为这个问题在 M44 版本中已经得到解决,但我不确定。 - Raymond Toy
1个回答

1
我发现在声音末尾添加几秒钟的静默可以解决这个问题,但由于需要处理大量的声音文件,这种方法很繁琐,我更希望有一种基于代码的解决方案。你可以上传一个只包含几秒钟静默的声音文件,并将其附加到实际的音频文件中。这里是一个SO答案,展示了如何实现此操作...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接