edit页面播放没有声音
广告
{{v.name}}
📋 原始需求（task.md）：

edit.html页面点击播放后没有声音。

解决方案：每次点击播放按钮时，后端先生成MIDI文件，前端下载MIDI文件，然后播放MIDI文件。
直接播放MIDI文件肯定有声音。

增加Live Server的配置，在生成MIDI文件后，Live Server会自动刷新页面，导致播放停止。

通过后端生成MIDI文件并返回给前端，让浏览器原生播放MIDI音频数据。同时配置Live Server忽略MIDI文件，防止自动刷新。

问题分析
  • 问题现象：点击播放按钮后没有声音，浏览器控制台无错误
  • 根本原因：浏览器不支持MIDI文件播放，只能播放常见的音频格式（如MP3、WAV）
  • 正确逻辑：前端需要获取可播放的音频数据，浏览器可以通过Audio对象播放Blob URL
解决方案
  • 后端添加POST /preview接口，接收前端参数，生成MIDI后返回二进制数据
  • 前端通过axios获取MIDI二进制数据，创建Blob URL并用Audio对象播放
  • 在.liveServer.config.json中配置ignore来忽略.mid文件的自动刷新
  • 在.vscode/settings.json中配置Live Server设置
友链