过滤视频/音频中的静音和停顿，让你的播客内容更加紧凑流畅-唐霜

Hello你好啊，好久不见。过去一段时间【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。，我写博客的次数变得很少，我之前关注的一本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】些博主也逐渐抛弃了博客。一个非常令人沮丧【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】的现象是，现在的朋友们很少再关注博客，因未经授权，禁止复制转载。【原创内容，转载请注明出处】为通过大模型应用，获取知识变得极为便捷，【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。而传统的播客往往依赖搜索引擎，随着大模型【本文首发于唐霜的博客】未经授权，禁止复制转载。的发展，播客的内容被扒光，很多人也就再也转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。没有动力写博客。对我而言，写博客，可能只原创内容，盗版必究。本文作者：唐霜，转载请注明出处。是换一种方式来表达自己，因此，偶尔还是会著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】写一些，这种写作的心态，不去对抗AI抓取转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】的焦虑，仅仅是自己的一种表达。

本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n【作者：唐霜】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

起因

在过去几年里，我其实做了很多期播客。而最未经授权，禁止复制转载。未经授权，禁止复制转载。近，视频播客的形式开始进入大众视野。播客著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。这种内容形式其实非常有意思，特别是严肃内【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。容播客，具有非常强的知识和主观见解。不过本文作者：唐霜，转载请注明出处。【作者：唐霜】，在我已有的播客录制经验中，“停顿”或则【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。是说“暂时的无话可说”会成为非常麻烦的一【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】件事，因为一旦这种沉默时间过长，后期的剪本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。辑会很麻烦，如果在一次节目中，这种沉默出【本文首发于唐霜的博客】【版权所有，侵权必究】现了很多次，剪辑就是灾难。而且经过剪辑的未经授权，禁止复制转载。【作者：唐霜】音频文件会迅速膨胀。因此，过去我基本上不转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。剪辑，停顿就停顿吧，反正我的节目也没有很【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】多人听。

本文作者：唐霜，转载请注明出处。【本文受版权保护】【作者：唐霜】

但是，我发现网上很多其他博主的节目，却显【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。得非常紧凑。仔细慢放可以发现，他们的剪辑原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。频次极高，几乎所有的停顿都被剪掉了。我就本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】在想，难道他们是使用了什么软件吗？经过搜转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。索，我找到了一款autocut的软件可以【本文首发于唐霜的博客】【原创不易，请尊重版权】实现这个功能。到这里，你以为我是来推荐软【原创不易，请尊重版权】【原创内容，转载请注明出处】件的吗？当然不是。这款软件有着非常多功能【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。，而部分功能还要收费，对于我这样的技术党【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。来说，更喜欢web这种即用即走的产品形态【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】。于是，我觉得，复刻该功能。

【本文受版权保护】【本文首发于唐霜的博客】

效果

经过2天的折腾，我完成了剪除静音这个应用【未经授权禁止转载】【未经授权禁止转载】，你可以通过这个链接使用剪除静音这款软件，完全免费，不需要用户登录。让我们先看感【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】受一下使用这款应用前后的对比。

【关注微信公众号：wwwtangshua【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。ngnet】【本文受版权保护】原创内容，盗版必究。【转载请注明来源】

剪除静音前

【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。ngnet】转载请注明出处：www.tangshua【转载请注明来源】本文作者：唐霜，转载请注明出处。ng.net【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

剪除之后

可以听到，剪除之后，所有空白的部分都被剪【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。除了，听起来显得紧凑连贯。

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】【原创内容，转载请注明出处】

这在播客节目的音视频中，更加显得效果明显【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】。

本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshua原创内容，盗版必究。转载请注明出处：www.tangshuang.netngnet】【本文受版权保护】本文版权归作者所有，未经授权不得转载。

而且，对于用户来说，他可以很容易在分析结未经授权，禁止复制转载。【本文首发于唐霜的博客】果图中看到被剪除的时间段，甚至，可以通过【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。点击来避免某些片段被剪除。

未经授权，禁止复制转载。原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】

当然，用户还可以实时点击生成预览，在下载【转载请注明来源】【原创不易，请尊重版权】前确定剪辑是符合预期的。

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。

实现原理

整个应用完全由前端技术实现，没有后端。接【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】下来，聊一聊它的实现原理。

音画剥离

在我们拿到用户上传的视频之后，我们要基于【本文受版权保护】未经授权，禁止复制转载。视频的音频数据来进行分析，因此，如何拿到转载请注明出处：www.tangshuang.net原创内容，盗版必究。视频的音频数据是关键。在这篇文章中提到，对于AudioContext而言著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】，来源是视频还是音频没有区别，也就是说，【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net我们直接把视频的ArrayBuffer丢本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。给AudioContext，最后就能拿到【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】纯音频的数据。

【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。

不过，因为我之前有开发Videa的经验，一开始我就用webav这个库解析【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】视频，所以，我是通过直接向AudioCl【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。ip中塞入视频的文件流，也可以获得音频的【版权所有，侵权必究】【版权所有，侵权必究】数据，而且AudioClip可以直接使用【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】getPCMData来获取pcm数据，这著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。样更方便。

作为开发者，选择任何一种都可以。

【本文受版权保护】【原创内容，转载请注明出处】

波形图和静音分析

我们在计算机中如何表达一份声音信息呢？或转载请注明出处：www.tangshuang.net【版权所有，侵权必究】者说，我们如何将连续的声波信号转化为离散转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net的数值（模数转换）呢？首先，第一个概念叫本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。做“采样（Sampling）”，我们以固【原创不易，请尊重版权】未经授权，禁止复制转载。定的频率对声波进行测量，例如每秒钟测量4【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net4100次，那么采样率（SampleRa【转载请注明来源】未经授权，禁止复制转载。te）就是44100。而每次测量都会得到转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】一个数值，这个数值代表了采样的振幅，也就原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】是声音的强度。把声音的强度用一个数值表示【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】，就是第二个概念“量化”。而Float3【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。2数值表示带小数点的数值，这对精确白送声【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。波振幅很有帮助。通常，这些浮点数会被标准本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】化为-1.0到1.0的范围内，0.0表示本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。静音。这个标准化实际上没有标准，不同的设【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。备可能存在误差。而如果声音有多声道（立体【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】声，双声道），数据通常以交错格式存储，例【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】如，Float32Array中第一个元素【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。是左声道的第一帧，第二个元素是右声道的第本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。一帧，第三个是左声道的第二帧，依此类推。本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】但是，在js中，通常，接口会返回多个Fl著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】oat32Array，每个Float32【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。Array表示一个声道的数据。另外，Fl著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】oat32Array存储的是原始的PCM【转载请注明来源】【版权所有，侵权必究】，也就是未经压缩的音频数据。

我们拿到一个声道的Float32Arra转载请注明出处：www.tangshuang.net【转载请注明来源】y数据之后，就可以基于它的特性，画出一条【本文受版权保护】未经授权，禁止复制转载。在固定范围内来来回回的折线图，它之所以是著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。在固定范围，是因为数据被标准化在-1.0本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】到1.0之间，如果我们使用了一个高度为2【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】0像素的canvas作为画布，那么上面的【转载请注明来源】著作权归作者所有，禁止商业用途转载。10像素画值在0-1之间的点，下面点10【本文首发于唐霜的博客】【版权所有，侵权必究】像素画值在-1～0之间的点，当然，由于我【本文受版权保护】【版权所有】唐霜 www.tangshuang.net们使用简单点lineTo方法，就会让我们著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】的整个图形是一个折线图。而这个图也就是我【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net们音频文件所对应的声波图。

转载请注明出处：www.tangshua未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ng.net转载请注明出处：www.tangshua【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。ng.net未经授权，禁止复制转载。【未经授权禁止转载】

在理解了声波图的原理之后，我们做静音分析未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。就很简单了，总的原则就是找出Float3本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】2Array中，数值靠近0的那些连续的点【原创内容，转载请注明出处】【作者：唐霜】，并且找出它们对应的时间。

转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ng.net未经授权，禁止复制转载。【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】ngnet】【关注微信公众号：wwwtangshua原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netngnet】

dBFS：最大振幅表示为0dBFS，振幅【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】越小dBFS越小，因此，我们只会考虑通过【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】负值的dBFS来控制声音选择，例如我们设转载请注明出处：www.tangshuang.net【转载请注明来源】定 -40dBFS 代表我们会把声音小于【版权所有】唐霜 www.tangshuang.net【转载请注明来源】 -40dBFS 的点标记为要剪除的点

本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。

【本文首发于唐霜的博客】

【本文受版权保护】

最短静音时长：虽然我们会标记 -40dB【未经授权禁止转载】【本文首发于唐霜的博客】FS 的点，但是，这些点必须是连续的点才原创内容，盗版必究。转载请注明出处：www.tangshuang.net能作为我们剪除的目标，最短静音时长就给了【本文受版权保护】【版权所有】唐霜 www.tangshuang.net我们一个标准，例如我们设定为 400ms【本文首发于唐霜的博客】【原创不易，请尊重版权】，那么这些静音点，必须达到连续时长在 4【本文受版权保护】本文作者：唐霜，转载请注明出处。00ms 以上，才能算一段空白，才需要被著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。剪除，低于 400ms 的只能算停顿，不【作者：唐霜】【本文首发于唐霜的博客】被剪除

【转载请注明来源】

本文作者：唐霜，转载请注明出处。

分析窗口：对于一条Float32Arra本文作者：唐霜，转载请注明出处。原创内容，盗版必究。y来说，其实是非常长非常长的，如果每个点本文作者：唐霜，转载请注明出处。【作者：唐霜】都去计算和对比，就显得非常臃肿，因此，我著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。们把整条Float32Array划分为平转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。均的小片段，现在，我们把每一个小片段作为【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】一个点来对待，取这个小片段内所有值的平均本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】值为这个小片段所代表的点的值，再用这个值【转载请注明来源】未经授权，禁止复制转载。去和设定的dBFS值对比。分析窗口的目的著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net是减少运算次数，提升性能。

【本文首发于唐霜的博客】

【作者：唐霜】

原创内容，盗版必究。

另外，我们还可以获取音频的总时长作为参考【原创不易，请尊重版权】【原创不易，请尊重版权】，从而计算出每一个点所对应的时间点。通过【本文受版权保护】未经授权，禁止复制转载。上面这些设计，我们就能分析出这段音频在那本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net些时间段内，是声音比较小的，需要被剪除的原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。。

【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。

效果预览

我们通过静音分析，得到了一组时间片段。其转载请注明出处：www.tangshuang.net原创内容，盗版必究。实就是一个数值，数值每个元素表示一段静音【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。的开始时间和结束时间。有了这个数值之后，原创内容，盗版必究。转载请注明出处：www.tangshuang.net我们就拿着它，对原视频文件进行不断的切割未经授权，禁止复制转载。原创内容，盗版必究。，把这些静音片段对应的部分给裁剪掉，再把【本文受版权保护】转载请注明出处：www.tangshuang.net剩下的拼接在一起，就是最后我们想要的视频【作者：唐霜】原创内容，盗版必究。。

【原创不易，请尊重版权】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

但是，如何实时预览这个结果呢？

Webav提供了av-canvas来实时【本文受版权保护】【作者：唐霜】渲染。它本身通过clip来进行拆分音视频【本文受版权保护】【原创内容，转载请注明出处】，我们只需要使用clip.split接口著作权归作者所有，禁止商业用途转载。【作者：唐霜】就可以进行视频切割。按照一定的逻辑，拆分【转载请注明来源】【原创不易，请尊重版权】后得到一大堆clip，在把这些clip转转载请注明出处：www.tangshuang.net【本文受版权保护】化为sprite，再根据各自的时长进行处原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net理塞进canvas，就可以得到经过剪除后【本文受版权保护】本文作者：唐霜，转载请注明出处。的连续视频实时播放器。

【本文首发于唐霜的博客】未经授权，禁止复制转载。【本文首发于唐霜的博客】

导出音频

通过webav进行导出比较简单，通过它c【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】ombiner的output接口就可以得【版权所有，侵权必究】【原创内容，转载请注明出处】到一个readablestream，再遍【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。历后创建一个blob就可以了。它有两种方未经授权，禁止复制转载。【本文首发于唐霜的博客】式，一种是通过上面的av-canvas，原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net实时预览播放器实例化后，从这个canva【本文受版权保护】【版权所有，侵权必究】s创建combiner来导出，这样可以实【转载请注明来源】【关注微信公众号：wwwtangshuangnet】时预览复用节省资源。还有一种是利用off本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】screensprite，实现离屏渲染，【本文首发于唐霜的博客】【转载请注明来源】这种方式可以脱离界面上渲染后才能导出的窘【版权所有，侵权必究】【版权所有，侵权必究】境，做到没有预览也可以直接导出。

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

但是，webav没有直接导出音频的接口。【版权所有】唐霜 www.tangshuang.net【本文受版权保护】一开始我也被卡住了，直到我再次搜到这篇文章才恍然大悟，虽然webav只能导出视频，【本文受版权保护】【版权所有，侵权必究】但是导出视频的blob之后，读取其arr未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ayBuffer，再塞入AudioCon【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。text，无视其是视频还是音频，也就可以【原创内容，转载请注明出处】未经授权，禁止复制转载。导出音频了。

视频格式转换

在整个设计中，由于使用了webav作为预【作者：唐霜】【版权所有】唐霜 www.tangshuang.net览，而它只支持mp4视频，因此，在进行后【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】续的处理时，先将非mp4格式的视频转换为原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】mp4的视频，就非常重要。在用户点击上传【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。后，通过ffmpeg.wasm将视频格式【本文首发于唐霜的博客】【本文首发于唐霜的博客】进行转换。可是，要接入ffmpeg.wa原创内容，盗版必究。未经授权，禁止复制转载。sm实在是太麻烦了，不仅要准备各种代码、转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net文件，而且要修改服务端的headers配【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。置。在经过一整天的折腾后，才最终完成了接【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】入。而接入后，转换视频格式就显得非常简单【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。了，只需要一条ffmpeg命令就可以完成本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】。

使用链接

点击使用剪除静音工具

结束语

通过这篇，你可以掌握实现一个静音过滤器的【本文受版权保护】著作权归作者所有，禁止商业用途转载。实现思路。很久没有写技术性的文章了，也很【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。难再细致的把每一个细节都写出来，从几年前【原创内容，转载请注明出处】原创内容，盗版必究。开始，就只写思路，没有实现代码了。如果你【作者：唐霜】著作权归作者所有，禁止商业用途转载。在按照这个思路实现时，遇到什么问题，请在转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net下面留言，我们一起讨论。

原创内容，盗版必究。原创内容，盗版必究。

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【本文首发于唐霜的博客】【转载请注明来源】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【作者：唐霜】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【本文受版权保护】原创内容，盗版必究。

2025-08-25 2049

唐霜

过滤视频/音频中的静音和停顿，让你的播客内容更加紧凑流畅

起因

效果