使用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 ...
随机推荐
- SQL语言详解
SQL 1. 概述 Structured Query Language 结构化查询语言 结构化查询语言(Structured Query Language)简称SQL,是一种数据库查询和程序设计语言, ...
- python自动化测试工具selenium使用指南
概述 selenium是网页应用中最流行的自动化测试工具,可以用来做自动化测试或者浏览器爬虫等.官网地址为:https://www.selenium.dev/.相对于另外一款web自动化测试工具QTP ...
- lab_0 清华大学ucore实验环境配置详细步骤！（小白入）
实验步骤 1.下载项目 从github上 的https://github.com/kiukotsu/ucore下载 ucore lab实验: git clone https://github.com/ ...
- Linux文本工具-cat-cut-paste；文本分析-sort-wc-uniq
1.1 查看文本文件内容 cat 1.1.1 cat可以查看文本内容 cat [OPTION]... [FILE]... 常见选项 -E: 显示行结束符$ -A: 显示所有控制符 -n: 对显示出的 ...
- 《C++Primary》阅读简要总结
三月份的主要任务之一就是阅读C++Primary这本书,终于在昨天25号下午完成了基础部分的阅读,算是对基础知识整体梳理了一遍,开始看这本书大概可以追溯到去年12月份,在那之前看了C++的入门书籍&l ...
- 如何用好Nginx的gzip指令
说一段废话 压缩响应数据有什么作用呢?问的好:从用户体验和IT成本两方面回答这个问题: 用户体验上 网速一定的情况下,传输10MB数据比传输5MB数据的时间快了一半.所以传输数据越小用户加载页面就越快 ...
- go 语言开发2 简易数据库和web代码示例
数据库开发示例 package dao import ( "github.com/go-xorm/xorm" "fmt" ) type UserInfo str ...
- Linux磁盘和文件系统知识总结
硬盘操作 为什么要给硬盘分区? 如果你需要在一块硬盘上用到多个文件系统,那么你就需要对硬盘进行分区,以便用不同的分区支持不同的文件系统.(但一个硬盘只能有一个分区表!)反过来说,如果你整块硬盘都用同样 ...
- 一些GIT操作的技巧
一.git stash 我们有时会遇到这样的情况,正在分支a上开发一半,然后分支b上发现Bug,需要马上处理.这时候分支a上的修改怎么办呢,git add 是不行的,有的git客户端版本会提示还有ad ...
- 脚踏实地的Netty源码研究笔记——开篇
1. 脚踏实地的Netty源码研究笔记--开篇 1.1. Netty介绍 Netty是一个老牌的高性能网络框架.在众多开源框架中都有它的身影,比如:grpc.dubbo.seata等. 里面有着非常多 ...