​

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录音功能的更多相关文章

  1. APICloud开发App总结(一)

    apiCloud app 开发是最近一两年刚刚兴起的一种混合开发方式.常用的模块以原生方式开发好,然后用js进行粘合.组织,完成整个的app的逻辑.这种开发方式极大的提高了软件模块的复用率,加快了ap ...

  2. apicloud开发app

    1.apicloud官网 2.注册登录 3.开发控制台 4.创建应用 5.代码=>svn拉取代码,账号:注册账号的邮箱,密码:获取分支密码中的密码 6.编辑器下载对应的插件或者直接使用apicl ...

  3. 用APICloud开发iOS App Clip详细教程

    App Clip是苹果公司在WWDC20开发者大会上发布的新功能,用户可以只访问应用程序的一小部分,而无需下载整个应用,被称为苹果小程序.本文主要介绍如何通过APICloud开发App Clip. 一 ...

  4. H5开发APP考题和答案

    { "last_updated": { "$date": 1544276670569 }, "page_count": 1, "a ...

  5. apicloud 开发环境搭建

     之前做过appcan 手机应用的开发,工作需要切换的apicloud , 开发环境的的搭建是开发的第一步,let's go 1新建应用 step1  注册账号 注册apicloud 账号:https ...

  6. 跨端开发技术 | 拼团商城项目同时开发app和小程序的要点

    此项目为拼团商城类型,主要功能包括商品分类.商品详情.商品搜索.拼团.订单管理等. 项目源码在 https://github.com/apicloudcom/group-ec 仓库的 widget 目 ...

  7. MUI开发APP，scroll组件，运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

  8. 如何优雅的使用vue+vux开发app -03

    如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...

  9. 如何优雅的使用vue+vux开发app -02

    如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...

随机推荐

  1. 【审视】Scrum Master的检查清单

    一般情况下,一个Scrum Master如果更多的是做组织会议.确保时间盒以及对流程中的障碍快速响应等事项的话,可以同时引导2-3个团队.在这种情况下,团队会在降低问题发生率的基础上提高一定的绩效. ...

  2. [STL] queue 队列 priority_queue 优先队列

  3. vue 列表过滤和排序

    <body> <div id="root"> <h1>员工列表</h1> <input type="text&quo ...

  4. 3D打印CLI文件格式的读取

    CLI 英文全称:COMMON LAYER INTERFACE 中文名称:通用层接口. 推荐从官方网址看一下其完整的内容: (https://www.hmilch.net/downloads/cli_ ...

  5. 8 种常见 SQL 错误用法

    点击上方"开源Linux",选择"设为星标"回复"学习"获取独家整理的学习资料! 1.LIMIT 语句 分页查询是最常用的场景之一,但也通常 ...

  6. PHP代码审计之SQL注入

    代码审计之SQL注入 SQL注入攻击(SQLInjection),是攻击者在表单中提交精心构造的sql语句,改变原来的sql语句,如果web程序没有对提交的数据经过检查,那么就会造成sql注入攻击. ...

  7. jenkins插件Role-based添加账号后显示红色"No type prefix"

    jenkins插件Role-based添加账号save后,前面显示红色"No type prefix",不影响使用. 查了下原因,网上很少正解,我这里记录下正确的方法: 添加用户: ...

  8. Docker容器（container）详解 (转载自http://c.biancheng.net/view/3150.html）

  9. SpringBoot线程池

    1.遇到的场景 提高一下插入表的性能优化,两张表,先插旧的表,紧接着插新的表,若是一万多条数据就有点慢了 2.使用步骤 用Spring提供的对ThreadPoolExecutor封装的线程池Threa ...

  10. Git标签用法

    我们通常会在项目开发到一定阶段时给代码打上标签. 1.Git查看所有标签及其描述信息 git tag -l -n 2.Git创建标签 创建标签并添加描述信息 git tag -a v1.0.0 -m ...