html - 从 标签中清除音频时如何听到播放的声音？

Question

在我的示例中，我有一个用户已上传到网页的 mp3。我在页面上创建了一个可视波形，并编码了所有默认控件并使其正常工作(播放、暂停、停止、删除等...)

我想要完成的是您在 After Effects 或 Animate 中听到的擦洗效果。当我擦洗音频时，我想在擦洗器所在的确切位置听到音频的音调。

我什至不知道从哪里开始？我查看了 AudioContext我想我的答案就在某个地方，但我不确定。我想过有一个“影子音频标签”，我将相同的 src 设置为然后调用 play()并在不久之后暂停，但这似乎一团糟；尤其是使用激进的洗涤器。任何方向将不胜感激!

Answer 1

是的，您的答案在 AudioContext API 中(所有异步和慢速 MediaElements 都不是为此制作的)。具体来说，你想要的是AudioBufferSourceNode界面，可以立即播放音频。

您需要做的就是将您的音频文件作为 ArrayBuffer 获取，向 decode the audio PCM data 询问 AudioContext从这个缓冲区中创建一个 AudioBuffer 。

这是最重要的部分，但它只完成了一次。

然后你只需要为每个“scrub”事件创建一个非常轻的 AudioBufferSourceNode 。
为此，您可以使用其 start(when, offset, duration) 的三个参数版本。方法。

const slider = document.getElementById('slider');
const ctx = new AudioContext();

fetch("https://upload.wikimedia.org/wikipedia/en/d/dc/Strawberry_Fields_Forever_(Beatles_song_-_sample).ogg")
  .then( resp => resp.arrayBuffer() )
  .then( buf => ctx.decodeAudioData(buf) )
  .then( prepareUI )
  .catch( console.error );
  
function prepareUI( audioBuf ) {
  let source;
  slider.oninput = e => {
    if( source ) { source.stop(0); }
    source = ctx.createBufferSource();
    source.buffer = audioBuf;
    source.connect(ctx.destination);
    const offset = slider.value * audioBuf.duration;
    const duration = 0.1;
    source.start(0, offset, duration);
  };
  slider.disabled = false;
}

input { width: 350px }

<input type="range" id="slider" min="0" max="1" step="0.005" disabled>

当然，您也可以为整个播放器重复使用此 AudioBuffer。