网站
电子音乐试听空间
Electronic music listening room
- 实际运行录屏
- 包含占位
- 未实测
- 公开使用有限制
同一 HTML 封面与 Playwright 可视光标视频：Phase study → Short pulse → Afterimage → Sessions → 展开/收起，12.533333 秒。无音频，无真实试听；保留文档滚动，光标只在录制时注入，非真人手动录屏。
已按减少动态效果偏好显示静态封面。
简介
以试听为中心重新设计的电子音乐展示页：分栏首屏把大字标题、四项示例曲目、自绘圆环视觉与统一播放器放在同一工作区，下方结合制作说明和可展开的示例日程。黑白画面用橙色标记重点，默认使用系统字体；不需要原摄影、着色器或外部字体。音频未提供时，完整静态视觉和演示交互仍可呈现，播放与进度拖动明确禁用。
英文摘要
A newly arranged electronic-music listening room pairs large system type with original CSS ring geometry and a shared audio transport. Four demo studies can be selected, while notes and expandable sample sessions complete the page. Optional audio enables playback; without media, the complete static composition remains visible and playback/seek controls are disabled.
技术、适配与难度
难度: 高级 · 4/5
中等偏高，4/5，摘自详情的编辑估计；顶层 advanced 为编辑映射。异步音频、状态冲突与回退需独立核验。
技术栈
- HTML · 语言 · 必需
原生语义结构；单文件 index.html。
- CSS · 样式 · 必需
内嵌响应式 CSS，系统字体，无外部框架。
- JavaScript · 语言 · 必需
内嵌原生逻辑；条目选择、单 Audio 状态与日程展开。
- HTMLAudioElement · 原生 API · 必需
实际提供音频时依赖浏览器原生 Audio；无媒体时保留禁用状态。
设计适配范围
按视口适配 · 桌面 / 平板 / 手机
设计最小宽度：320px
- 640px · 工作区堆叠，辅助区仅在有足够宽度时双列；更窄时全页单列、20px 留白。
- 1024px · 工作区约 5:7 双列、40px 间距，辅助区双列；最大内容宽 1280px。
设计范围并非跨浏览器保证；需另验实际音频、短视口、文字放大、触控及动态偏好。本站脚本不运行这些功能检查。
能力标签
- 独立 HTML
- 原生前端
- 编辑式布局
- CSS 几何
- 音频状态
- 响应式与无障碍
- 静态回退
适用工具说明
通用提示词
能力标签描述实现需求；未据此确认任何特定 AI 工具、模型或版本的兼容性。
适合谁
- 学习 CSS 几何与编辑式整页布局
- 练习单音频状态、异步选择和无媒体回退
- 制作明确区分界面演示与真实试听的学习页面
不适合谁
- 没有实际音频却承诺可试听的音乐产品
- 真实作品发布、票务、报名或商业日程业务
- 以预览代替音频格式、许可及播放行为验收
前置条件
- 能本地打开单文件 index.html
- 能检查 Audio 事件、异步切换、seek 边界和错误回退
- 需要播放时提供适用条件明确的主音频或试听；封面可选
资源条件
两个音频槽与一个中心封面槽均为 null。真正播放需要所选条目对应音频，另一音频可空缺；无视频、外部字体或图标依赖。本站预览 MP4 不等于音乐素材。
主音频
音频条件必需待补- 作用范围
- main_audio_playback
- 输入条件与格式
- 默认 null；如需首条真实播放，提供实际本地音频与其来源及适用使用条件。
- 回退方案: 禁用控件
- 显示 Audio not supplied，禁用播放和 seek，保留完整静态几何。
- 缺失影响
- 缺少真实试听；不阻塞条目选择与日程展开。
短试听音频
音频条件必需待补- 作用范围
- preview_audio_playback
- 输入条件与格式
- 默认 null；如需第二条真实播放，提供实际本地音频与其来源及适用使用条件，可与主音频独立空缺。
- 回退方案: 禁用控件
- 该条显示 Audio not supplied，禁用播放和 seek。
- 缺失影响
- 第二条没有实际试听；其余演示仍完整。
可选中心封面
图片可选待补- 作用范围
- central_cover_presentation
- 输入条件与格式
- 默认 null；提供自有或条件适用的本地图片与替代文字，记录真实来源；失败恢复 CSS 中心。
- 回退方案: 原生图形
- 完整自绘 CSS 几何保留。
- 缺失影响
- 没有摄影/作品封面，不阻塞默认布局。
默认演示行为
四条 Phase study、Short pulse、Quiet interval、Afterimage；前两条映射 mainAudio/previewAudio，均未提供，后两条默认无音频。选择不自动播放，无源禁用 Play/Seek 并保留静态圆环。Session A/B/C 独立展开本地说明，无报名或票务。实际提供音频后由单 Audio 管理播放、暂停、进度及 Replay；本视频不覆盖该路径。
UNSPECIFIED 边界
- 真实主音频、短试听、封面及其使用条件
- 真实艺术家与作品身份
- 真实活动数据、商业规则和去向
正文
使用方法
复制完整英文正文生成 index.html；内嵌 HTML/CSS/JavaScript，使用系统字体、自绘 CSS 几何与原生 Audio，无 WebGL 或外部库。
缺媒体默认形态
mainAudio、previewAudio、coverImage 均为 null。四项示例条目可选择，日程可本地展开；播放和 seek 禁用，显示 Audio not supplied，不伪造时长、计时或播放动画。真实媒体与活动去向需另行提供条件。
当前预览
封面为同一 HTML 默认验收截图。MP4 展示 Phase study、Short pulse、Afterimage、真实文档滚动到 Sessions、Session A 展开与收起；没有实际试听。Playwright 驱动，光标只在录制上下文注入。上游临时 WAV 与可控桩用于 QA，不写入默认成品或公开视频；本站 verification 仍为 untested，主观 70–85% 目标未测量。
公开使用条件
公开使用有限制
有限制公开：可展示当前学习演示包并完整复制英文正文，须遵守所列使用条件。来源条件 UNKNOWN 保留；本次确认不构成法律清权或全面功能认证。
审核范围: 当前 WZ-012 v2-independent 英文执行正文、双语详情、资源及使用条件，同一独立 HTML 成品的静态封面与 Playwright 操作视频；仅为学习演示公开包。
- 正文允许个人商用、允许修改、不允许再分发、不要求署名；第三方资源条件不由此政策代替。
- 原资源、依赖与保留设计参数的来源条件仍为 UNKNOWN；未使用原媒体，不宣称已清权、本站原创或获得原来源授权。
- mainAudio、previewAudio、coverImage 均未提供，必须保留 Audio not supplied 与禁用播放/seek；不得宣称录屏包含真实试听、波形分析、真实作品、可售活动或报名。上游 QA 的测试 WAV 不进入公开包。
- 封面和 MP4 来自同一运行 HTML；视频由 Playwright 驱动，光标只在录制上下文注入。不得称真人手动录屏、全面实测通过或主观质量目标已经达标。
正文使用与修改范围
正文允许个人商用、允许修改、不允许再分发、不要求署名；第三方资源条件不由此政策代替。原资源、依赖与保留设计参数的来源条件仍为 UNKNOWN；未使用原媒体，不宣称已清权、本站原创或获得原来源授权。公开包须保持演示及占位说明；第三方实际素材按各自适用条件核验。
预期结果
一个黑白橙色单文件试听页面：四个示例条目、自绘圆环与共享 Audio 控件、制作说明、三个可展开日程；无媒体时静态视觉完整，播放/seek 禁用，添加实际音频后再核验播放行为。
常见失败
- 没有音频却用装饰计时伪造播放
- 旧播放 Promise 或事件误标新条目为 playing
- 未加载 metadata 就恢复进度或启用 seek
- 时长显示 NaN 或虚构数值
- 多个音频同时播放或切换丢失暂停状态
- 把本地日程展开称为报名成功
版本与实测范围
编号: WZ-012 · 素材版本 / 修订: v2-independent
未实测
- 本脚本仅创建内容与媒体证据，不运行功能实测；上游生成和录制报告不自动提升本站 verification。
- 未提供真实音乐、封面或商业日程；视频展示条目与本地展开，不展示实际音频播放。
- QA 使用的临时测试 WAV 和播放拒绝桩不能替代实际媒体及其许可验收。
- 后台标签页音频持续、真实 OS 播放拒绝、跨浏览器、屏幕阅读器语音和主观 70–85% 目标未验证。
更新日期: 2026年10月12日
关联资源
暂无可显示的关联资源。你仍可阅读正文和参考来源。