录制用户的音频

许多浏览器现在都可以访问用户的视频和音频输入。但是,这可能是完全动态的内嵌体验,也可能是用户设备上的其他应用,具体取决于浏览器。

从简单做起,循序渐进

最简单的方法是直接要求用户提供预先录制的文件。为此,请创建一个简单的文件输入元素,并添加 accept 过滤器(指示我们只能接受音频文件)和 capture 属性(指示我们直接从麦克风获取该文件)。

<input type="file" accept="audio/*" capture />

此方法适用于所有平台。在桌面设备上,系统会提示用户从文件系统上传文件(忽略 capture 属性)。在 iOS 版 Safari 中,它会打开麦克风应用,以便您录制音频,然后将其发送回网页;在 Android 上,系统会让用户选择在哪个应用中录制音频,然后再将其发送回网页。

用户完成录制并返回到网站后,您需要以某种方式获取文件数据。将 onchange 事件附加到输入元素,然后读取事件对象的 files 属性,即可快速访问。

<input type="file" accept="audio/*" capture id="recorder" />
<audio id="player" controls></audio>
  <script>
    const recorder = document.getElementById('recorder');
    const player = document.getElementById('player');

    recorder.addEventListener('change', function (e) {
      const file = e.target.files[0];
      const url = URL.createObjectURL(file);
      // Do something with the audio file.
      player.src = url;
    });
  </script>
</audio>

获得文件的访问权限后,您就可以对其执行任何所需的操作。例如,您可以:

  • 将其直接附加到 <audio> 元素,以便播放
  • 将应用下载到用户的设备上
  • 通过将其附加到 XMLHttpRequest,将其上传到服务器
  • 通过 Web Audio API 传递数据并对其应用过滤器

虽然使用输入元素方法访问音频数据普遍存在,但这是最没有吸引力的方案。我们非常希望能够使用麦克风 并直接在网页中提供良好的体验

以交互方式使用麦克风

现代浏览器可直连麦克风,这使我们能够打造与网页完全集成的体验,让用户永远不会离开浏览器。

获得对麦克风的使用权限

我们可以使用 WebRTC 规范中名为 getUserMedia() 的 API 直接访问麦克风。getUserMedia() 将提示用户授予对其连接的麦克风和摄像头的访问权限。

如果成功,该 API 将返回一个 Stream,其中包含来自摄像头或麦克风的数据,然后我们可以将其附加到 <audio> 元素、将其附加到 WebRTC 流、将其附加到 Web Audio AudioContext 或使用 MediaRecorder API 保存。

如需从麦克风获取数据,我们只需在传递给 getUserMedia() API 的约束对象中设置 audio: true

<audio id="player" controls></audio>
<script>
  const player = document.getElementById('player');

  const handleSuccess = function (stream) {
    if (window.URL) {
      player.srcObject = stream;
    } else {
      player.src = stream;
    }
  };

  navigator.mediaDevices
    .getUserMedia({audio: true, video: false})
    .then(handleSuccess);
</script>

如果您想选择特定的麦克风,可以先枚举可用的麦克风。

navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices = devices.filter((d) => d.kind === 'audioinput');
});

然后,您可以传递在调用 getUserMedia 时要使用的 deviceId

navigator.mediaDevices.getUserMedia({
  audio: {
    deviceId: devices[0].deviceId,
  },
});

这本身就没什么用处。我们所能做的就是获取音频数据并进行播放。

从麦克风获取原始数据

如需访问来自麦克风的原始数据,我们必须获取 getUserMedia() 创建的流,然后使用 Web Audio API 处理数据。Web Audio API 是一个简单的 API,它接受输入来源并将这些来源连接到可以处理音频数据(调整增益等)的节点,最终连接到扬声器,以便用户能够听到声音。

您可以连接的节点之一是 AudioWorkletNode。此节点可为您提供自定义音频处理的低层级功能。实际的音频处理发生在 AudioWorkletProcessor 中的 process() 回调方法中。调用此函数以提供输入和参数并提取输出。

如需了解详情,请参阅输入音频 Worklet

<script>
  const handleSuccess = async function(stream) {
    const context = new AudioContext();
    const source = context.createMediaStreamSource(stream);

    await context.audioWorklet.addModule("processor.js");
    const worklet = new AudioWorkletNode(context, "worklet-processor");

    source.connect(worklet);
    worklet.connect(context.destination);
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
      .then(handleSuccess);
</script>
// processor.js
class WorkletProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    // Do something with the data, e.g. convert it to WAV
    console.log(inputs);
    return true;
  }
}

registerProcessor("worklet-processor", WorkletProcessor);

保留在缓冲区中的数据是来自麦克风的原始数据,您可以通过多种方式处理这些数据:

  • 直接将其上传到服务器
  • 存储在本地
  • 将其转换为专用文件格式(例如 WAV),然后将其保存到您的服务器或本地

保存麦克风中的数据

如需保存来自麦克风的数据,最简单的方法是使用 MediaRecorder API。

MediaRecorder API 会获取 getUserMedia 创建的数据流,然后逐步将数据流中的数据保存到首选目的地。

<a id="download">Download</a>
<button id="stop">Stop</button>
<script>
  const downloadLink = document.getElementById('download');
  const stopButton = document.getElementById('stop');


  const handleSuccess = function(stream) {
    const options = {mimeType: 'audio/webm'};
    const recordedChunks = [];
    const mediaRecorder = new MediaRecorder(stream, options);

    mediaRecorder.addEventListener('dataavailable', function(e) {
      if (e.data.size > 0) recordedChunks.push(e.data);
    });

    mediaRecorder.addEventListener('stop', function() {
      downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
      downloadLink.download = 'acetest.wav';
    });

    stopButton.addEventListener('click', function() {
      mediaRecorder.stop();
    });

    mediaRecorder.start();
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
      .then(handleSuccess);
</script>

在本例中,我们会直接将数据保存到一个数组中,该数组稍后可转换为 Blob,该数组随后可用于将数据保存到我们的 Web 服务器或直接保存到用户设备上的存储空间。

请求授权以负责任的方式使用麦克风

如果用户之前未授权您的网站使用麦克风,那么在您调用 getUserMedia 时,浏览器会立即提示用户授权您的网站使用麦克风。

用户讨厌在其机器上收到要求访问强大设备的提示,他们经常会屏蔽请求,或者如果他们不了解提示的创建环境,也会将其忽略。最佳做法是仅在首次需要时才请求访问麦克风。用户授予访问权限后,系统不会再次询问他们,但如果他们拒绝授予访问权限,您就无法再请求用户授予权限。

使用 Permission API 检查您是否已拥有访问权限

getUserMedia API 不会告知您是否已经拥有麦克风使用权限。这就带来了一个问题:为了提供漂亮的界面来让用户授予您对麦克风的访问权限,您必须请求对麦克风的访问权限。

在某些浏览器中,可以使用 Permission API 来解决此问题。借助 navigator.permission API,您可以查询访问特定 API 的功能的状态,而无需再次提示。

如需查询您是否有权访问用户的麦克风,可以将 {name: 'microphone'} 传入查询方法,它将返回以下任一项:

  • granted - 用户之前已授权您访问麦克风;
  • prompt - 用户尚未授予您访问权限,当您调用 getUserMedia 时,系统会提示;
  • denied - 系统或用户已明确阻止使用麦克风,您将无法访问麦克风。

现在,您可以快速检查是否需要更改界面,以适应用户需要执行的操作。

navigator.permissions.query({name: 'microphone'}).then(function (result) {
  if (result.state == 'granted') {
  } else if (result.state == 'prompt') {
  } else if (result.state == 'denied') {
  }
  result.onchange = function () {};
});

反馈