手把手教你:微信小程序实现语音留言功能

在微信小程序中,语音留言功能为用户提供了便捷的交流方式。本文将带你一步步了解如何在微信小程序中实现语音留言功能。

实现步骤

1、在index.wxml中,添加以下代码:

html 复制代码
<view class="container">
  <button bindtap="startRecord">开始录音</button>
  <button bindtap="stopRecord">停止录音</button>
  <button bindtap="playVoice">播放语音</button>
  <button bindtap="uploadVoice">上传语音</button>
</view>

2、在index.wxss中,添加以下样式:

css 复制代码
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

button {
  margin: 10px;
  width: 200px;
}

3、在index.js中,添加以下代码:

javascript 复制代码
Page({
  data: {
    recorderManager: null,
    voicePath: '',
  },

  onLoad: function() {
    this.initRecorderManager();
  },

  // 初始化录音管理器
  initRecorderManager: function() {
    const that = this;
    this.data.recorderManager = wx.getRecorderManager();
    this.data.recorderManager.onStart(() => {
      console.log('recorder start');
    });
    this.data.recorderManager.onStop((res) => {
      console.log('recorder stop', res);
      that.setData({
        voicePath: res.tempFilePath
      });
    });
  },

  // 开始录音
  startRecord: function() {
    const options = {
      duration: 60000, // 录音时长,单位 ms
      sampleRate: 44100, // 采样率
      numberOfChannels: 1, // 录音通道数
      encodeBitRate: 192000, // 编码码率
      format: 'mp3', // 音频格式,有效值 aac/mp3
    };
    this.data.recorderManager.start(options);
  },

  // 停止录音
  stopRecord: function() {
    this.data.recorderManager.stop();
  },

  // 播放语音
  playVoice: function() {
    wx.playVoice({
      filePath: this.data.voicePath,
      success: function() {
        console.log('播放成功');
      },
      fail: function() {
        console.log('播放失败');
      }
    });
  },

  // 上传语音
  uploadVoice: function() {
    wx.uploadFile({
      url: '你的服务器地址', // 服务器地址
      filePath: this.data.voicePath,
      name: 'file',
      formData: {
        'user': 'test'
      },
      success: function(res) {
        console.log('上传成功', res);
      },
      fail: function() {
        console.log('上传失败');
      }
    });
  }
});

用户可以录制、播放和上传语音,服务器端负责处理和存储语音文件。希望本文对您有所帮助!

相关推荐
IMPYLH4 分钟前
HTML 的 <small> 元素
前端·网络·html
IT_陈寒5 分钟前
Vue的响应式让我加班到凌晨,问题竟出在这个不起眼的地方
前端·人工智能·后端
AlienZHOU9 小时前
AI Coding 时代下,我的技术面试实践分享
前端·后端·面试
Captaincc12 小时前
AI用量v0.1.11更新发布 新增 jusage doctor 诊断指令 托盘展示token 和余额 新增 AutoClaw 支持
前端·后端·vibecoding
计算机魔术师13 小时前
德国Wiki被黑后两周,OpenAI终于把模型失控的账本摊开了
前端
kyriewen14 小时前
我让 AI 当面试官面了我一轮:第 3 个追问我就卡住了(附 10 道追问清单)
前端·面试·ai编程
IT_陈寒14 小时前
Python的GIL把我坑惨了,多线程跑得比单线程还慢
前端·人工智能·后端
前端snow15 小时前
ai agent --- 多agent框架之图编排引擎-langgraph
前端
竹林81815 小时前
OmniPic Studio v3.2.1 核心技术架构与全平台发版解析文档
前端·浏览器
JamesZhang8007815 小时前
页面内存只涨不跌? 一次泄漏排查, 牵出 WeakMap 的诞生
前端