微信小程序-语音输入(录音并播放）

xml

        <view class="other-des">
            <view class="other-des-list">
                <view wx:for="{{imgFiles}}" wx:key="index">
                    <view class="des-name" hidden="{{item.fileType!='mp3'}}">语音</view>
                    <view>
                        <view bindtap="playVoice" data-url="{{item.url}}" class="voice" hidden="{{item.fileType!='mp3'}}">{{item.duration}}’</view>
                    </view>
                </view>
            </view>
            <view class="action">
                <view bindtouchstart="audiostart" bindtouchend="audioend">
                    <image class="action-icon" src="../images/icon_voice.png" mode="" />
                </view>
            </view>
        </view>
   <view bindtouchstart="audiostart" bindtouchend="audioend">
      <image class="action-icon" src="../images/icon_voice.png" mode="" />
   </view>

.js

// expertConsultations/addQuestion/index/index.js
const httpUtils = require("../../../utils/httpUtils")
const stringUtils = require("../../../utils/stringUtils")
const app = getApp()
//定义一个全局变量，调用微信官方定义语音管理对象
const recorderManager = wx.getRecorderManager();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        phone: '',
        questionTypeIndex: '',
        questionTypeOptions: [],
        title: "",
        info: "",
        biaoQian: "",
        imgFiles: [],
        zid: '',
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.setData({
            zid: options.id
        })
    },

    onInput() {},
    cancelTap() {
        wx.navigateBack()
    },

    //语音开始
    audiostart: function () {
        wx.showToast({
            title: '正在录音...',
            icon: 'loading',
            duration: 10000
        });
        recorderManager.start({
            format: 'mp3'
        });

    },

    //语音结束
    audioend: function () {
        //弹窗消失
        wx.hideToast({
            title: '正在录音...',
            icon: 'loading'
        });
        var path = "";
        var that = this;
        recorderManager.stop();
        recorderManager.onStop(function (res) {
            path = res.tempFilePath;
            console.log("结束", res)
            console.log(res.tempFilePath)
            if (res.duration < 1000) {
                wx.showModal({
                    title: '录音时长太短，请重新录音',
                    content: '',
                })
            } else {
                if (res.tempFilePath != "") {
                    console.log(that.data.imgFiles);
                    that.setData({
                        imgFiles: that.data.imgFiles.concat([{
                            url: res.tempFilePath,
                            tempFilePath: res.tempFilePath,
                            fileType: 'mp3',
                            duration: parseInt(res.duration / 1000)
                        }])
                    });
                    console.log(2, that.data.imgFiles);

                    //将语音文件保存至后台
                    // that.saveVoiceInfo(res.tempFilePath);
                } else {

                }
            }

        });
    },
    playVoice() {
        // 获取innerAudioContext实例
        const innerAudioContext = wx.createInnerAudioContext()
        // 是否自动播放
        innerAudioContext.autoplay = true
        // 设置音频文件的路径
        innerAudioContext.src = this.data.tempFilePath;
        // 播放音频文件
        innerAudioContext.onPlay(() => {
            console.log('开始播放')
        });
        // 监听音频播放错误事件
        innerAudioContext.onError((res) => {
            console.log(res.errMsg)
        })
    },
    //保存至后台
    saveVoiceInfo: function (path) {
        var that = this;
    },

})

css

.other-des {
    width: 100%;
    min-height: 100rpx;
    background: rgba(217, 217, 217, 0);
    border-radius: 10rpx;
    border: 2rpx solid #D9D9D9;
    position: relative;
    padding: 20rpx;
    box-sizing: border-box;
}
.other-des-list {
    margin-bottom: 30rpx;
}
.image {
    width: 300rpx;
    height: auto;
    background: #E7E7E7;
    border-radius: 10rpx;
}

.des-name {
    font-size: 26rpx;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    line-height: 30rpx;
    margin-bottom: 10rpx;
    margin-top: 20rpx;
}
.action {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.action-icon {
    width: 50rpx;
    height: 50rpx;
    margin-left: 30rpx;
}