• 使用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开发的过程中使用。

  • 相关阅读:
    七分钟交友匿名聊天室源码
    大厂程序员:杭州小公司给不了40k?网友群嘲
    技术成长之路:人工智能
    西安某1000M3浮顶油罐设计(成品油库1000m³油罐设计与制造工艺)
    一键搞定centos7的docker+selenium+appium+jenkins+android_app源码打包成apk的环境搭建
    Django之视图层
    K8s-Helm
    linux 硬盘坏道检测
    Vue之路由及Node.js环境搭建(一起探索新事物)
    高考计算机专业 热门专业方向
  • 原文地址:https://www.cnblogs.com/tetetete/p/16467309.html