时间戳

首页 > 解决方案 > 如何将音频工作集连接到网页？

javascript - 如何将音频工作集连接到网页？

问题描述

我正在尝试将网页连接到音频工作集（按照这个演示但我被卡住了。

有人可以帮忙吗？

这是我到目前为止的代码。这些文件都在同一个文件夹中，但它们不记录任何内容。

索引.HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

索引.JS

const demoCode = async () => {
    const audioContext = new AudioContext()
    await audioContext.audioWorklet.addModule('test-processor.js')
    const testNode = new AudioWorkletNode(audioContext, 'test-processor')
    testNode.connect(audioContext.destination)
  }

测试处理器.JS

class TestProcessor extends AudioWorkletProcessor {
  constructor () {
    super()
    console.log(currentFrame)
    console.log(currentTime)
  }
  process (inputs, outputs, parameters) {
    return true
  }
}

console.log(sampleRate)

const usefulVariable = 42
console.log(usefulVariable)

registerProcessor('test-processor', TestProcessor)

标签： javascriptweb-audio-apiaudio-worklet

解决方案

看起来你没有在demoCode()任何地方调用你的函数。如果您想符合当今浏览器中需要响应用户手势的自动播放策略。

首先，您需要在 HTML 中添加一个按钮。

<button id="start" type="button">start</button>

然后，您可以在index.js文件中为该按钮附加一个事件侦听器。

document.getElementById('start').addEventListener('click', demoCode);

推荐阅读