h5实现录音功能

h5实现录音功能_第1张图片


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>录音title>
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/[email protected]/lib/index.css">
    
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js">script>
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js">script>
    
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js">script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js">script>
    <script src="https://cdn.suoluomei.com/common/js2.0/npm/[email protected]/lib/vant.min.js">script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
head>
<style>
    html {
        background: #fff;
    }

    .foot_record_box {
        position: fixed;
        bottom: 0;
        /* height: 200px; */
        width: 100%;
        /* border-top:1px solid red; */
    }

    .foot_top {
        position: relative;
        display: flex;
        justify-content: center;
        text-align: center;
        height: 50px;
        line-height: 50px;
        background: #fff;
        border-top: 1px #eee solid;
        font-weight: 600;
    }

    .foot_record {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 12rem;
        background: #eee;
    }

    .record_bnt {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #0084bf;
        border: 4px solid #fff;
    }

    .record_bnt_ing {
        text-align: center;
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 50%;
        border: 2px solid #fff;
        background: #fff;
    }

    .record_play {
        position: absolute;
        top: 20%;
        left: 10%;
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        border-radius: 50%;
        border: 2px #fff solid;
        background: #eee;
        color: #0084bf;
    }

    .record_anew {
        position: absolute;
        top: 20%;
        right: 10%;
        width: 2.5rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        border-radius: 50%;
        border: 2px #fff solid;
        background: #eee;
        color: #0084bf;
    }

    .commer {
        background: #fff;
        padding: 10px;
        margin: 10px;
        box-shadow: 1px 1px 10px 9px #eee;
    }

    .top {
        padding: 1rem 1rem 0 1rem;
        box-sizing: border-box;
    }

    .time {
        position: absolute;
        right: 5px;
        top: 2px;
    }

    .timeNum {
        color: #0084bf;
        font-weight: 600;
    }
style>

<body>
    <div id="Vue">
        <div class="top">录制小tipsdiv>
        <div class="commer">
            在一分钟内,你可以简明扼要的介绍你的公司职位及能力如,
            我是某某公司的销售经理某某某有多年的某行业从事背景擅长分析客户需求,
            快速为客户解决问题br>温馨提示:在安静的环境内录音效果更好哦
        div>
        <div class="foot_record_box">
            <div class="foot_top">
                <span>我的语言span>
                <div class="time"><span class="timeNum">{{time}}span>/<span>01:00span>div>
            div>
            <div class="foot_record">
                <div class="record_play" @click='play' v-if="showPlay">试听div>
                <div class="record_bnt" @click='recording' v-if="record">div>
                <div class="record_bnt_ing" @click='recording' v-else>||div>
                <div style="margin-top: 1rem;"> {{record?'点击开始录音':'录音中...'}}div>
                <div class="record_anew" @click='upload' v-if='showPlay'>保存div>

            div>
        div>
    div>
body>

<script>
    wx.config({
        debug: false,
        appId: '{$signPackage["appId"]}',
        timestamp: '',
        nonceStr: '',
        signature: '',
        jsApiList: ['startRecord', 'stopRecord', 'uploadVoice', 'playVoice', 'downloadVoice', 'stopVoice']
    });
    new Vue({
        el: "#Vue",
        data: {
            record: true,
            localId: '',
            showPlay: false,
            time: '00:00',
            timer: '',
            num: ''
        },
        methods: {
            recording() {
                let that = this
                let num = 0
                if (this.localId != '') {
                    wx.stopVoice({
                        localId: this.localId // 需要停止的音频的本地ID,由stopRecord接口获得
                    });
                }

                if (this.record) {
                    wx.startRecord();
                    that.timer = setInterval(function () {
                        num = num + 1
                        if (num < 10) {
                            that.time = '00:0' + num
                        } else if (num > 9 && num < 60) {
                            that.time = '00:' + num
                        } else {
                            that.time = '01:00'
                            that.record = !that.record
                            clearInterval(that.timer)
                            alert('超时了,兄弟,重新录吧')
                        }
                        that.num = num
                    }, 1000)
                    that.showPlay = false
                } else {
                    wx.stopRecord({
                        success: function (res) {
                            clearInterval(that.timer)
                            that.localId = res.localId;
                            that.showPlay = true
                        }
                    });
                }
                this.record = !this.record

            },
            play() {
                wx.playVoice({
                    localId: this.localId // 需要播放的音频的本地ID,由stopRecord接口获得
                });
            },
            upload() {
                console.log('hahhhahah')
                let that = this
                wx.uploadVoice({
                    localId: this.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
                    isShowProgressTips: 1, // 默认为1,显示进度提示
                    success: function (res) {
                        console.log(res)
                        var serverId = res.serverId; // 返回音频的服务器端ID
                        that.getWxRecordDataUrl(serverId, 4)
                        // wx.downloadVoice({
                        //     serverId: serverId, // 需要下载的音频的服务器端ID,由uploadVoice接口获得
                        //     isShowProgressTips: 1, // 默认为1,显示进度提示
                        //     success: function (res) {
                        //         console.log('nihao6555',res)
                        //         var localId = res.localId; // 返回音频的本地ID
                        //     }
                        // });
                    }
                })
            },
            getWxRecordDataUrl(serverId, type) {
                let that = this
                $.ajax({
                    type: "post",	//请求方式
                    async: false,
                    url: "__MODULE__/Hemiao/getWxRecordDataUrl",
                    data: { media_id: serverId, file_type: type },		//传值给后台
                    dataType: "json",
                    success: function (res) {
                        // console.log(res.data.url)
                        let url = res.data.url
                        that.uploadUrl(url)
                    },
                });
            },
            uploadUrl(url) {
                let data = {
                    card_id: localStorage.getItem('jtcard_id'),
                    voice: url
                }
                $.ajax({
                    type: "post",	//请求方式
                    async: false,
                    url: "https://malltest.paparela.cn/meihuzhuanjia/index.php/Api/CommonApi/index/",
                    data: {
                        key: '233d4cad34c34d343785s34dw3er3ds3234esd4',
                        type: 'saveVoiceTeacherCard',
                        data
                    },		//传值给后台
                    dataType: "json",
                    success: function (res) {
                        // console.log(res)
                        alert(res.msg)

                    },
                });
            }

        },
        created() {
            setTimeout(function () {
                wx.startRecord({
                    success: function () {
                        wx.stopRecord()
                    },
                    cancel: function () {
                    }
                });
            }, 2000)
        }
    })
script>

html>

你可能感兴趣的:(H5)