微信小程序录音与播放录音功能实现

微信小程序录音与播放录音功能实现,话不多说直接上代码实例:

test.wxml

<button bindtap='start'>开始录音</button>  
<button bindtap='play'>播放录音</button>  
<button bindtap='stop'>停止录音</button>

test.js

var voice = "";
Page({
  play: function () {
    //播放声音文件  
    wx.playVoice({
      filePath: voice
    })
  },
  start: function () {
    //开始录音  
    wx.startRecord({
      success: function (e) {
        voice = e.tempFilePath
      }
    })
  },
  stop: function () {
    //结束录音  
    wx.stopRecord();
  }
})

微信小程序录音与播放录音功能前端界面:

微信小程序录音与播放录音功能实现
微信小程序录音与播放录音功能实现

pick一下最终效果,然后一步一步来。先把界面效果做出来。

微信小程序录音与播放录音功能:

  1. 长按会随动画出现边上半透明的圈,松开会缩回去。
  2. 顶部progressBar长按时出现,然后随录音时长变短。

这是

  • 4
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信小程序实现录音功能需要用到`wx录音组件`,这是微信官方提供的API,用于在用户授权后获取用户的语音输入。以下是一个基本的录音和保存录音文件的示例代码: ```javascript // 在pages/index.js中引入所需模块 Page({ permissions: { microphone: 'scope.microphone' // 需要的权限 }, recordButtontap: function() { // 请求录音权限 wx.requestPermissions({ permissions: this.permissions, success: function() { wx.startRecord({ success: function(res) { // 开始录音 console.log('开始录音'); // 创建一个音频任务 let audioTask = setInterval(function() { wx.getRecording({ success: function(result) { // 将录音数据写入文件 wx.saveVoice({ filePath: 'path/to/your/save/file.wav', // 保存路径,这里需要你自己设置 complete: function() { clearInterval(audioTask); // 结束录音 console.log('录音结束'); }, fail: function() { console.error('录音失败'); } }, result.tempFilePath); }, fail: function() { console.error('获取录音失败'); } }); }, 1000); // 每秒获取一次录音数据 }, fail: function() { console.error('开始录音失败'); } }); }, fail: function() { console.log('用户拒绝授权'); } }); }, stopRecord: function() { // 如果需要停止录音,可以在这里调用wx.stopRecord() } }) ``` 注意: 1. 用户需要在设置中开启“使用麦克风”权限才能录制音频。 2. 保存文件路径需在实际环境中设置,例如使用小程序的本地存储(`wx.getStorageSync`)或网络存储(如云开发等)。 3. 根据需求,你可能还需要处理录音结束后的操作,比如上传到服务器、播放录音等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值