87,990
社区成员
发帖
与我相关
我的任务
分享html5 实现本地录音上传功能
最近在做一个农业App 有一个问题上报功能， 需要本地录音并且上传。查了好多资料都是水货， 没有干货。 跪求DEMO实例
...全文
请发表友善的回复…
发表回复
吕阿晶， 2019-04-26
- 打赏
- 举报
(function (exports) {
var MP3Recorder = function (config) {
var recorder = this;
config = config || {};
config.sampleRate = config.sampleRate || 44100;
config.bitRate = config.bitRate || 128;
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({
audio: true
},
function (stream) {
var context = new AudioContext(),
microphone = context.createMediaStreamSource(stream),
processor = context.createScriptProcessor(16384, 1, 1),//bufferSize大小，输入channel数，输出channel数
mp3ReceiveSuccess, currentErrorCallback;
config.sampleRate = context.sampleRate;
processor.onaudioprocess = function (event) {
//边录音边转换
var array = event.inputBuffer.getChannelData(0);
realTimeWorker.postMessage({ cmd: 'encode', buf: array });
};
var realTimeWorker = new Worker('js/worker-realtime.js');
realTimeWorker.onmessage = function (e) {
switch (e.data.cmd) {
case 'init':
log('初始化成功');
if (config.funOk) {
config.funOk();
}
break;
case 'end':
log('MP3大小：', e.data.buf.length);
if (mp3ReceiveSuccess) {
mp3ReceiveSuccess(new Blob(e.data.buf, { type: 'audio/mp3' }));
}
break;
case 'error':
log('错误信息：' + e.data.error);
if (currentErrorCallback) {
currentErrorCallback(e.data.error);
}
break;
default:
log('未知信息：', e.data);
}
};
recorder.getMp3Blob = function (onSuccess, onError) {
currentErrorCallback = onError;
mp3ReceiveSuccess = onSuccess;
realTimeWorker.postMessage({ cmd: 'finish' });
};
recorder.start = function () {
if (processor && microphone) {
microphone.connect(processor);
processor.connect(context.destination);
log('开始录音');
}
}
recorder.stop = function () {
if (processor && microphone) {
microphone.disconnect();
processor.disconnect();
log('录音结束');
}
}
realTimeWorker.postMessage({
cmd: 'init',
config: {
sampleRate: config.sampleRate,
bitRate: config.bitRate
}
});
},
function (error) {
var msg;
switch (error.code || error.name) {
case 'PERMISSION_DENIED':
case 'PermissionDeniedError':
msg = '用户拒绝访问麦客风';
break;
case 'NOT_SUPPORTED_ERROR':
case 'NotSupportedError':
msg = '浏览器不支持麦客风';
break;
case 'MANDATORY_UNSATISFIED_ERROR':
case 'MandatoryUnsatisfiedError':
msg = '找不到麦客风设备';
break;
default:
msg = '无法打开麦克风，异常信息:' + (error.code || error.name);
break;
}
if (config.funCancel) {
config.funCancel(msg);
}
});
} else {
if (config.funCancel) {
config.funCancel('当前浏览器不支持录音功能');
}
}
function log(str) {
if (config.debug) {
console.log(str);
}
}
}
exports.MP3Recorder = MP3Recorder;
})(window);
var MP3Recorder = function (config) {
var recorder = this;
config = config || {};
config.sampleRate = config.sampleRate || 44100;
config.bitRate = config.bitRate || 128;
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({
audio: true
},
function (stream) {
var context = new AudioContext(),
microphone = context.createMediaStreamSource(stream),
processor = context.createScriptProcessor(16384, 1, 1),//bufferSize大小，输入channel数，输出channel数
mp3ReceiveSuccess, currentErrorCallback;
config.sampleRate = context.sampleRate;
processor.onaudioprocess = function (event) {
//边录音边转换
var array = event.inputBuffer.getChannelData(0);
realTimeWorker.postMessage({ cmd: 'encode', buf: array });
};
var realTimeWorker = new Worker('js/worker-realtime.js');
realTimeWorker.onmessage = function (e) {
switch (e.data.cmd) {
case 'init':
log('初始化成功');
if (config.funOk) {
config.funOk();
}
break;
case 'end':
log('MP3大小：', e.data.buf.length);
if (mp3ReceiveSuccess) {
mp3ReceiveSuccess(new Blob(e.data.buf, { type: 'audio/mp3' }));
}
break;
case 'error':
log('错误信息：' + e.data.error);
if (currentErrorCallback) {
currentErrorCallback(e.data.error);
}
break;
default:
log('未知信息：', e.data);
}
};
recorder.getMp3Blob = function (onSuccess, onError) {
currentErrorCallback = onError;
mp3ReceiveSuccess = onSuccess;
realTimeWorker.postMessage({ cmd: 'finish' });
};
recorder.start = function () {
if (processor && microphone) {
microphone.connect(processor);
processor.connect(context.destination);
log('开始录音');
}
}
recorder.stop = function () {
if (processor && microphone) {
microphone.disconnect();
processor.disconnect();
log('录音结束');
}
}
realTimeWorker.postMessage({
cmd: 'init',
config: {
sampleRate: config.sampleRate,
bitRate: config.bitRate
}
});
},
function (error) {
var msg;
switch (error.code || error.name) {
case 'PERMISSION_DENIED':
case 'PermissionDeniedError':
msg = '用户拒绝访问麦客风';
break;
case 'NOT_SUPPORTED_ERROR':
case 'NotSupportedError':
msg = '浏览器不支持麦客风';
break;
case 'MANDATORY_UNSATISFIED_ERROR':
case 'MandatoryUnsatisfiedError':
msg = '找不到麦客风设备';
break;
default:
msg = '无法打开麦克风，异常信息:' + (error.code || error.name);
break;
}
if (config.funCancel) {
config.funCancel(msg);
}
});
} else {
if (config.funCancel) {
config.funCancel('当前浏览器不支持录音功能');
}
}
function log(str) {
if (config.debug) {
console.log(str);
}
}
}
exports.MP3Recorder = MP3Recorder;
})(window);
cn00439805 2017-02-25
- 打赏
- 举报
用第三方的腾讯云上传即可， 一步到位，后台都帮你做了，附demo，前台只需加载uploaderh5V3.js
<!doctype html>
<html lang="zh-cn">
<head>
<title>测试腾讯云上传</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"/>
</head>
<body>
<div class="con">
<a href="javascript:;" id="upBtnId" class="a_demo_three">上传</a>
</div>
<script src="/uploaderh5V3.js"></script>
<script>
var ErrorCode = qcVideo.get('ErrorCode');
ErrorCode.UN_SUPPORT_BROWSE !== qcVideo.uploader.initUGC(
{
upBtnId: "upBtnId",
getSignature: function(argObj, callback){
var url = "http://172.17.0.57:8080/openapi/vod/sign";
$.ajax({
url:url,
dataType:"json",
data:{
f:encodeURIComponent(argObj.f),
ft:encodeURIComponent(argObj.ft),
fs:encodeURIComponent(argObj.fs)
},
success:function(data){
if(data.code === "success"){
callback(data.data.sign);
}
else{
console.log("接口出现错误");
}
}
});
}
,after_sha_start_upload: true
,sha1js_path: 'http://www.chuangleren.com/sha/calculator_worker_sha1.js'
}
, {
onFileUpdate: function (args) {
console.log(args);
},
onFileStatus: function (info) {
console.log('各状态总数' , info);
},
onFilterError: function (args) {
console.log('message:' + args.message + (args.solution ? (';solution==' + args.solution) : ''));
}
}
);
</script>
</body>
</html>
okimaChen 2017-02-24
- 打赏
- 举报
这个是什么额
离子漂浮物 2017-02-17
- 打赏
- 举报
context = new (window.webkitAudioContext || window.AudioContext)();
帮助你，楼主。
文修 2017-02-14
- 打赏
- 举报
楼主你好，
恰好我之前做过类似的功能，加我QQ754475551，我把Demo发给你
本文探讨了前端移动端录音及上传的多种方案，包括HTML5的基本功能、Cordova等中间层技术、微信JSSDK、以及纯前端和服务器端录音的方法。由于浏览器兼容性和iOS限制，推荐使用混合应用开发框架。
