HTML5使用src使用原始二进制数据

Question

假设我将音频文件存储在数据库中，稍后我想在我的应用程序中使用该BLOB或二进制文件。

<audio src ="${sessionScope.user.music}"> 

其中${sessionScope.user.music}返回已从数据库中检索的二进制数据。

是否可以使用二进制数据而不是uri在音频标签中加载音频文件？还是路径？

Answer 1

有点像内联图片：

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/
f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67
QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g7
7ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
    width="16" height="14" alt="embedded folder icon">

这适用于<img>，我很不确定data:audio/mp3;base64, ...（或audio/ogg）是否可行。它不在我的HTML5参考中。

有关编码，请参阅JEditorPane with inline Image。

Answer 2

我需要为三个3D显示内联大量（一些MB）的二进制数据。

这就是我提出的：

1. 将8位二进制数据写入png文件
2. base64编码生成的运行长度压缩的png文件
3. 使用<img src="data:image/png;base64,....">将其包含在html5文件中
4. 创建一个适当维度的隐藏画布，并使用context.drawImage和context.getImageData提取最终存储在Uint8ClampedArray中的二进制数据
5. 从Uint8ClampedArray计算三个js所需的Float32Array

我不知道这是否也可以提供二进制音乐数据，但问题是没有提及音乐数据，这对于像我这样寻找包含二进制的一般解决方案的其他人来说可能会有所帮助数据到HTML5 :-)

Answer 3

您需要使用javascript将二进制数据转换为字符串。请参阅Post