移动设备上的 HTML5 base64 编码音频

Posted 2023-02-25

【中文标题】移动设备上的 HTML5 base64 编码音频

【英文标题】：HTML5 base64 encoded audio on mobile devices

【发布时间】：2013-11-10 19:12:26

【问题描述】：

我正在编写一个带有音频播放组件的平台。音频以 wav/mp3/ogg 文件的形式上传到服务器，然后（像我们的其他媒体一样）转换为 base64 并存储在我们的 redis 数据库中。

为了在客户端播放音频，我们向服务器发出 AJAX 请求以获取 base64 编码的音频。我们有一个补充移动应用程序的桌面版本，目前音频播放的工作方式如下：

recording.sound = new Audio("data:audio/ogg;base64," + recording.audio);
recording.sound.play(); // this works

今天我们开始在移动设备上进行测试，但到目前为止还无法让它工作，即使是在显然支持 html5 音频的移动浏览器上也是如此。

有什么想法吗？或者，如果这是不可能的，我们可以采取不同的方法吗？理想情况下，网络应用应该有移动兼容版本，并且必须有 phonegap 版本。

【参考方案1】：

原因可能不是技术问题，来自 Apple 开发者网站：

在 ios 上的 Safari（适用于所有设备，包括 iPad）中，用户可能在蜂窝网络上并按数据单位收费，因此禁用了预加载和自动播放。在用户启动数据之前不会加载数据。这意味着 javascript play() 和 load() 方法在用户开始播放之前也是不活动的，除非用户操作触发了 play() 或 load() 方法。换句话说，用户启动的播放按钮有效，但 onLoad="play()" 事件无效。

同样适用于 android 设备。

在此处阅读更多信息：Safari HTML5 Audio and Video Guide

【参考方案2】：

但是“audio/wav”不存在。请参阅此处的规范：http://www.iana.org/assignments/media-types/audio 您应该对 .wav 文件使用“audio/vnd.dts”，对 .mp3 文件使用“audio/mpeg”，对 .ogg 文件使用“audio/ogg”...

好的，试试 *** 搜索，见：https://***.com/search?q=audio+codec+support+mobile+devices+html5 或https://***.com/search?q=audio+codec+support+mobile+devices+html 或试试谷歌 一些可能有用的搜索结果：In search for a library that knows to detect support for specific Audio Video format files 或html5 vs flash - full comparison chart anywhere?

【讨论】：

用audio/ogg和ogg文件试了一下，结果一样。

那么我想如果移动设备有内置的ogg编解码器并且代码没有错误（尝试通过jshint.com进行），那么它应该可以工作。

是否有合适的参考资料可以用来检查哪些移动浏览器支持哪些编解码器？

我认为这可能最适合您：caniuse.com/#search=video 浏览器中所有最常用的编解码器和格式及其支持表 ;-)