【生活娱乐赛道】声诗互映——古音律与古诗词的 AI 双向生成空间
【标签】 生活娱乐
一、Demo 简介
产品形态：沉浸式 Web 交互系统（单文件 HTML，可离线运行）
面向用户：
- 国风音乐创作者（需要古风填词灵感）
- 传统文学爱好者（希望"听"自己的诗）
- 汉服/古风圈层用户（追求沉浸式审美体验）
- 中小学生（趣味性国学互动）
主要功能：
1. 欢迎页与入卷体验
宣纸色卷轴缓缓展开，"声诗互映"四字浮现，"诗"字以金色高亮——这是用户与产品相遇的第一个画面。
2. 点乐入诗（乐生诗）—— 核心交互
内方外圆界面，按宫商角徵羽五声音阶排布 12 个音符，用户依次点击 5 个音符，AI 自动生成五言诗。
5 字成句，4 句成绝句，竹简音符飞入诗句区，配合墨迹晕染动画。
3. 选诗入乐（诗生乐）—— 反向创作
切换模式后，从内置诗库中选诗，AI 根据诗的风格、调式、浓度、速度自动生成匹配的音乐并演奏。
诗库支持搜索、风格筛选（豪迈/婉约/清雅灵动/清雅空灵）、朝代筛选。
二、Demo 创作思路
灵感来源
中国古代讲究"诗乐同源"——“诗言志，歌永言”。《尚书·舜典》有"诗言志，歌永言，声依永，律和声"。我希望在数字时代重建这种"诗可入歌，曲可填词"的双向体验：让音乐创作者能为一段旋律配上国风词句，也让文学爱好者能"听见"自己的诗。
想解决的问题
- 创作壁垒高：古诗词格律复杂，五声音阶对非专业用户陌生，普通人难以体验"即兴赋诗"与"抚琴作乐"的雅趣
- 单向输出：现有传统文化应用多为单向展示（播放古乐、显示古诗），缺乏深度参与感
- 跨感官断裂：文字与音乐作为两种表达媒介，长期处于割裂状态
为什么做这个方向
- AI 让双向转换成为可能：用大语言模型生成匹配格律的诗句，用算法把诗的特征（调式、情绪、节奏）映射到音乐生成参数
- Web 端零门槛：无需下载 App，浏览器打开即用，最大化触达传统文化爱好者
- 视觉化的"诗乐同源"：通过水墨、竹简、墨迹晕染等东方美学元素，让"诗"与"乐"的转换过程本身成为一种审美体验
核心创新点
- 起承转合旋律层次：自动演奏遵循中国古诗"起承转合"的结构性原则——起句平稳、承句稍起、转句上扬、合句回归，每句都有特定的音区范围和结音规则
- 风格化音乐生成：清雅/婉约/豪迈三种风格对应不同的旋律跳跃度、上下行概率和气息停顿，让同一首诗能呈现不同情绪
- 音色即笔法：将"散、按、泛"三种古琴音色抽象为三种视觉化的音符形态，圆环、圆点、菱形，让"音色"成为可感知的视觉元素
三、Demo 体验地址
方式：交互式 HTML 文件（Zip 打包）
附件：
shengshi-huying-demo.zip (109.7 KB)
体验方式：
- 下载 Zip 压缩包
- 解压后双击
shengshi-huying-competition-single.html - 浏览器（推荐 Chrome/Safari）自动打开，即可体验完整功能
核心体验路径：
- 欢迎页 → 上滑入卷 → 进入体验页
- 默认"点乐入诗"模式 → 点击 5 个音符生成第一句 → 凑满 4 句自动演奏 + 揭示动画
- 切换到"选诗入乐"模式 → 浏览诗库 → 选诗 → 确认入乐 → 自动演奏
四、TRAE 实践过程
开发环境
- 工具：TRAE IDE（结合通用智能体与 Plan/Build 模式）
- 开发方式：HTML + CSS + 原生 JavaScript（无前端框架依赖），单文件输出
- 核心音频：Web Audio API 实现五声音阶合成 + ADSR 包络
开发流程
阶段 1：产品定义与原型设计
借助 TRAE 通用智能体，完成了产品定位分析、用户旅程梳理、五声音阶映射规则（宫商角徵羽 → D4-E4-G4-A4-C5）、"起承转合"旋律生成算法设计。
阶段 2：界面与交互实现
使用 TRAE 的前端开发能力，从单页 HTML 开始逐步搭建：
- 欢迎页：古风卷轴展开动画（CSS 关键帧 + 文字 “入卷” 流动）
- 体验页：内方外圆 + 印章 + 颗粒感背景（Canvas 粒子动画）
- 模式切换 Tab：点乐入诗 / 选诗入乐
- 音色切换：散/按/泛三种圆形按钮 + 实时切换音符形状
阶段 3：核心算法实现
- 点乐入诗：每次点击音符 → 五言随机字库（按调式分类） → 5 字成句 → 竹简飞入 → 4 句成绝句 → 自动演奏
- 选诗入乐：诗库加载 → 调式/风格/浓度/速度元数据 → 旋律生成（映射到 4 句起承转合）→ 演奏动画
- 节奏控制：2-3 节奏模式（0.8, 0.8, 1.1, 1.1, 1.5）+ 风格化气息停顿 + 随机变化
阶段 4：体验优化与打磨
- 多次迭代音符按钮设计（从圆/方/八角形 → 统一大小的圆环/圆点/菱形）
- 选诗入乐确认后诗句全部显示，配合"谱曲入乐"提示
- 自动演奏结束后弹出结束动效
- Toast 提示改造成弦音面板上方的水墨风格横幅
- 止音按钮在两种模式下都能完整重置所有状态
- 选诗入乐模式下禁止点击音符，避免误操作
关键步骤截图
截图 2：点乐入诗模式
截图 3：诗句生成完成
https://trae-forum-cdn.trae.com.cn/prod/original/3X/9/f/9f89e9d2f9864a56959735028ca49a019b67d8a4.jpeg
截图 4：选诗入乐模式
https://trae-forum-cdn.trae.com.cn/prod/original/3X/4/0/4082889ecf4376ac77d20d0b817012b8a4ebc5f6.jpeg
截图 5：诗库对话框
https://trae-forum-cdn.trae.com.cn/prod/original/3X/9/a/9afacfaf287831631360ee515e55e623f912f7ad.png
截图 6：TRAE 开发过程
Session ID
以下是开发过程中关键任务的 Session ID，证明作品由 TRAE 开发完成：
-
Session 1：产品定义与算法设计
- Session ID：2390816687660057:0f64414209055d845722eeff80000820_6a48d05e541ffd602b8a5d45.6a48d06f541ffd602b8a5d52.6a48d06f541ffd602b8a5d50:TRAE Work CN.0.1.35.no_sid.no_ppe.T(2026/7/4 17:20:47)
- 内容：讨论"诗乐同源"概念、五声音阶映射规则、起承转合旋律生成算法
-
Session 2：核心代码实现
- Session ID：2390816687660057:2c1e0803a14cb7c753b840d105d133a6_6a48c168541ffd602b8a5b7c.6a5430153d8c191a98f730ff.6a5430153d8c191a98f730fd:TRAE Work CN.0.1.35.no_sid.no_ppe.T(2026/7/13 08:23:49)
- 内容：点乐入诗、选诗入乐核心函数实现，Web Audio API 音频合成
-
Session 3：体验优化
- Session ID：2390816687660057:e8a460c7eb455f486c099e7ce50dbdc2_6a48c168541ffd602b8a5b7c.6a54eeafe2f5f9bf8f68b7cd.6a54eeafe2f5f9bf8f68b7cb:TRAE Work CN.0.1.35.no_sid.no_ppe.T(2026/7/13 21:57:03)
- 内容：音符样式迭代、Toast 改造、止音按钮逻辑、诗句揭示动画
-
Session 4：踩坑解决
- Session ID：2390816687660057:15b741cce4df078864797441182f3984_6a48c168541ffd602b8a5b7c.6a54d0df3d8c191a98f73b78.6a54d0df3d8c191a98f73b76:TRAE Work CN.0.1.35.no_sid.no_ppe.T(2026/7/13 19:49:51)
- 内容：自动演奏定时器冲突排查、选诗对话框空内容修复、Toast 遮挡问题解决
开发心得
-
不要一次性追求完美：Demo 的核心链路先跑通，再迭代视觉细节。第一版界面比较粗糙，但功能完整；后续 7+ 轮迭代专门优化音符样式、动画过渡、提示文案。
-
把 AI 当协作伙伴而非工具：用 TRAE 时，把任务拆解成"目标 + 约束 + 验收标准"三段式指令，让 AI 知道为什么这样做，比单纯"帮我写个按钮"更有效。
-
保留所有 Session和 Git：每次重要决策都保留 Session ID以及对应的 git 记录，方便回溯思路和重要里程碑留档，也是参赛真实性的证明。
-
东方美学的关键在于"克制"：颜色不超过 3 种（墨色/宣纸色/朱砂红），动画不超过 0.6s，字体仅用楷体和宋体。"少即是多"在古风产品里尤其重要。