小程序实现录音机效果

结构:

<!-- 主体区域(存放音频文件) -->
<scroll-view>
<view class="voice-list" wx:if="{{voiceslist.length}}">
  <block wx:for="{{voiceslist}}" wx:key="size">
    <view class="border">
    <view class="row" bindtap="playvoice" data-params="{{item.filePath}}">
    <view class="item">存储路径:{{item.filePath}}</view>
    <view class="item">存储时间:{{item.createTime}}</view>
    <view class="item">音频大小:{{item.size}}</view>
   </view>
   </view>
  </block>
    </view>
    <!-- 录音时的显示的图片 -->
    <view class="record-img" wx:if="{{isSpeaking}}">
        <view >
       <image  wx:if="{{isRecord==1}}" src="../../assets/luyin/voice_icon_speech_sound_1.png"></image>
       <image wx:if="{{isRecord==2}}" src="../../assets/luyin/voice_icon_speech_sound_2.png"></image>
       <image wx:if="{{isRecord==3}}" src="../../assets/luyin/voice_icon_speech_sound_3.png"></image>
       <image wx:if="{{isRecord==4}}" src="../../assets/luyin/voice_icon_speech_sound_4.png"></image>
       <image wx:if="{{isRecord==5}}" src="../../assets/luyin/voice_icon_speech_sound_5.png"></image>
        </view>
    </view>
</scroll-view>
<!-- 底部的button区域 -->
<view class="bottom-btn">
<button class="luyin-btn" bindtouchstart="handlestart" bindtouchend="handletouchend">开始录音</button>
</view>

样式:

/* pages/luyin/luyin.wxss */
.bottom-btn{
    background-color: #26A5FF;
    height: 120rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
}
.luyin-btn{
    width: 90%;
}
.border{
    width: 100%;
    border: 1px solid #ccc;
}
.row{
    margin: 20rpx;
}
.item{
    line-height: 65rpx;
    font-size: 30rpx;
    color: #26A5FF;
}
.record-img{
    width: 240rpx;
    height: 240rpx;
    position: relative;
  background: #26a5FF;
border-radius: 20rpx;
margin: 50% auto;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.record-img image{
    width: 70rpx;
    height: 150rpx;
}

逻辑:

// pages/luyin/luyin.js
let RecorderManager= wx.getRecorderManager();//RecorderManager
let InnerAudioContext= wx.createInnerAudioContext()
Page({

    /**
     * 页面的初始数据
     */
    data: {
        voiceslist:[],//存放音频
        isSpeaking:false,//是否正在录音
        isRecord:0//是否正在录音，为0的时候表示没有在录音
    },
    /**
     * 开始录音
     */
    handlestart(){
        this.setData({
            isSpeaking:true,
            voiceslist:[]
        })
        getNumber.call(this)
        RecorderManager.start()
        RecorderManager.onStart((res=>{
            console.log(res,'开始录音');
        }))
    },
    // 停止了录音
    handletouchend(){
        var that=this;
        this.setData({
            isSpeaking:false
        })
        RecorderManager.stop()
        RecorderManager.onStop((res=>{
            console.log(res,'resonStop');
            let voicePath=res.tempFilePath;
            // 讲临时音频文件保存到本地
            wx.saveFile({
              tempFilePath: voicePath,
              success(res){
                  console.log(res,'savesuccess');
                //   持久路径
                let savedFilePath=res.savedFilePath;
              }
            })
            wx.showToast({
              title: '恭喜，录音成功',
              icon:"success",
              duration: 1000
            })
            // 获取录音列表
            wx.getSavedFileList({
             success(res){
                 console.log(res,'获取保存的音频');
                 let voices=[];
                 res.fileList.forEach(item=>{
                    let obj={ } 
                    obj.createTime=new Date(item.createTime).getMinutes()+'s';
                    obj.filePath=item.filePath;
                    // 将b转换成kb
                    obj.size=item.size/1024+'kb';
                    voices.push(obj)
                    
                 })
                 that.setData({
                    voiceslist:voices
                 })
             }
            })
        }))
    },
    // 播放录音
    playvoice(e){
        console.log(e,'e');
        wx.showToast({
            title: '开始播放',
            icon:'success',
            duration: 1000
          })
        let voicepath=e.currentTarget.dataset.params;
        InnerAudioContext.src=voicepath;
        InnerAudioContext.play()
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        var that=this
        // 获取保存的音频文件
        wx.getSavedFileList({
            success(res){
                console.log(res,'获取保存的音频');
                let voices=[];
                res.fileList.forEach(item=>{
                   let obj={ } 
                   obj.createTime=new Date(item.createTime).getMinutes()+'s';
                   obj.filePath=item.filePath;
                   // 将b转换成kb
                   obj.size=item.size/1024+'kb';
                   voices.push(obj)
                })
                that.setData({
                   voiceslist:voices
                })
            }
           })
    },

})

// 当前显示那张正在录音的图片
function getNumber(){
    let that=this;
    // 生成1-4五个数字
   let i=1;
   setInterval(()=>{
       i++;
       i=i%6;
    that.setData({
        isRecord:i 
    })
   },200)

}

效果： 录音机效果.png

点击开始录音，就会出现开始录音的图片，当我们放开开始录音的按钮时，就是停止录音，因为我们绑定的是touchstart和touchend事件，录音完成后，点击出现在主体区域的某一行，就可以听到我们的录音效果了.