实例介绍
【实例简介】
【实例截图】
【核心代码】
<!doctype html>
<html>
<head>
<title>mp3录音示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<style type="text/css">
.container { width: 300px; margin: 100px auto 0; }
.button-box { text-align: center; }
#time { font-size: 16px; text-align: center; padding: 5px 0; }
#audio { text-align: center; }
</style>
</head>
<body>
<div class="container">
<div class="button-box">
<input type="button" id="button" value="开始录音" />
</div>
<div id="time"></div>
<div id="download"></div>
<div id="audio"></div>
</div>
<script type="text/javascript" src="js/recorder.js"></script>
<script>
/*
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音乐工作室（音乐发烧友适用）
*/
function get(id) {
return document.getElementById(id);
}
var URL = window.URL || window.webkitURL;
var elButton = get("button"),
elTime = get("time"),
elDownload = get("download"),
elAudio = get("audio");
//唯一影响mp3文件大小的参数为 bitRate
//sampleRate 仅供特殊需求的人使用
var recorder = new MP3Recorder({
//numChannels: 1, //声道数,默认为1
//sampleRate: 8000, //采样率,一般由设备提供,比如 48000
bitRate: 64, //比特率,不要低于64,否则可能录制无声音（人声）
//录音结束事件
complete: function (data, type) {
var blob = new Blob(data, { type: type }),
url = URL.createObjectURL(blob),
mp3Name = 'recording_' Date.now() '.mp3';
elDownload.innerHTML = '<a href="' url '" download="' mp3Name '">' mp3Name '</a>';
elAudio.innerHTML = '<audio controls src="' url '"></audio>';
}
});
var isStart = true, time = 0, timer;
//更新计时器
function updateTimer() {
elTime.innerHTML = "计时：" ( time);
}
//更新按钮
function updateButton() {
isStart = !isStart;
elButton.value = isStart ? "开始录音" : "停止录音";
}
//输出错误信息
function writeError(msg) {
elAudio.innerHTML = msg;
}
if (!recorder.support) writeError("您的浏览器不支持HTML5录音！");
elButton.onclick = function () {
if (!recorder.support) return;
if (isStart) {
time = 0;
//开始录音
recorder.start(function () {
updateButton();
timer = setInterval(updateTimer, 1000);
}, function (e) {
switch (e.code || e.name) {
case 'PERMISSION_DENIED':
case 'PermissionDeniedError':
writeError('用户拒绝提供设备。');
break;
case 'NOT_SUPPORTED_ERROR':
case 'NotSupportedError':
writeError('浏览器不支持硬件设备。');
break;
case 'MANDATORY_UNSATISFIED_ERROR':
case 'MandatoryUnsatisfiedError':
writeError('无法发现指定的硬件设备。');
break;
default:
writeError('无法打开麦克风。异常信息:' (e.code || e.name));
break;
}
});
} else {
//停止录音
recorder.stop();
if (timer) clearInterval(timer);
updateButton();
}
};
</script>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论