Use APICloud to develop app recording function

Time:2022-11-25

The mp3Recorder module is encapsulated in iOS and Android to record and directly generate mp3, which unifies the recording and generation files of the two platforms, facilitates the interaction between the two platforms, and reduces the process of transcoding after the recording is completed; at the same time, it provides a decibel waveform display UI; use this The microphone permission needs to be turned on before the module.
Use APICloud to develop app recording function
Firmware requirements: Android: 4.0 and above iOS: 8.0 and above

This module provides 8 interfaces:

addEventListener video result and sound decibel monitoring;

startRecord start recording

stopRecord stop recording

openVoiceLine displays a linear waveform

closeVoiceLine Close the linear waveform

setDecibels Set the decibel value of the waveform

pauseRecord pause recording

resumeRecord resume recording

For a detailed explanation of the method, see the apicloud platform module development documentation:

https://docs.apicloud.com/Cli…

The following is the detailed implementation process of the code:

<!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()">monitor recording</a>
            <a class="button" tapmode="active" onclick="startRecord()">start recording</a>
            <a class="button" tapmode="active" onclick="pauseRecord()">pause recording</a>
            <a class="button" tapmode="active" onclick="resumeRecord()">resume recording</a>
            <a class="button" tapmode="active" onclick="stopRecord()">stop recording</a>
            <a class="button" tapmode="active" onclick="openVoiceLine()">open curve</a>
            <a class="button" tapmode="active" onclick="closeVoiceLine()">close curve</a>
            <a class="button" tapmode="active" onclick="setDecibels()">Set the decibel value</a>
            <a class="button" tapmode="active" onclick="playAudio()">play recording</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, //channel support: 1 mono channel 2 stereo channel
            sampleRates: 44100, //sample rate
        }, 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, //Whether the background is transparent (click view can be penetrated when transparent)
        }, 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>

Modules are relatively easy to use. You can create applications on the APICloud development platform and add modules directly. After compiling, install them on your mobile phone and use sample codes for testing. It is convenient for developers to use in the process of app development.