语音笔记页面开发实战

上一篇完成了文本笔记的接口联调，数据已经能存到后台了。

这一篇开始做语音笔记。和文本笔记不一样，语音笔记的核心是录音--按一下开始录，再按一下停止，还要有波形动画和时长显示。这一篇只做前端页面，录音转写暂时用模拟数据，接口联调放到下一篇。

一、先理清需要哪些功能

语音笔记和文本笔记的编辑页面差异很大，核心交互从「打字」变成了「录音」。我先对照需求列了一下要实现的功能：

理清了，开始给 AI 发提示词。

二、第一个提示词：搭建页面骨架

语音笔记的页面结构和文本笔记不一样，需要从头搭建。我给 AI 发了提示词：

提示词内容：

参照文本笔记编辑页面的布局风格，创建语音笔记的录制页面。页面从上到下包含四个卡片区域：录音卡片（录音按钮和波形动画）、转写文本卡片（文本输入框）、标题和分类输入卡片、AI整理入口卡片。顶部导航和文本笔记页面一致。

真实场景：不需要详细描述每个卡片的样式，AI 会自动参照已有的文本笔记页面（edit.vue）的布局风格，包括卡片的圆角、阴影、毛玻璃效果、背景光晕等，保持视觉一致性。只需要告诉 AI 页面有哪些区域、每个区域放什么内容就行。

AI 做了什么：

• 创建了 pages/voice/record/record.vue 页面文件

• 在 pages.json 中注册了路由

• 搭建了四个卡片的 HTML 结构，沿用文本笔记的卡片样式（白色半透明 + 圆角 + 阴影）

• 背景效果（光晕 + 网格）和导航栏直接复用了文本笔记页面的方案

• 主色调从蓝紫色改成了青色系（#06B6D4），和文本笔记区分开

AI 创建和修改的文件一览：

为什么要换主色调？：文本笔记用蓝紫色（#4F46E5），语音笔记用青色（#06B6D4）。不同类型的笔记用不同颜色，用户一眼就能区分当前在哪个页面。录音按钮、波形动画、时长数字都用青色，视觉上更有「语音」的感觉。

页面骨架的核心结构：

三、第二个提示词：录音功能

骨架搭好了，接下来实现核心的录音功能。我给 AI 发了提示词：

提示词内容：

实现录音功能，使用 uni.getRecorderManager()，mp3 格式录音。点击按钮开始录音，再次点击停止。停止后保存录音文件路径到 audioPath 变量。录音失败时提示「录音失败」。

AI 做了什么：

• 用 uni.getRecorderManager() 初始化录音器

• 按钮文字三态切换：未录音显示「开始录音」、录音中显示「停止录音」、已录音显示「继续录音」

• onStop 回调里拿到 res.tempFilePath 保存到 audioPath

• onError 回调里重置状态并提示失败

• 用 isRecording 和 hasRecorded 两个变量控制录音状态

什么是 RecorderManager？：RecorderManager 是 uni-app 提供的录音管理器，通过 uni.getRecorderManager() 获取。它有几个核心方法：start（开始录音，可指定格式）、stop（停止录音）、onStop（录音结束的回调，返回文件路径）、onError（录音出错的回调）。简单说就是：调用 start 开始录，调用 stop 结束录，在 onStop 里拿到录音文件。

录音功能的核心代码片段：

四、第三个提示词：波形动画

录音功能有了，但录音时页面没有任何视觉反馈，用户不知道有没有在录。需要加一个波形动画效果。我给 AI 发了提示词：

提示词内容：

录音时在录音卡片显示波纹动画效果，用 CSS 实现双层波纹环向外扩散的动画，中间显示麦克风图标。录音中动画激活，停止时动画消失。麦克风图标录音中显示「■」，未录音显示「♫」。

AI 做了什么：

• 创建了一个 wave-wrap 容器，包含两个 wave-ring 波纹环和一个 mic-core 麦克风核心

• 用 CSS @keyframes wave 实现波纹从内向外扩散的动画

• 两个波纹环错开 0.45 秒启动，形成连续的扩散效果

• 通过 :class="{ active: isRecording }" 控制动画的播放和停止

• 麦克风图标用文字符号实现：录音中显示「■」，未录音显示「♫」

什么是 CSS 动画？：CSS 动画通过 @keyframes 定义关键帧，描述元素从一个状态变到另一个状态的过程。比如波纹从「小+透明」变到「大+消失」，设置 infinite 就会循环播放。两个波纹环错开时间启动，看起来就像声波一圈一圈往外扩散。

波形动画的核心代码片段：

五、第四个提示词：录音时长计时

录音时还需要显示录音时长，让用户知道录了多久。我给 AI 发了提示词：

提示词内容：

录音时开始计时，显示录音时长，格式为 mm:ss。停止录音时停止计时。重置时清零。时长用大字号青色显示在录音卡片里。

AI 做了什么：

• 用 setInterval 每秒 +1 实现计时

• 用 computed 把秒数格式化为 mm:ss（如 01:23）

• 开始录音时调用 startTimer，停止时调用 stopTimer

• 重置时 duration 清零并停止计时器

• 时长用 64rpx 大字号、青色显示

什么是 setInterval？：setInterval 是 JavaScript 的定时器函数，每隔指定的时间重复执行一段代码。这里每 1000 毫秒（1秒）执行一次 duration += 1，就实现了计时。停止录音时要调用 clearInterval 停掉定时器，否则时长会一直涨。这是后面踩坑的重点。

计时器的核心代码片段：

六、第五个提示词：转写文本与分类选择

录音功能完成了，接下来是录音卡片下面的两个区域：转写文本和分类选择。我给 AI 发了提示词：

提示词内容：

录音停止后显示转写文本区域，当前用模拟转写文本占位，后续接入真实语音识别。加一个「模拟转写」按钮，点击后填充一段占位文本。下方加标题输入框和分类选择，分类用 chips 样式，从字典接口 getDictByTypes 加载，和文本笔记用同一套分类字典。

AI 做了什么：

• 转写文本区域用 textarea 组件，绑定 v-model="transcript"

• 加了「模拟转写」按钮，点击调用 generateMockTranscript 填充占位文本

• 标题输入用 input 组件，如果用户不填标题，自动取转写文本第一行前 20 个字

• 分类选择用 chips 样式（圆角小标签），点击切换 active 状态

• 在 onLoad 里调用 getDictByTypes('note_category') 加载分类字典

• 选中的 chip 用青色渐变背景，未选中用灰色背景

为什么转写用模拟数据？：语音转文字（ASR）需要调用第三方的语音识别服务（比如百度语音、讯飞等），需要申请 API Key、配置后端接口。在页面开发阶段先用模拟数据把页面跑通，等页面 UI 确认没问题了，再接入真实的语音识别服务。这是前端开发的常见做法：先 mock 后真实。

分类选择的核心代码片段：

七、第六个提示词：样式调整与 AI 整理入口

功能都实现了，最后统一调整一下样式，再加上 AI 整理入口。我给 AI 发了提示词：

提示词内容：

整体样式调整为浅色科技风，与文本笔记页面风格统一但用青色系主色调区分。卡片用白色半透明背景加圆角和毛玻璃效果。录音时长大字号显示。最下方加一个 AI 整理入口卡片，点击后先保存语音笔记再跳转到 AI 整理页面。AI 整理入口根据 AI 功能开关控制显示。

AI 做了什么：

• 四个卡片统一样式：白色半透明渐变背景 + 34rpx 圆角 + 阴影 + 毛玻璃（backdrop-filter: blur）

• 录音按钮用青色到蓝紫色的渐变（#06B6D4 → #6366F1）

• AI 整理入口卡片用 v-if="aiEnabled" 控制显示

• 点击 AI 整理入口先调用 saveVoiceNote 保存，再跳转到 /pages/ai/organize/organize?sourceType=voice&sourceId=xxx

• 如果转写文本为空，点击 AI 整理时提示「请先录音或填写转写内容」

什么是毛玻璃效果？：毛玻璃效果（Glassmorphism）通过 CSS 的 backdrop-filter: blur() 实现，让元素背景呈现半透明 + 模糊的效果，就像磨砂玻璃一样。这个项目里所有卡片都用这种效果，配合浅色背景和光晕，形成统一的浅色科技风。

八、踩坑时刻：开发过程中的问题

8.1 问题：H5 端录音报错

现象：在浏览器里调试时，点击录音按钮直接报错，录音功能完全不可用。

原因：uni.getRecorderManager() 是原生 API，只在 App 端和小程序端可用，H5 端（浏览器）不支持。

怎么告诉 AI 修复：

H5 端不支持录音 API，用条件编译处理。H5 端把 recorder 设为 null，录音按钮点击时提示「请在 App 中使用录音功能」。非 H5 端正常初始化 RecorderManager。

AI 用 uni-app 的条件编译语法处理了这个问题：

什么是条件编译？：条件编译是 uni-app 的特色功能，通过特殊注释 #ifdef 和 #ifndef 标记代码块，编译时只把对应平台的代码打包进去。#ifdef H5 表示只在 H5 端生效，#ifndef H5 表示除了 H5 端都生效。这样同一段代码可以适配多个平台。

8.2 问题：录音停止后时长还在涨

现象：点击停止录音后，波形动画停了，但录音时长还在一直增加，过了一分钟变成了 01:30。

原因：停止录音时只改了 isRecording = false 和 recorder.stop()，忘了调用 stopTimer() 清除定时器。setInterval 一直在跑，duration 一直在加。

怎么告诉 AI 修复：

停止录音时在 toggleRecord 的停止分支里加上 stopTimer() 调用。重置录音时也要调用 stopTimer()。确保所有停止录音的场景都清除了定时器。

修复后的代码：

8.3 问题：App 端录音没反应

现象：在手机上运行 App，点击录音按钮没有任何反应，也不报错。

原因：App 端需要配置录音权限。manifest.json 里没有声明录音权限（RECORD_AUDIO），系统不允许 App 使用麦克风。

怎么告诉 AI 修复：

在 manifest.json 的 app-plus 模块权限配置中，添加 RECORD_AUDIO 录音权限。Android 端还需要在 AndroidManifest.xml 中声明麦克风权限。

App 权限：手机 App 要使用麦克风、摄像头、相册等硬件功能，必须在配置文件里声明对应的权限。用户第一次使用时，系统会弹窗问「是否允许使用麦克风」，用户同意后才能正常录音。如果没声明权限，系统直接忽略调用，不会报错也不会弹窗，看起来就像按钮没反应一样。

九、最终生成界面展示

十、总结

语音笔记页面开发的几个关键经验：

1. 录音用 RecorderManager：uni-app 原生 API，start 开始、stop 停止、onStop 拿文件路径，mp3 格式

2. 波形动画用 CSS keyframes：双层波纹环错开时间扩散，录音中激活、停止时关闭，纯 CSS 不需要 JS

3. 计时器别忘了清除：setInterval 启动后一定要在停止时 clearInterval，否则时长会一直涨

4. H5 端用条件编译：原生 API 在 H5 不可用，用 #ifdef/#ifndef 区分平台

5. App 端要配权限：麦克风权限在 manifest.json 声明，否则点击录音没反应

6. 转写先 mock 后真实：页面开发阶段用模拟数据，等 UI 确认后再接语音识别服务

7. 不同笔记类型用不同主色：文本笔记蓝紫色、语音笔记青色，用户一眼区分

下一篇预告：下一篇将开发语音笔记的后台接口并进行前后端联调，包括音频文件上传、语音笔记的增删改查接口、以及语音转文字功能的对接方案。