blob与wav、mp3的关系

2023-08-07
786 字约 3 分钟
...

Web MediaRecorder 是 Web API 中的一部分,用于在浏览器中录制音频和视频。它可以捕获音频和视频数据,并将其保存为 Blob 对象。

Blob(二进制大对象)是一种数据类型,用于存储二进制数据。它可以包含任意类型的数据,包括音频、视频、图像等。Blob 对象通常与特定的文件格式相关联。所以,你提到的 WAV 和 MP3 都是常见的音频文件格式。

在使用 MediaRecorder 录制音频后,可以通过调用其 ondataavailable 事件来获取 Blob 数据。这个 Blob 对象可以表示录制的音频数据。接下来,你可以使用这个 Blob 对象对录制的音频进行处理或保存。

对于录制的音频数据而言,它本身不直接与 WAV 或 MP3 格式有关。Blob 只是表示原始的音频数据,并没有指定具体的文件格式。要将 Blob 数据转换为 WAV 或 MP3 格式,需要进行相应的编码操作。

对于 WAV 格式的编码,可以使用 Web API 中的 AudioContext 进行转换。你可以创建一个新的 AudioContext,通过 decodeAudioData 方法将 Blob 数据解码为 PCM 格式的音频数据,然后使用其他库或自定义代码将 PCM 数据编码为 WAV 格式。

对于 MP3 格式的编码,由于 MP3 是一种有损压缩格式,Web API 并不直接支持将 Blob 数据编码为 MP3 格式。你可以使用第三方库,如 LAMEjs 或 libmp3lame.js,来在浏览器中进行 MP3 编码。

总结来说,Web MediaRecorder 返回的 Blob 对象是原始录制的音频数据,可以使用特定的编码库将其转换为 WAV 或 MP3 格式。

react-media-recorder-2

react-audio-voice-recorder

audio-react-recorder

如果您觉得这篇文章有帮助,请点个赞吧~

分享文章

相关文章

更多文章 →
web2024-03-12
手机chrome浏览器真机调试PC端本地的项目_chrome 测试pc端
1.本次实验环境 操作系统: win10 10.0.19042 PC端: 97.0.4692.99(正式版本) (64 位) :Android 10; MIX 2S Build/QKQ1.190828.002 chrome浏览器手机端:96.0.4664.104 2.前期准备 1. 将手机的开发者模式打开,不同手机可能打开的方式不同。(百度自查) 2. 用数据线将手机与电脑进行连接。(注意部分数据线只有充电功能,不能传输数据) 3. 手...
学习
http-网络2026-10-15
OAuth 2.0是什么,以及如何正确接入
一、先从一个需求理解 OAuth 2.0 假设你开发了一个相册整理工具,用户希望它读取某个云盘里的照片。 把云盘密码交给工具,会带来几个问题:工具拿到的权限太大,密码可能泄漏,用户也难以只撤销这个工具的访问。 OAuth 2.0 提供一套 委托授权机制 :用户在云盘自己的页面确认授权,工具取得一个有权限范围和有效期的访问令牌,再用它调用云盘 API。用户的云盘密码不交给工具。 可以把它理解为:给工具一张“限定用途的通行证”。但令牌泄漏同...
学习
前端2026-10-15
前端动画全景指南
一、前端动画到底是什么 前端动画,就是让画面随时间、用户输入或页面状态连续变化。变化的对象可以是按钮的位置、弹窗的透明度、SVG 的线条、Canvas 里的粒子,也可以是三维场景中的镜头。 先把三个问题分开: | 问题 | 常见答案 | | | | | 画什么? | DOM/CSS、SVG、Canvas 2D、GPU 渲染的场景、预制动画素材 | | 怎样变化? | CSS 过渡/关键帧、Web Animations API、逐帧计算、...
学习
flutter2026-10-14
Flutter Android 正式签名实战:生成密钥、配置构建与验证 APK
Flutter Android 正式签名实战:生成密钥、配置构建与验证 APK Android 正式签名不需要购买证书。开发者可以自己生成密钥,用它给 APK 签名;密钥的用途是建立稳定的应用身份。签名有效并不等于应用已经通过商店审核,也不等于应用功能已完成真机验收。 本文面向 Flutter Android 项目,介绍从开发签名切换到独立正式签名的完整流程。应用名称、目录、包名和证书信息均使用通用示例,不包含真实项目密码、私钥、签名指...
学习
flutter2026-10-14
Flutter 新版本发布实战:完整安装包与 Shorebird 热更新
一、先判断该发完整包还是补丁 | 这次改动 | 发布方式 | | | | | Dart 文案、Flutter 页面布局、业务逻辑修复 | 通常可以发布补丁 | | 纯 Dart 依赖变化 | 可以尝试补丁构建,仍需验证兼容性 | | Kotlin、Java、Swift、Objective C 或原生构建配置变化 | 发布完整包 | | 插件的原生实现变化、新增原生插件、权限变化 | 发布完整包 | | 新增或修改打包图片、字体、应用图标...
学习
docker2026-10-08
Qwik 博客全栈 Docker 本地部署实战
1\. 部署目标与服务结构 “整体容器化”是把项目运行需要的服务分别放入容器,再用 Compose 管理网络、配置、数据挂载、健康检查和启动顺序。 | Compose 服务 | 职责 | 本地访问地址 | | | | | | | Node 运行 Qwik,提供 SSR、SSG 页面和博客接口 | | | | Nginx 提供 React 构建产物,并代理管理接口 | | | | Go/Gin 管理接口 | | | | 存储博客与管理端数...

评论

请登录后发表评论

去登录
加载评论中...