## 概述本文会讲述 Web Audio API 以及音频剪切等几种实现精准控制音频播放的方案，同时讲述了一些前端二进制、音频以及 node 服务端的知识。 ## 背景产品要实现上传视频自动生成字幕，可以调整每条字幕的打轴时间，具体产品效果类似下图[火山视频翻译](https://translate.volcengine.com/transtudio)。 ![火山视频翻译](https://p3-scmimg.bytescm.com/tos-cn-i-rn3s1tazwm/lab/mt-portal/mt-portal-fe/static/image/AiSpooling.6156ade9.png~tplv-rn3s1tazwm-resize:0:0:q80.image#?w=1500\&h=972\&s=377807\&e=png\&a=1\&b=ffffff) 我们调整前端的字幕时间轴后，可以对单条的字幕进行播放试听以验证调整的是否准确，我们采用的方案是让视频进度跳转至指定开始时间播放，然后轮询至结束时间停止。但是发现在播放视频的指定时间段时，无法在指定时间段的结束时间精准停止播放。 ## 实现方案要播放指定的时间范围，那么有两个时间点我们需要关注： * 开始时间：开始时间很简单，播放前先改变一下 `audio` 起始播放时间就可以 * 结束时间：误差都是出现在结束时间的控制上，所以我们要找**准确控制播放的核心点，就在于找到一个合适的时机控制播放结束** ### 使用 audio 标签播放在 web 端播放视频，我们很容易联想到使用 `audio` 标签，开始播放时，只需要先改变 `audio.currentTime`，然后再执行 `play()` 方法就可以: import React, { useState, useRef } from 'react'; import { Button } from '@arco-design/web-react'; export default function UseAudio() { const audioRef = useRef(null); const [startTime, setStartTime] = useState(10); // 开始播放时间 const [endTime, setEndTime] = useState(20); // 结束播放时间 // 开始播放音频 const handleClickPlay = () => { (audioRef.current as HTMLAudioElement).currentTime = startTime; audioRef.current?.play(); }; return (

); } 那么结束播放时间我们如何处理呢？ #### 方案一：onTimeUpdate（最初版） `audio` 不支持直接传入结束时间，但它提供 `onTimeUpdate` 方法去监听事件的改变，我们可以监听到 `audio.currentTime` 大于 `endTime` 时，就停止播放： // ... export default function UseAudio() { // ... // 监听 timeUpdate 到达结束时间时停止播放 const handleTimeUpdate: React.ReactEventHandler = () => { console.log((audioRef.current as HTMLAudioElement).currentTime); if ((audioRef.current as HTMLAudioElement).currentTime > endTime) { audioRef.current?.pause(); } }; return (

); } 我们在 `handleTimeUpdate` 方法中打印了 `audio.currentTime`，这样我们可以通过控制台来观察 `onTimeUpdate` 的执行频率是多少： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0bb51d55bcf9474f81e1570cbb99ae6f~tplv-k3u1fbpfcp-zoom-1.image#?w=810\&h=580\&s=104214\&e=png\&b=fefefe) 通过控制台打印的数据我们可以观察到，打印的前后时间大概在 `250ms` 左右，这说明在极差的 case 下，音频的播放误差也会达到 `250ms` 甚至更多。显然这个误差完全不能满足我们高精准的需求，也因此这一版的音频播放屡遭诟病，我们不得不对此进行升级。 #### 方案二：setInterval（升级版）既然 `onTimeUpdate` 的执行间隔太长，顺着这个思路我们可以想到换一个执行间隔较短的方法去监听 —— 定时器。我们通过一个 `setInterval` 去监听事件的改变： // interval 监听更新 useEffect(() => { const timer = setInterval(() => { if ((audioRef.current as HTMLAudioElement).paused || (audioRef.current as HTMLAudioElement).ended) { // 非播放状态下直接返回 return; } console.log((audioRef.current as HTMLAudioElement).currentTime); if ((audioRef.current as HTMLAudioElement).currentTime > endTime) { audioRef.current?.pause(); } }, 4); return () => { clearInterval(timer); }; }, []); 从控制台的打印结果来看，`setInterval` 的执行间隔已经很短了，可以达到 `4ms` 左右，这个误差人耳几乎难以分别了： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb4bb9d541734331971a219eb5dae3f2~tplv-k3u1fbpfcp-zoom-1.image#?w=816\&h=748\&s=128203\&e=png\&b=fefefe) 但是我们可以看到，在部分极差 case 下，它的误差会达到 `20ms`，而且上图是我在一个很简单的 demo 页面打印结果，如果随着页面逻辑的增加和性能的降低，这个误差会进一步扩大，甚至到达几百毫秒。而 bytelingo 后台的字幕编辑页面代码多达近万行，逻辑复杂，在2小时以上的音视频下，`setInterval` 的执行间隔经常会在几十毫秒，这个误差依然不能满足我们的要求，需要再进一步优化。 ### 使用 Web Audio API 播放 #### 前置知识 —— Web Audio API [Web Audio API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API) 提供了在 Web 上控制音频的一个非常有效通用的系统，mdn 上对其有这样一段描述： > 使用这个 API，时间可以被非常精确地控制，几乎没有延迟，这样开发人员可以准确地响应事件，并且可以针对采样数据进行编程，甚至是较高的采样率。基于这个特性，我们可以尝试使用 Web Audio API 来监听音频的播放进程，播放到结束时间点时来结束播放。首先我们来了解一下一些常用的 Web Audio API 作为前置知识，以便于更好地理解本文后续的内容。 ##### AudioContext 和 AudioNode `AudioContext` 可以创建一个**音频上下文**，它**控制其内部节点的创建、音频处理或解码的执行**。其内部包含一系列的音频节点 `AudioNode` ，音频节点通过它们的输入输出相互连接，形成一个链或者一个简单的网。如下图所示： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8ccb36407594e97a17a8470d8157e4e~tplv-k3u1fbpfcp-zoom-1.image#?w=643\&h=143\&s=10613\&e=png\&b=ffffff) Inputs、Effects、Destination 都属于 AudioNode，Inputs 往往是一个或者多个音频源（包括 [AudioBufferSourceNode](https://developer.mozilla.org/zh-CN/docs/Web/API/AudioBufferSourceNode)、[MediaElementAudioSourceNode](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaElementAudioSourceNode)、[AudioDestinationNode](https://developer.mozilla.org/en-US/docs/Web/API/AudioDestinationNode) 等类型），中间的 Effects 可以是中间处理模块 [BiquadFilterNode](https://developer.mozilla.org/zh-CN/docs/Web/API/BiquadFilterNode) 或者音量控制器如 [GainNode](https://developer.mozilla.org/zh-CN/docs/Web/API/GainNode) 等等，最终声音处理完成之后连接到一个目的地`AudioContext.destination`，这个目的地负责把声音数据传输给扬声器或者耳机。 ##### Web Audio Api 介绍（一） AudioContext 上面有一系列的属性和方法，我们简单介绍一些较为常用的： * [AudioContext.createMediaElementSource()](https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext/createMediaElementSource)：方法用于创建一个新的 `MediaElementAudioSourceNode` 对象，它可以将一个 html `