小程序录音及播放完整代码 示例1 -j9九游会真人游戏第一品牌

wxml

 
  
    
    
  
   
  
       
                      
                           
                            存储路径:{{item.filepath}}  
                            存储时间:{{item.createtime}}  
                            音频大小:{{item.size}}kb  
                            
                      
          
  
   
   
   
 按住 录音  
   

/**index.wxss**/  
.speak-style{  
    position: fixed;  
    z-index: 999;
    left: 250rpx;
    height: 240rpx;  
    width: 240rpx;  
    border-radius: 20rpx;  
    margin: 50% auto;  
    background: #26a5ff;  
}  
.item-style{  
    margin-top: 30rpx;  
    margin-bottom: 30rpx;  
}  
.text-style{  
    text-align: center;  
}  
.record-style{  
    position: fixed;  
    bottom: 0;  
    left: 0;  
    height: 120rpx;  
    width: 100%;  
}  
.btn-style{  
  margin-left: 30rpx;  
  margin-right: 30rpx;  
}  
.sound-style{  
  position: absolute;  
  width: 150rpx;  
  height:150rpx;  
  margin-top: 45rpx;  
  margin-left: 45rpx;  
}  
.board {  
  overflow: hidden;  
  border-bottom: 2rpx solid #26a5ff;    
}  
/*列布局*/  
.cell{  
    display: flex;  
    margin: 20rpx;  
}  
.cell-hd{  
    margin-left: 10rpx;  
    color: #885a38;  
}  
.cell .cell-bd{  
    flex:1;  
    position: relative;  
}  
/**只显示一行*/  
.date{  
    font-size: 30rpx;  
    text-overflow: ellipsis;   
    white-space:nowrap;  
    overflow:hidden;   
}  

//index.js  
//获取应用实例  
var app = getapp()
page({
  data: {
    j: 1,//帧动画初始图片  
    isspeaking: false,//是否正在说话  
    voices: [],//音频数组  
  },
  onload: function () {
  },
  //手指按下  
  touchdown: function () {
    console.log("手指按下了...")
    //console.log("new date : "   new date)
    var _this = this;
    this.setdata({
      isspeaking: true
    })
    //开始录音  
    wx.startrecord({
      success: function (res) {
        //临时路径,下次进入小程序时无法正常使用  
        var tempfilepath = res.tempfilepath
        console.log("tempfilepath: "   tempfilepath)
        //持久保存  
        wx.savefile({
          tempfilepath: tempfilepath,
          success: function (res) {
            //持久路径  
            //本地文件存储的大小限制为 100m  
            var savedfilepath = res.savedfilepath
            console.log("savedfilepath: "   savedfilepath)
          }
        })
        wx.showtoast({
          title: '恭喜!录音成功',
          icon: 'success',
          duration: 1000
        })
        //获取录音音频列表  
        wx.getsavedfilelist({
          success: function (res) {
            var voices = [];
            for (var i = 0; i < res.filelist.length; i  ) {
              //格式化时间  
              var createtime = new date(res.filelist[i].createtime)
              //将音频大小b转为kb  
              var size = (res.filelist[i].size / 1024).tofixed(2);
              var voice = { filepath: res.filelist[i].filepath, createtime: createtime, size: size };
              //console.log("文件路径: "   res.filelist[i].filepath)
              //console.log("文件时间: "   createtime)
              //console.log("文件大小: "   size)
              voices = voices.concat(voice);
            }
            _this.setdata({
              voices: voices
            })
          }
        })
      },
      fail: function (res) {
        //录音失败  
        wx.showmodal({
          title: '提示',
          content: '录音的姿势不对!',
          showcancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              return
            }
          }
        })
      }
    })
  },
  //手指抬起  
  touchup: function () {
    console.log("手指抬起了...")
    this.setdata({
      isspeaking: false
    })
    clearinterval(this.timer)
    wx.stoprecord()
  },
  //点击播放录音  
  gotoplay: function (e) {
    var filepath = e.currenttarget.dataset.key;
    //点击开始播放  
    wx.showtoast({
      title: '开始播放',
      icon: 'success',
      duration: 1000
    })
    wx.playvoice({
      filepath: filepath,
      success: function () {
        wx.showtoast({
          title: '播放结束',
          icon: 'success',
          duration: 1000
        })
      }
    })
  }
})