html5 录制mp3音频,支持采样率和比特率设置
13年的时候做过html5录音,一个问题是保存的wav格式文件很大,当初用了一个迂回的方式,上传到服务器后调用 lame 编码器转换,但由于文件大,上传较慢。不得不说,前端技术发展真是日新月异,有人实现了js版本的lame编码器,可以直接在浏览器端录制MP3音频。
lamejs介绍
最初有个开源项目 libmp3lame-js ,直接将 lame 源码编译为 js版本,后来有人基于 libmp3lame 使用 js 进行了重写,就是如今的 lamejs 项目。相比libmp3lame ,自身体积更小,而且能实现更快的编码速度。据介绍说,编码一个132秒长度的音频仅需6.5秒。
录制mp3音频
我对代码进行了梳理和封装,已发布到Github,参见 mp3-recorder。对实现过程有兴趣或对使用lamejs有兴趣的,可以参考我的源码。支持Firefox 及 Webkit浏览器。
采用64kbps比特率,录制一分钟音频长度约为480KB。
调用示例
/*
MP3的采样频率分为 48000 44100 32000 24000 22050 16000 12050 8000 比特率值与现实音频对照(仅供参考)
16Kbps=电话音质
24Kbps=增加电话音质、短波广播、长波广播、欧洲制式中波广播
40Kbps=美国制式中波广播
56Kbps=话音
64Kbps=增加话音(手机铃声最佳比特率设定值、手机单声道MP3播放器最佳设定值)
112Kbps=FM调频立体声广播
128Kbps=磁带(手机立体声MP3播放器最佳设定值、低档MP3播放器最佳设定值)
160Kbps=HIFI高保真(中高档MP3播放器最佳设定值)
192Kbps=CD(高档MP3播放器最佳设定值)
256Kbps=Studio音乐工作室(音乐发烧友适用)
*/ //唯一影响mp3文件大小的参数为 bitRate
//sampleRate 仅供特殊需求的人使用
var recorder = new MP3Recorder({
//numChannels: 1, //声道数,默认为1
//sampleRate: 8000, //采样率,一般由设备提供,比如 48000
bitRate: 64, //比特率,不要低于64,否则可能录制无声音(人声) //录音结束事件
complete: function (data, type) {
//blob为mp3音频数据
var blob = new Blob(data, { type: type });
}
}); //开始录音
recorder.start(onSuccess, onError); //停止录音
recorder.stop(); //暂停录音
recorder.pause(); //恢复录音
recorder.resume();
使用很简单,demo有详细代码,在此就不多说了。
代码下载
写在最后
如果本文或本项目对您有帮助的话,请不吝点个赞。欢迎交流!
html5 录制mp3音频,支持采样率和比特率设置的更多相关文章
- MP3的采样率和比特率
我们听mp3,看电影都会注意到两个参数,常见的有采样率44.1KHz,比特率192Kbps,那么什么是采样率,什么是比特率?他们是什么关系呢?下面就我们就来简单做个解释: 把模拟音频信号转成数字音频信 ...
- HTML5 audio 如何实现播放多个MP3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...
- Android || IOS录制mp3语音文件方法
Android Android Supported Media Formats : http://developer.android.com/guide/appendix/media-formats. ...
- HTML5之Audio音频标签学习
HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. control ...
- HTML5媒体(音频/视频)
摘要: 在HTML5出现之前,web媒体大部分通过Flash来实现.这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等.这就导致HTML5自己开始支持媒体功能.HTML5 DO ...
- HTML5学习笔记 音频
HTML5提供了播放音频的标准. Web上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件比如flash来播放的.然而,并非所有的浏览器都拥有同样的插件. hmt ...
- 【重构前端知识体系之HTML】HTML5给网页音频带来的变化
[重构前端知识体系之HTML]HTML5给网页音频带来的变化 引言 音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件.然而现在,估计一些年轻的开发者都不 ...
- Python 爬取所有51VOA网站的Learn a words文本及mp3音频
Python 爬取所有51VOA网站的Learn a words文本及mp3音频 #!/usr/bin/env python # -*- coding: utf-8 -*- #Python 爬取所有5 ...
- mp3 音频 音乐 tag ID3 ID3V1 ID3V2 标签 读取信息 获得图片 jpeg bmp 图片转换等
mp3 音频 音乐 tag ID3 ID3V1 ID3V2 标签 读取信息 获得图片 jpeg bmp 图片转换(上) MP3文件格式(二)---ID3v2 图:ID3V1标签结构 图:ID3V2标签 ...
随机推荐
- centos 7 用yum安装 mysql
首先centos7 已经不支持mysql,因为收费了你懂得,所以内部集成了mariadb,而安装mysql的话会和mariadb的文件冲突,所以需要先卸载掉mariadb,以下为卸载mariadb,安 ...
- try-catch-finally 引发的奇怪问题
今天,发现我们的一个Windows Service无法正常停止,无奈之下只能杀了进程. 为了找到原因,我在本地进行调试,发现程序里用到了多线程,而代码正是卡在了workThread.Abort()语句 ...
- OC中property的有关属性
property的有关属性: (1)readwrite是可读可写特征:需要生成getter方法和setter方法: (2)readonly是只读特性只会生成getter方法不会生成setter方法: ...
- 墨卡托投影C#实现
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- java注解(Annotation)解析
注解(Annotation)在java中应用非常广泛.它既能帮助我们在编码中减少错误,(比如最常见的Override注解),还可以帮助我们减少各种xml文件的配置,比如定义AOP切面用@AspectJ ...
- java J2EE与DiscuzX3.2的UCenter实现单点登录
最近笔者在实现Java项目对discuz的整合.在此过程中,查了很多这方面的资料,发现网上并没有说得比较全面的文章.笔者博取众长以及自己在此过程中遇到的问题,写下来供大家参考,希望大家可以在这过程中少 ...
- window10系统安装SQL数据库和小蝴蝶的问题
最近刚刚升了windows10系统.由于以前一直使用的是SQL2008数据库,所以也就没有下载最新的数据库,但是在安装的过程中一直提示让重启,重启了很多回也没有用. 在启动SQL2008安装程序的时候 ...
- 8天掌握EF的Code First开发系列之3 管理数据库创建,填充种子数据以及LINQ操作详解
本文出自8天掌握EF的Code First开发系列,经过自己的实践整理出来. 本篇目录 管理数据库创建 管理数据库连接 管理数据库初始化 填充种子数据 LINQ to Entities详解 什么是LI ...
- php中的魔术方法
__construct 构造器是一个魔术方法,当对象被实例化时它会被调用.在一个类声明时它常常是第一件做的事但是没得必要他也像其他任何方法在类中任何地方都可以声明,构造器也能像其他方法样继承.如果我们 ...
- 深入jQuery中的data()
引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...