解决“浏览器内录制音频无总时长？试试这招！”

前端

2023-04-03 23:40:29

浏览器音频播放器“缺失”总时长？了解问题的根源和解决方法

问题

作为一名音频爱好者或创作者，你是否曾遇到过这样的烦恼：在浏览器中录制音频后，音频播放器上却不见了总时长，进度条也无法正常显示？这不仅令人困惑，也妨碍了我们对音频长度的准确把握，无法方便地进行快进或后退操作。

问题根源：

经过深入探索，我们发现这个问题的根源在于 WebM 格式的音频文件。在浏览器内录制 WebM 格式音频时，默认情况下是没有总时长的。这是因为，浏览器并不会在录制过程中写入总时长信息。

解决方法：

为了解决这个问题，我们需要借助 JavaScript 编解码器。JavaScript 编解码器能够对音频数据进行处理和转换，我们可以在此过程中调整音频的总时长。

具体步骤如下：

创建并初始化 MediaRecorder 对象： 在录制音频之前，我们需要创建一个 MediaRecorder 对象并进行初始化，该对象用于管理音频录制过程。
通过 ondataavailable 事件监听器获取录制到的音频数据： MediaRecorder 对象提供了 ondataavailable 事件监听器，我们可以通过它获取录制到的音频数据。
使用 JavaScript 编解码器对音频数据进行编解码： 获取音频数据后，我们使用 JavaScript 编解码器对它进行编解码。编解码器将音频数据转换成可供浏览器播放的格式。
在编解码过程中设置 Duration 属性： 在编解码过程中，我们可以通过设置 Duration 属性来指定音频的总时长。
将编解码后的音频数据存储或播放： 最后，将编解码后的音频数据存储到文件中或者直接播放即可。

代码示例：

// 创建并初始化一个 MediaRecorder 对象
var recorder = new MediaRecorder(audioStream);

// 通过 ondataavailable 事件监听器监听录制到的音频数据
recorder.ondataavailable = function (event) {
  // 获取录制到的音频数据
  var audioData = event.data;

  // 通过 JavaScript 编解码器对音频数据进行编解码
  var encoder = new WebMDemuxer();
  encoder.init(audioData);
  var duration = encoder.getDuration();

  // 设置音频的总时长
  encoder.setDuration(60000);

  // 将编解码后的音频数据存储到文件中
  var file = new File([encoder.output], "audio.webm");
};

// 开始录制音频
recorder.start();

// 停止录制音频
recorder.stop();