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

【问题标题】：HTML5 using src using raw binary dataHTML5 使用 src 使用原始二进制数据
【发布时间】：2012-11-18 16:10:45
【问题描述】：

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

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

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

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

【问题讨论】：

让我们这么说吧。但是你的问题是什么？
@BrianAgnew 看来我忘了放最后一条语句，我已经更新了。
为什么不能只使用src="/user/music" 之类的网址并让该网址响应音频文件？

标签： java html audio binary jstl

【解决方案1】：

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

这就是我想出的：

将8bit二进制数据写入png文件
base64 编码生成的游程压缩 png 文件
使用 <img src="data:image/png;base64,...."> 将其包含到 html5 文件中
创建一个适当尺寸的隐藏画布并使用 context.drawImage 和 context.getImageData 提取最终存储在 Uint8ClampedArray 中的二进制数据
从 Uint8ClampedArray 计算三个js 所需的 Float32Array(s)

我不知道这是否也适用于提供二进制音乐数据，但问题没有提到音乐数据，它可能对像我这样滞留在这里寻找将二进制数据包含到 HTML5 中的通用解决方案的其他人有所帮助： -)

【讨论】：

我也是这种情况，大小呢，我看base64加大大小
我制作了一个小型 javascript 库，可以做到这一点：github.com/lovasoa/bin2png

【解决方案2】：

有点像内嵌图片：

<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。

【讨论】：

@HarloHolmes，我喜欢这个。 Firefox 和 IE？

【解决方案3】：

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

【讨论】：

为什么我需要将原始二进制数据转换成字符串？
因为 HTML 不知道二进制...您必须在字符串中提供它
是的..它会解释它..许多flash文件，视频和其他媒体对象都以字符串的形式放置..实际上这个字符串是Base64格式..看看在这个链接上...en.wikipedia.org/wiki/Base64
如果您发现此答案解决了您的问题，请标记为答案