微信小程序开发-语音录入与删除

1.wxml

<view class="title">
        <text class="label" style="padding: 8px;">上传语音：</text>
</view>
<button class="{{luStatu?'btTouch':'bt'}}" style="margin-top:2vh;"  bind:touchstart="touchStart"bind:touchend="touchEnd"  type='primary'>
    <text wx:if="{{luStatu}}">松开结束</text> <text wx:else>按住说话</text>
</button>

<block wx:for="{{list}}" wx:key="index">
    <view bindtap="audioPlay" bindlongtap="deleteVoice" data-src="{{item.src}}" class='myLuYin'>录音{{index+1}}(点击播放，长按删除)</view>
</block>

2.js

Page({
        luStatu:false,
        list:[],
        width:0,
}),


// 触摸开始
touchStart:function(e){
// console.log('touchStart', e);
var start=e.timeStamp;
var seconds = (start % (1000 * 60)) / 1000;
this.setData({
    start: seconds,
    luStatu:true,
})
this.recorderManager.start({
    format: 'mp3'
});
},

// 触摸结束
touchEnd:function (e) {
// console.log('touchEnd', e);
var start = this.data.start;
var end = e.timeStamp;
var seconds = (end % (1000 * 60)) / 1000;
var shijian = seconds - start;
var width = shijian*4;
this.setData({
    end: seconds,
    shijian: shijian,
    luStatu: false,
    width: width
})
this.recorderManager.stop();
console.log('按了' + shijian+'秒');
console.log('width是',width);
},
// 实时监测变化调用这些方法
onShow:function(e){
var that=this;
//  初始化录音对象
this.recorderManager = wx.getRecorderManager();
this.recorderManager.onError(function () {
    that.tip("录音失败！")
});

// 录音结束
this.recorderManager.onStop(function (res) {
    var list=that.data.list;
    var width = that.data.width;
    var src = res.tempFilePath;
    console.log('list的1是',list)
    // console.log(src)
    var aa={
    src: src,
    width: width,
    play:false
    }
    list.push(aa);
    console.log('list的2是', list)
    that.setData({
    list: list
    })
    
    // that.tip("录音完成！")
    //console.log(list)
});

this.innerAudioContext = wx.createInnerAudioContext();
this.innerAudioContext.onError((res) => {
    that.tip("播放录音失败！")
})
},
tip: function (msg) {
wx.showModal({
    title: '提示',
    content: msg,
    showCancel: false
})
},

// 播放录音
audioPlay: function (e) {
var that = this;
var src = e.currentTarget.dataset.src;
if (src == '') {
    this.tip("失效")
    return;
}
this.innerAudioContext.src = src;
this.innerAudioContext.play();
},
deleteVoice:function(e){
var that = this, num = e.currentTarget.dataset.index, o = that.data.list;
wx.showModal({
    title: "提示",
    content: "确认要删除该语音吗?",
    success: function(e) {
        if (e.confirm) console.log("点击确定了"), o.splice(num, 1); else if (e.cancel) return console.log("点击取消了"), 
        !1;
        that.setData({
            list: o
        });
    }
});        
}

3.wxss

.myLuYin{
   
    height: 80rpx;
    background: greenyellow;
    border-radius:6rpx;
    margin: 15rpx 0; 
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #fff;
  }
  .bt{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 69;
    height: 100rpx;
  }
   
  .btTouch{
    background: #e2e2e2 !important;
    color: #333333 !important;
     width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 69;
    height: 100rpx;
  }