HTML5音频跨浏览器兼容性

时间:2012-04-04 19:01:03

标签: ajax html5 audio cross-browser

我在一家公司工作,正在努力制作一个新的演示页面。我很想在页面上愚蠢地知道什么是无效的,但遗憾的是它与我服务器上的各种脚本以及必须转到同一域名的AJAX请求相关联。不过,我会尽可能地描述这种情况。

基本上,我的会话代码几乎按预期工作。这不是问题所在。问题是,在点击“Say It”按钮后播放的音频在Chrome中按预期工作,但firefox只播放第一个音频请求,即使在后续的音频请求之后,也没有在Internet Explorer中播放。相关代码全部位于head部分,其中一组三个函数控制所有正在进行的操作。当命中“Say It”按钮时调用formSubmit(),一旦加载了音频就调用onAudioLoad(),而limitText()就会调用,它会限制人们可以输入的文本数量。

因此formSumbmit()向我的服务器脚本发送一个AJAX请求,该脚本返回以下两种情况之一:

1)HTML5音频标签,源元素具有正确的src属性 要么 2)p元素表示你的会话已经过期。

我只是试图让音频播放而没有可怕的回声(这可能是或可能不是由实际的mp3 / ogg转换软件引起),并让它在所有浏览器上按预期工作。

onAudioLoad发送删除音频的请求,以避免人们过于轻易地窃取我们的产品:D

预期行为:

演示文本区域中的任何文本都将被发送到服务器端以进行合成,然后音频将通过客户端的扬声器播放。

如果您还有其他问题,我会定期在这里查看。

以下是演示的网址:

http://www.cepstral.com/demos/temp/cepstral_tts_demo.php

感谢您的帮助。

终极问题:

为什么这在Chrome中可以正常运行,但在Firefox 11和IE9中却没有?

在Firefox中,它只播放第一个音频请求。

在IE9中没有播放音频。

我知道音频永远不会安全。我们只是试图让普通用户更加困难。

1 个答案:

答案 0 :(得分:2)

在试图找出正在发生的事情并在聊天中联系(transcript)后,我得出以下结论:这是一个缓存问题。

当尝试更改FF中的文本并请求新的声音文件时,它仍会播放旧声音。通过检查请求和响应,看起来您总是使用相同的文件名(对于音频文件)进行响应,尽管声音本身是不同的。

下载该声音文件或在新选项卡中打开它并在没有缓存的情况下刷新它会播放正确的声音(使用新文本),所以我非常确定缓存。

您应该找到一种方法来返回不同文本的唯一文件名,以防止浏览器播放缓存版本。

在我的机器上测试IE时同样适用。

OP编辑

  

想要补充说它不能用于我的IE的原因似乎是我使用的是Windows 7 N.在IE9的发行说明中注意到Windows 7 N需要特殊更新才能播放HTML5视频。他们没有提到HTML5音频,但我认为这就是问题所在。