如何与完全保存在html中的“web-app”进行交互?

如何与完全保存在html中的“web-app”进行交互?

我遇到了一个有趣的场景。有一个名为“在线音序器”的网站,基本上可以让你直观地绘制音符,然后播放它们、保存和导出它们,使用不同的“乐器”预设更改声音等。

不久前,所有者发布了此网站的离线版本,它是一个 77mb 的 HTML 文件,我确信它包含的不仅仅是 HTML 和 CSS,我认为其中还有很多 Javascript,但是我甚至不是识别它是什么样子的专家。

html 文件中的大部分内容是音频文件,程序/网站/应用会使用这些文件生成声音。例如,“5.ogg”是一段 2 分钟的录音,其中只包含贝斯吉他演奏的每个音符,这些音符以 base64 文本形式存储在 HTML 文件中,这使得文件极难加载/解析/编辑。

文件中大量文本的开头如下:

</script><script>var audioData = {};audioData["0.mp3"]="data:audio/mpeg;base64,SUQzAwAAAAAAIFRY

...并沿着小径走了好几英里。大部分音频都是 ogg,但我猜有几个文件是 mp3。

我的目标只是更改其中一个音频文件,但是普通的 Windows 记事本和 notepad++ 都非常难以操作并且经常冻结,另外,很难找到一个音频文件的结束位置和另一个音频文件的开始位置,而尝试通过原始的文本编辑器做任何事情都是一场噩梦。

有没有更好的方法可以做到这一点?或者将整个程序放入 HTML 只是一种诅咒,我必须努力?我不是编程人员,但我可以用我所知道的语言构建一个原始解析器/阅读器来查找并单列每个实例:

"audioData["11.ogg"]="data:audio/mpeg;base64" 

分成单独的字符串,我可以更改并重新保存,但我只是想知道是否有更好的方法可以减少我的工作量。

我假设如果我能找到我想要交换的 ogg 文件,我就可以将我自己的 ogg 文件(取自当前在线序列器在线版本,他们不久前升级了样本的质量)编码为 base64,然后将我的文件粘贴到它的位置。

任何帮助都值得感激,我知道这是一个小众问题!

答案1

是的,我发过链接对于那些还没有的人。

EmEditor大文件没有问题。

提取音频以便您可以看到其他文件的样子。

您可以对现有文件进行 base64 编码,然后使用 EmEditor 替换 .html 中的一个 base64 字符串。

出于安全原因,浏览器不允许您在本地 html 文件中使用 javascript 打开本地文件(有例外);这就是为什么他们不辞辛劳将所有内容都包含在巨大的 base64 编码的 javascript 中。

有一些方法可以解决这个问题(例如,将音频文件托管在某个服务器上或更改浏览器安全设置(同源策略)),但如果您想使其完全独立于网络,最好替换 audioData javascript 数组中的 base64 编码字符串。

相关内容