使用APICloud开发app录音功能
mp3Recorder模块封装在iOS、Android下录音直接生成mp3，统一两个平台的录音生成文件，方便双平台之间的交互，减少录音完成后再转码的过程；同时提供分贝波形图显示UI；使用该模块前需要打开麦克风权限。
效果图如下：
固件要求：Android：4.0及以上 iOS：8.0及以上
该模块提供了8个接口：
addEventListener 视频结果和声音分贝监听；
startRecord 开始录音
stopRecord 停止录音
openVoiceLine 显示线性波形图
closeVoiceLine 关闭线性波形图
**setDecibels **设置波形图的分贝值
pauseRecord 暂停录音
resumeRecord 恢复录音
方法详解见apicloud平台模块开发文档：
https://docs.apicloud.com/Client-API/Func-Ext/mp3Recorder
以下是代码的详细实现过程：
<!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) {
alert(JSON.stringify(ret));
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>
模块使用相对比较简单，可以在APICloud开发平台上创建应用并添加直接添加模块，编译后安装到手机上，用示例代码进行测试。方便开发者在app开发的过程中使用。
使用APICloud开发app录音功能的更多相关文章
- APICloud开发App总结(一)
apiCloud app 开发是最近一两年刚刚兴起的一种混合开发方式.常用的模块以原生方式开发好,然后用js进行粘合.组织,完成整个的app的逻辑.这种开发方式极大的提高了软件模块的复用率,加快了ap ...
- apicloud开发app
1.apicloud官网 2.注册登录 3.开发控制台 4.创建应用 5.代码=>svn拉取代码,账号:注册账号的邮箱,密码:获取分支密码中的密码 6.编辑器下载对应的插件或者直接使用apicl ...
- 用APICloud开发iOS App Clip详细教程
App Clip是苹果公司在WWDC20开发者大会上发布的新功能,用户可以只访问应用程序的一小部分,而无需下载整个应用,被称为苹果小程序.本文主要介绍如何通过APICloud开发App Clip. 一 ...
- H5开发APP考题和答案
{ "last_updated": { "$date": 1544276670569 }, "page_count": 1, "a ...
- apicloud 开发环境搭建
之前做过appcan 手机应用的开发,工作需要切换的apicloud , 开发环境的的搭建是开发的第一步,let's go 1新建应用 step1 注册账号 注册apicloud 账号:https ...
- 跨端开发技术 | 拼团商城项目同时开发app和小程序的要点
此项目为拼团商城类型,主要功能包括商品分类.商品详情.商品搜索.拼团.订单管理等. 项目源码在 https://github.com/apicloudcom/group-ec 仓库的 widget 目 ...
- MUI开发APP，scroll组件，运用到区域滚动
最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...
- 如何优雅的使用vue+vux开发app -03
如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...
- 如何优雅的使用vue+vux开发app -02
如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...
随机推荐
- Http GET 请求参数中文乱码
两种解决方式 第1种:代码里转换 String name = request.getParamter("name"); String nameUtf8 = new String(n ...
- 眼见不一定为实：调用链HBase倾斜修复
hello,大家好,我是小楼. 今天给大家分享一个关于HBase数据倾斜的排查案例,不懂调用链?不懂HBase?没关系,看完包懂~ 背景 最近HBase负责人反馈HBase存储的调用链数据偶尔出现极其 ...
- input 相关
1.label 标签 for 属性同 input 标签 id 属性联系之一
- 手动验证 TLS 证书
证书结构 我们现在使用的 TLS 证书的标准是 X.509,版本号为 V3.版本号可从证书的 Version 字段看到. 根据 RFC 3280 定义的证书结构,证书由三个部分组成: 证书主体(TBS ...
- jenkins插件Role-based添加账号后显示红色"No type prefix"
jenkins插件Role-based添加账号save后,前面显示红色"No type prefix",不影响使用. 查了下原因,网上很少正解,我这里记录下正确的方法: 添加用户: ...
- Spark: 单词计数(Word Count)的MapReduce实现(Java/Python)
1 导引 我们在博客<Hadoop: 单词计数(Word Count)的MapReduce实现 >中学习了如何用Hadoop-MapReduce实现单词计数,现在我们来看如何用Spark来 ...
- 题解 P3831 [SHOI2012]回家的路
什么叫分层图最短路,我不会/kk 感觉自己做法和其他题解不大一样所以过来发篇题解了. 未刻意卡常拿下最优解 题目大意 就是说给你一个 \(n \times n\) 的网格图和 \(m\) 个可换乘点, ...
- Solon 1.8.0 发布，云原生微服务开发框架
相对于 Spring Boot 和 Spring Cloud 的项目 启动快 5 - 10 倍 qps 高 2- 3 倍 运行时内存节省 1/3 ~ 1/2 打包可以缩小到 1/2 ~ 1/10(比如 ...
- Codeforces Round #746
挺喜欢这场题目的 A: 水,不写了 B: Hemose Shopping 嘲讽自己一下啦~真的是caii 题意:一个数列,我们通过交换两个点(两点满足距离大于等于\(x\)),问能否排序成功. 思路: ...
- [USACO2021DEC] HILO 踩标做法
[USACO2021DEC] HILO Solution 参考自 官方题解 里提到的一篇 Obliteration.pdf,但是里面作者写出了极多错误...然后式子还错错得对了. 令 \(y=n-x\ ...