mp3Recorder模块demo示例

52yaoer

mp3Recorder模块封装在iOS、Android下录音直接生成mp3，统一2个平台的录音生成文件，方便双平台之间的交互，减少录音完成后再转码的过程；同时提供分贝波形图显示UI。

点击进入模块详情

<!DOCTYPE html>
<html>
<head>
<title>Module Develop</title>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<style type="text/css">
html,
body {
height: 100%
}
body {
background-color: #fff;
margin: 0;
}
#wrap {
height: 100%;
position: relative;
}
#header {
padding-top: 20px;
background-color: #5082c2;
height: 44px;
position: relative;
}
#header h1 {
font-size: 20px;
height: 44px;
line-height: 44px;
margin: 0em;
color: #fff;
margin-left: 100px;
margin-right: 100px;
text-align: center;
}
#main {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
}
a.button {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
height: 32px;
margin: 8px;
background-color: rgba(240, 240, 240, 1.0);
border-color: rgba(220, 220, 220, 1.0);
border-width: 2px;
border-style: solid;
}
a.active {
background-color: rgba(240, 240, 240, 0.7);
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a class="button" tapmode="active" onclick="_addEventListener()">监听录音</a>
<a class="button" tapmode="active" onclick="startRecord()">开始录音</a>
<a class="button" tapmode="active" onclick="pauseRecord()">暂停录音</a>
<a class="button" tapmode="active" onclick="resumeRecord()">恢复录音</a>
<a class="button" tapmode="active" onclick="stopRecord()">停止录音</a>
<a class="button" tapmode="active" onclick="openVoiceLine()">打开曲线</a>
<a class="button" tapmode="active" onclick="closeVoiceLine()">关闭曲线</a>
<a class="button" tapmode="active" onclick="setDecibels()">设置分贝值</a>
<a class="button" tapmode="active" onclick="playAudio()">播放录音</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</body>
<script>
apiready = function() {
}
var mp3Path;
function _addEventListener() {
var demo = api.require('mp3Recorder');
demo.addEventListener(function(ret, err) {
if (ret.evenType == 'endRecord') {
mp3Path = ret.data.path;
}
api.toast({
msg: JSON.stringify(ret)
});
});
}
function startRecord() {
var demo = api.require('mp3Recorder');
demo.startRecord({
channel: 2, //声道支持:1 单声道 2 立体声道
sampleRates: 44100, //采样率
}, function(ret, err) {
api.toast({
msg: JSON.stringify(ret)
});
});
}
function pauseRecord() {
var demo = api.require('mp3Recorder');
demo.pauseRecord(function(ret, err){
api.toast({ msg: JSON.stringify(ret) });
});
}
function resumeRecord() {
var demo = api.require('mp3Recorder');
demo.resumeRecord(function(ret, err){
api.toast({ msg: JSON.stringify(ret) });
});
}
function stopRecord() {
var demo = api.require('mp3Recorder');
demo.stopRecord(function(ret, err) {
api.toast({
msg: JSON.stringify(ret)
});
});
}
function openVoiceLine() {
var demo = api.require('mp3Recorder');
demo.openVoiceLine({
rect: {
x: 0,
y: 0,
w: api.frameWidth,
h: api.frameHeight / 3
},
fixedOn: api.frameName,
fixed: true,
isTransparent: false, //背景是否透明(透明时可以穿透点击视图)
}, function(ret, err) {
alert(JSON.stringify(ret));
});
}
function closeVoiceLine() {
var demo = api.require('mp3Recorder');
demo.closeVoiceLine(function(ret, err) {
api.toast({
msg: JSON.stringify(ret)
});
});
}
function setDecibels() {
var demo = api.require('mp3Recorder');
var random = getRandom(0, 60);
demo.setDecibels({
decibel: random
}, function(ret, err) {
api.toast({
msg: JSON.stringify(ret)
});
});
}
function getRandom(min, max) {
var r = Math.random() * (max - min);
var re = Math.round(r + min);
re = Math.max(Math.min(re, max), min)
return re;
}
function playAudio() {
api.startPlay({
path: mp3Path
}, function(ret, err) {
});
}
</script>
</html>

复制代码

互睿科技

如何设置录制时间

52yaoer

自己弄一个定时器。。

zuishizhi

版主，那个设置分贝值具体是有什么作用

52yaoer

你可以做曲线动态展示咯。。

莱茵特音来

怎么var demo = api.require('mp3Recorder') 里的demo是undefined？
我的是webapp，还没有购买授权，是测试版
audioRecorder可以使用，但这个不行，是什么原因呢？

52yaoer

要native

惯装魔神 · 回复于2019-10-20 17:12:27

支持一下

兄弟

不错的模块！

jackieWang126

java.lang.NullPointerException: Attempt to invoke virtual method \'void com.clam314.lame.DataEncodeThread.addChangeBuffer(short[], int)\' on a null object reference\n\tat com.clam314.lame.Mp3Recorder$1.run(Mp3Recorder.java:116)\n\tat java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)\n\tat java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)\n\tat java.lang.Thread.run(Thread.java:833)\n

使用中发现部分机型会报错，麻烦看看