uniapp信聊天录音

### 实现语音录制与发送功能 在 UniApp 中实现聊天界面的语音录制与发送功能涉及多个方面，包括前端页面设计、逻辑控制以及后端接口调用。 #### 页面结构设置 为了集成语音录制功能，在 `index.vue` 文件中的模板部分需增加用于触发录音操作的按钮和其他交互元素： ```html <template> <view class="container"> <!-- 聊天记录区域 --> <scroll-view scroll-y :style="{ height: containerHeight + 'px' }" > <block v-for="(item, index) in messageList" :key="index"> <text>{{ item.content }}</text> <!-- 显示文字消息 --> <audio controls v-if="item.type === 'voice'" :src="item.src"></audio> <!-- 显示语音消息 --> </block> </scroll-view> <!-- 输入框和发送按钮 --> <view class="input-area"> <button @click="toggleRecording">点击录音</button> <button @click="sendVoiceMessage">发送语音</button> </view> </view> </template> ``` #### 录音逻辑编写 接着是在 `<script>` 部分定义相应的 JavaScript 方法来处理用户的录音请求。这里会涉及到使用 `uni.getRecorderManager()` 来管理录音过程，并监听其状态变化事件以便及时更新 UI 和数据模型[^1]。 ```javascript <script> import ChatPage from '@/components/ChatPage/ChatPage.vue'; export default { data() { return { isRecording: false, recorderManager: null, tempFilePath: '', messageList: [] } }, methods: { toggleRecording() { this.isRecording ? this.stopRecord() : this.startRecord(); }, startRecord() { const options = { duration: 60000, // 最大录音时长 (ms)，默认 60s sampleRate: 44100, // 采样率，默认 16000 numberOfChannels: 1, // 录音通道数，默认单声道 encodeBitRate: 192000, // 编码码率，默认 96000 format: "mp3", // 音频格式，默认 aac frameSize: 50 // 指定帧大小，单位 KB }; let that = this; this.recorderManager = uni.getRecorderManager(); this.recorderManager.onStart(() => { console.log('recorder start'); }); this.recorderManager.onStop((res) => { console.log('recorder stop', res); that.tempFilePath = res.tempFilePath; // 将新录制好的文件路径保存起来供后续上传或其他用途 }); this.recorderManager.onError((res) => { console.error(res); }); this.recorderManager.start(options); this.isRecording = true; }, stopRecord() { this.recorderManager.stop(); this.isRecording = false; }, sendVoiceMessage() { if (!this.tempFilePath || !this.messageList.length) return; // 假设已经有一个函数 uploadFile 可以用来上传文件到服务器并获取返回链接 // 这里简化为直接添加一条新的语音消息进入列表中展示给用户看 this.messageList.push({ type: 'voice', src: this.tempFilePath }); // 清除临时变量准备下一次录音 this.tempFilePath = ''; } }, mounted() { // 初始化一些必要的属性或方法... }, components: { ChatPage } } </script> ``` 上述代码展示了如何创建一个简单的聊天应用界面，其中包含了基本的文字和语音消息显示能力，同时也实现了基础版的本地录音功能。对于实际项目来说，还需要进一步完善错误处理机制、优化用户体验等方面的工作。