使用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 ...
随机推荐
- IOC容器--1.12. 基于 Java 的容器配置
用Java的方式配置Spring ,不使用Spring的XML配置,全权交给Java来做 JavaConfig是Spring的一个子项目,在Sring 4 之后成为核心功能 这种纯Java的配置方式 ...
- 【题解】2021CSP-J2T3网络连接
目录 题目链接 题目分析 是否重复 读入提取数 非法情况判断 参考代码 题目链接 题目分析 map不会冲突!!不一定要like代码中那样加-号! 模拟,算不上大, 首先,我们想想整个流程: 现在,我们 ...
- 使用VLL技术实现多家合作伙伴复用同一条链路做两端数据全透传
公司A当前租用一条10G跨市运营商光缆,自身业务只用到一半流量,为节省成本,寻求多家合作伙伴共用链路以达到财务需求 合作伙伴需求接入链路全透传,即光缆两端接入点端口逻辑直连 当前有三种方案可以实现上述 ...
- Mock 之搭建本地 MockJs
Mock 之搭建本地 MockJs 一.目的 模拟后端接口 二.发请求 1. install npm install axios 2. 配置 src/utils/request.js import a ...
- 每天一个 HTTP 状态码 205
205 Reset Content 205 Reset Content 表示服务器成功地处理了客户端的请求,要求客户端重置它发送请求时的文档视图.这个响应码跟 204 No Content 类似,也不 ...
- pip下载更改为清华镜像
step1: + 在user(用户)下新建一文件夹再在该文件夹下新建pip.ini文件 + 例如:user/pip/pip.ini + tips:如果未打开在查看里的隐藏扩展名记得打开 step2: ...
- 初识 Redis 以及其基本使用方法
1.什么是Redis redis 是一个高性能的key-value数据库,它支持的类型更多 包括 string(字符串).list(链表).set(集合).zset(sorted set --有序 ...
- ptorch常用代码梯度篇（梯度裁剪、梯度累积、冻结预训练层等）
梯度裁剪(Gradient Clipping) 在训练比较深或者循环神经网络模型的过程中,我们有可能发生梯度爆炸的情况,这样会导致我们模型训练无法收敛. 我们可以采取一个简单的策略来避免梯度的爆炸,那 ...
- 对 Python 中 GIL 的一点理解
GIL(Global Interpreter Lock),全局解释器锁,是 CPython 为了避免在多线程环境下造成 Python 解释器内部数据的不一致而引入的一把锁,让 Python 中的多个线 ...
- JavaSE_多线程入门 线程安全 死锁 状态 通讯 线程池
1 多线程入门 1.1 多线程相关的概念 并发与并行 并行:在同一时刻,有多个任务在多个CPU上同时执行. 并发:在同一时刻,有多个任务在单个CPU上交替执行. 进程与线程 进程:就是操作系统中正在运 ...