使用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 ...
随机推荐
- rocketmq消息及流程
1.为什么用mq 优势 主要有3个: 应用解耦(降低微服务之间的关联). 异步提速(微服务拿到mq消息后同时工作). 削峰填谷(可以消息堆积) 劣势 系统可用性降低(MQ一旦宕机整个系统不可用) 复杂 ...
- 忘记VMware vcenter的Administrator@vsphere.local密码
忘记VMware vcenter的Administrator@vsphere.local密码的解决办法一. 重置密码:ssh root@192.168.230.100Connecting to 192 ...
- matplotlib画图工具/绘制散点图
绘制散点图 import matplotlib.pyplot as plt fig=plt.figure() ax = fig.add_subplot(111) ax.scatter(x,y, s,c ...
- FreeRTOS --（17）任务通知浅析
转载自https://blog.csdn.net/zhoutaopower/article/details/107467305 在 FreeRTOS 中,还有一个东西也可以用作任务与任务,中断与任务的 ...
- create-react-app的TS支持以及css模块化
开始: 利用官方脚手架,搭建react工程.参考:https://react.docschina.org/docs/create-a-new-react-app.html. 过程: 1.暴露webpa ...
- 浅尝Spring注解开发_自定义注册组件、属性赋值、自动装配
Spring注解开发 浅尝Spring注解开发,基于Spring 4.3.12 包含自定义扫描组件.自定义导入组件.手动注册组件.自动注入方法和参数.使用Spring容器底层组件等 配置 @Confi ...
- 干货 | Nginx 配置文件详解
一个执着于技术的公众号 前言 在前面章节中,我们介绍了nginx是什么.如何编译安装nginx及如何彻底卸载nginx软件. 干货|给小白的 Nginx 10分钟入门指南 Nginx编译安装及常用命令 ...
- C++进阶-3-6-map/multimap容器
C++进阶-3-6-map/multimap容器 1 #include<iostream> 2 #include<map> 3 using namespace std; 4 5 ...
- 好客租房18-jsx阶段总结
JSX 1jsx是react的核心内容 2jsx是在js代码中写HTML结构,是react中声明式的提现 3使用jsx配合嵌入的js表达式,条件渲染,列表渲染,可以描述任意ui结构 4推荐使用cals ...
- layui数据表格搜索
简单介绍 我是通过Servlet传递json给layui数据表格模块,实现遍历操作的,不过数据量大的话还是需要搜索功能的.这是我参考网上大佬代码写出的搜索功能. 实现原理 要实现搜索功能,肯定需要链接 ...