当前位置：首页 > news >正文

H5录音、图文视频IndexDB储存最佳实践：用AI生成语音备忘录

news 来源：原创 2025/6/26 10:41:10

引言

早在大学的时候，我就期望做一款属于自己的 APP，可惜那时不懂技术。现在有了技术，但却没有时间。好在 AI 的快速发展终于让我完成了这个愿望。于是，我用半天的时间，用 AI 生成了一个纯前端的 H5 程序：随心记。

在线体验地址：https://aicoding.juejin.cn/aicoding/work/7519454663779811366

什么是随心记

随心记是一个由 AI 生成的网页备忘录，它支持语音录入（可下载）、图文视频记录。最重要的是，它支持离线使用，所有数据都储存在浏览器中，不依赖后端，刷新页面数据也不会丢失！

此外，它还做了语音兼容处理，支持在 iOS 和安卓设备中通过 WebView 嵌套使用。

功能介绍

欢迎页

信息录入页

支持图文

支持语音录入、播放、下载

数据离线缓存，刷新页面不丢失

仅点击退出会清空数据

技术栈

本项目通过Trae+Claude-3.7生成，纯科技，不夹杂人工代码，项目最终通过掘金MCP一键部署发布。

作品发布&体验地址：https://aicoding.juejin.cn/aicoding/work/7519454663779811366

AI的代码技术栈如下：

星空背景：Cnavas实现
录音功能：纯原生实现，后为了兼容改用record-core
图片/视频功能：Vant-UI
数据离线储存：采用IndexDB

AI实践过程

开发工具准备

要使用AI实现这样一个小程序，首先要选取合适的AI编程工具。比如字节的Trae或国外的Cursor都行，由于要使用掘金的MCP一键部署，还是建议使用Trae。

不同的AI模型可能影响代码生成效果，因此，建议使用Claude，编码能力更强。

产品及prompt设计

要使用 AI 生成你想要的项目，首先一定要设计好你的产品，比如它包含哪些模块，有哪些功能，交互逻辑如何等等。因为这些内容，最终都将作为 prompt（AI模型提示词）投喂给 AI，而 prompt 的详细程度，往往直接决定了你生成的产品质量。

当然，如果你实在不知道怎么设计产品，也可以请教 ChatGPT，比如这样问：

我想通过AI编译器生成一个记事本APP，帮我设计一个详细的prompt

设置自定义智能体

为了让AI开发代码更准确，符合我们的开发、编码习惯，我们可以创建一个智能体，让AI通过我们的预设信息来进行代码生成。

通过AI提问开发项目

一切都准备好后，我们就可以使用AI生成项目了。首先，我们需要让AI帮我们搭建项目框架。

我要创建一个名为“随心记”的APP，使用Vue3+typeScript+less帮我搭建项目框架，不要写入任何内容，等待我的指示

搭建项目的过程中，我们只需要按照提示，运行相应的命令即可：

项目搭建好，我们就可以按照模块，让AI帮我们一步步完善代码。我们以生成星空背景+手机框架为例。

promot：帮我生成星空背景，样式要炫酷，屏幕中间显示一个Ihone的手机框架。

我们可以用过上下文协议，选中某个文件，将代码生成在指定位置：

代码生成后，我们先预览效果，如果效果不达标，我们可以通过不断提问去增加细节，如给背景的星星增加闪烁效果，给背景增加流星之类的。通过不断优化promot，效果会越来越接近我们想要的效果。

给出我通过AI生成的星空背景代码：

<template><div class="media-wrap"><canvas class="star-canvas"></canvas></div></template><script setup>import { onMounted } from 'vue'
onMounted(() => {const canvas = document.querySelector('.star-canvas')const ctx = canvas.getContext('2d')function resize() {canvas.width = canvas.offsetWidthcanvas.height = canvas.offsetHeight}resize()window.addEventListener('resize', resize)// ⭐ 星星类（星星变大）class Star {constructor() {this.reset()}reset() {this.x = Math.random() * canvas.widththis.y = Math.random() * canvas.heightthis.radius = Math.random() * 2.5 + 0.5  // ⭐ 更大：0.5 ~ 3pxthis.alpha = Math.random()this.fade = Math.random() * 0.02this.speed = 0.1 + Math.random() * 0.3}update() {this.y += this.speedthis.alpha += this.fadeif (this.alpha <= 0 || this.alpha >= 1) this.fade = -this.fadeif (this.y > canvas.height) this.reset()}draw() {ctx.beginPath()ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2)ctx.fillStyle = `rgba(255,255,255,${this.alpha})`ctx.fill()}}// ☄️ 流星类（左下 → 右上）class Meteor {constructor() {this.reset()}reset() {this.x = Math.random() * canvas.width * 0.5         // 左侧this.y = canvas.height - Math.random() * canvas.height * 0.5  // 下方this.len = Math.random() * 80 + 100this.speed = Math.random() * 4 + 6this.angle = Math.PI / 4  // ↗ 从左下到右上this.alpha = 1}update() {this.x += this.speed * Math.cos(this.angle)this.y -= this.speed * Math.sin(this.angle)this.alpha -= 0.01if (this.alpha <= 0) this.reset()}draw() {const x = this.xconst y = this.yconst len = this.lenctx.save()ctx.beginPath()ctx.moveTo(x, y)ctx.lineTo(x + len * Math.cos(this.angle),y - len * Math.sin(this.angle))ctx.strokeStyle = `rgba(255,255,255,${this.alpha})`ctx.lineWidth = 2ctx.shadowColor = '#fff'ctx.shadowBlur = 10ctx.stroke()ctx.restore()}}const stars = Array.from({ length: 200 }, () => new Star())const meteors = Array.from({ length: 3 }, () => new Meteor())function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height)stars.forEach(star => {star.update()star.draw()})meteors.forEach(meteor => {meteor.update()meteor.draw()})requestAnimationFrame(animate)}animate()
})
</script><style lang="less" scoped>
.media-wrap {width: 100%;height: 100vh;overflow: hidden;background: linear-gradient(to bottom, #1b1e3f, #2c3e50, #3b2c59); // 深蓝+紫色// ✨ 动态渐变星云背景background: linear-gradient(-45deg, #1b1e3f, #2c3e50, #3b2c59, #1b1e3f);background-size: 400% 400%;animation: galaxyMove 20s ease infinite;.star-canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;}.iphone {width: 380px;height: 85%;border-radius: 30px;position: relative;box-shadow: 0 0 0 10px black;margin: 40px auto;z-index: 1;.screen {width: 100%;height: 100%;border-radius: 30px;margin-top: 5%;overflow: hidden;}.notch {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 130px;height: 30px;background: #000;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;z-index: 2000;}.side-button {position: absolute;width: 4px;background: #666;border-radius: 2px;&.power {height: 40px;right: -6px;top: 120px;}&.volume-up {height: 30px;left: -6px;top: 100px;}&.volume-down {height: 30px;left: -6px;top: 140px;}}}
}.title {position: relative;z-index: 2;text-align: left;margin-top: 20px;font-weight: 600;letter-spacing: 1px;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);.gradient-text {font-size: 28px;background: linear-gradient(45deg, #f9d423, #ff4e50, #7b4397, #00c6ff);background-size: 300% 300%;-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: gradient-shift 8s ease infinite, pulse 2s infinite alternate;}
}.info {color: #fff;position: fixed;bottom: 10px;right: 10px;cursor: pointer;font-size: 16px;
}@keyframes galaxyMove {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}
}@keyframes gradient-shift {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}
}@keyframes pulse {0% {transform: scale(1);}100% {transform: scale(1.05);}
}
</style>

在我用AI 生成的这个项目中，最复杂的部分莫过于录音功能了，通过大约半小时的反复提问与细节优化，终于通过代码实现了语音录入、自定义语音样式、语音播放的功能。

AI的核心实现原理是通过原生录音事件完成的

// 创建音频上下文
const AudioContext = window.AudioContext || (window as any).webkitAudioContext
audioContext = new AudioContext()// 创建分析器
analyser = audioContext.createAnalyser()
analyser.fftSize = 256 // 必须是2的幂次方
const bufferLength = analyser.frequencyBinCount // 通常是fftSize的一半
dataArray = new Uint8Array(bufferLength)// ...// 请求录音权限
navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {resolve(stream)}).catch((err) => {console.error('获取录音权限失败:', err)Toast('获取录音权限失败，请检查权限设置')reject(err)})// 创建MediaRecorder实例
recorder = new MediaRecorder(stream as MediaStream)

但经过实际测试，在IOS的webview中，这种方案兼容性不好，在低版本的IOS中，录音播放异常，这与原生录音方法生成的录音格式有关。

于是，通过搜索，最终使用了record-core实现了录音功能，并让AI帮我重构了代码。

对于数据的离线储存，通过提问AI后，选用了indexDB的储存方案。但在实测中，播放语音时会报错：

于是，通过提问AI继续修复与优化。

在经过不断地测试与AI修复后，功能终于是没有任何问题了。在整体项目生成后，就是利用AI提问不断完善一些小功能

用AI生成项目的过程需要一步步的提问，让AI优化细节，这个过程其实是比较漫长的，但对于不懂技术或者不想自己写代码的同学而言，这都不是什么问题。

项目开发完毕，就可以部署在线上体验了。

项目部署

要发布线上，目前最方便的方式就是在Trae中配置MCP，一键部署。

部署前，我们需要先配置掘金的MCP,在 Trae 或 IDE 的 MCP 配置中，添加以下 JSON 配置：

{"mcpServers": {"juejin-deploy-mcp": {"command": "npx","args": ["--registry=https://registry.npmjs.org","-y","@juejin-team/mcp-server@latest"],"env": {"JUEJIN_TOKEN": ""}}}
}

注意，配置项中的JUEJIN_TOKEN需要填写你自己的掘金Token，获取地址如下：

https://www.zhihu.com/

点击添加后，你就可以在你的内置智能体中看到到

现在，你只需要切换到这个智能体，给出对应的部署提示即可。

部署成功后，会在对话框看到部署链接，点击后就可以看到效果。

总结

通过本文可以看出，借助 AI 从零开发一个完整的程序已不再是梦想，这让越来越多的人有机会成为创作者。而要用好 AI 开发产品，提示词（prompt）的质量至关重要。令人惊喜的是，优秀的提示词本身也可以由 AI 生成。用 AI 生成 prompt，再用这个 prompt 指导 AI 开发产品，这种“AI 调用 AI”的方式，既魔幻又充满趣味。