我正在开发一个需要流式传输和同步多个音频文件的Web应用程序.为此,我使用 Web Audio API over HTML5音频标签,因为定时音频的重要性.

目前,我正在使用FFMPEG的分段功能将音频文件编码并分段为更小的块.我分割它们的原因是我可以从文件中间开始流式传输而不是从头开始(否则我只是使用UNIX split,as shown here分割文件.问题是当我对音频片段进行分组时回到一起,我得到段之间的音频流行音乐.

如果我在.wav文件中使用PCM编码(pcm_s24le)对段进行编码,则回放是无缝的,这使我相信编码器正在填充文件的开头或结尾.由于我将处理许多不同的音频文件,使用.wav将需要太多的带宽.

我正在寻找以下解决方案之一:

>如何无缝分割编码的音频文件,
>如何强制编码器使用ffmpeg(或其他实用程序)填充音频帧,或者
>在不使用音频标签的情况下,流式传输音频(从任意音轨时间开始)的更好方法是什么?

系统信息

>自定义node.js服务器
>上传音频文件后,node.js将数据传输到ffmpeg的编码器中
>需要使用HTML5 Web Audio API支持的编码
>服务器通过WebSockets套接字一次发送1个音频块

提前致谢.我试图尽可能清楚,但如果你需要澄清,我会非常愿意提供它.

解决方法

由于PCM是未压缩格式,因此需要无缝播放.没有什么可以造成故障.如果你使用像flac这样的无损编解码器,也会发生同样的事情.另一方面,如果你使用任何有损的编解码器,如mp3,wma等…没有任何干预就没有办法避免毛刺.例如,WMA解码器将始终为您提供比编码时最初提供的PCM更多的PCM.额外的字节会产生一个小故障,它也会搞砸持续时间.此外,这种连续播放(剪切列表)的持续时间应该更长.您可以尝试通过一些DSP过滤来平滑毛刺.你甚至可以尝试一些简单的动作,比如交叉渐变转换等等.也许它会给出一些有用的结果.

如果由于带宽而无法接受某些无损编解码器,则另一种方法是创建具有有损编解码器(如mp3)的压缩文件,并从计算位置开始流式传输.当然,你不能像在PCM中那样准确地搜索样本,并且你会在解码时获得少量无用的PCM,因为你将开始解码中间的压缩数据而没有解码器所需的“先前数据”.我建议在编码此类文件时保持恒定比特率,因为在开始流式传输之前,您将能够在压缩文件中计算更准确的搜索位置.

关于这里的故障,如果你开始编码这样的mp3文件,你创建这些文件而不停止编码器,那么在切换文件时不会出现任何故障,因为你只是将压缩数据分成更多的文件.当然,您可能需要自己实现.

html5 – 当我重构音频文件时,如何编码和分割音频文件而不会在各段之间出现间隙(或音频弹出)?的更多相关文章

  1. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

  5. HTML5实现直播间评论滚动效果的代码

    这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  7. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  8. HTML5录音实践总结(Preact)

    这篇文章主要介绍了HTML5录音实践总结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  10. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部