跨平台、跨浏览器的使用Javascript播放音频的方式?
跨平台、跨浏览器的使用Javascript播放音频的方式?
我正在编写一个创建系统交互模拟的dhtml应用程序。模拟的数据是从另一个工具生成的,并且已经有大量的遗留数据。\n模拟中的某些步骤需要播放音频的“配音”剪辑。我一直未能找到在多个浏览器中轻松实现这一点的方法。\nSoundmanager2接近我所需的功能,但它只能播放mp3文件,而遗留数据可能还包含一些.wav文件。\n是否有其他可能帮助的库?
这段代码是一个用于从Javascript播放声音的基本DOM代码。作者可能没有太多考虑就编写了这段代码。当然,作者在之前会检查嵌入式对象是否存在,并保存了重复创建嵌入式对象的代码。
然而,当作者在Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.15) Gecko/2009102814 Ubuntu/8.04 (hardy) Firefox/3.0.15浏览器上尝试这段代码时,浏览器崩溃了。即使安装了最新的更新,Firefox仍然崩溃,而Opera则正常运行。
出现这个问题的原因可能是这段代码在不同平台和不同浏览器上的兼容性问题。为了解决这个问题,我们可以使用更跨平台、跨浏览器的方法来播放声音,例如使用HTML5的
function soundPlay(which) { var audio = new Audio("/snd/" + which + ".wav"); audio.play(); }
这段代码使用了HTML5的
问题的出现原因:
- 跨平台和跨浏览器的方式来从Javascript播放声音
- 在代码中使用了插件如Real Audio或QuickTime,这可能导致兼容性问题
解决方法:
- 使用Javascript代码创建一个
- 设置
- 如果已经存在
- 将
代码示例:
//====================================================================== var soundEmbed = null; //====================================================================== function soundPlay(which) { if (!soundEmbed) { soundEmbed = document.createElement("embed"); soundEmbed.setAttribute("src", "/snd/"+which+".wav"); soundEmbed.setAttribute("hidden", true); soundEmbed.setAttribute("autostart", true); } else { document.body.removeChild(soundEmbed); soundEmbed.removed = true; soundEmbed = null; soundEmbed = document.createElement("embed"); soundEmbed.setAttribute("src", "/snd/"+which+".wav"); soundEmbed.setAttribute("hidden", true); soundEmbed.setAttribute("autostart", true); } soundEmbed.removed = false; document.body.appendChild(soundEmbed); } //======================================================================
这个解决方法可能存在以下问题:
- 可能需要安装Real Audio或QuickTime插件才能处理.wav文件
- 在某些浏览器(如Firefox)中可能无法正常播放声音文件
- 在Windows系统上可能运行较慢,但在Mac上运行正常
这些问题可能导致一些用户对这个解决方法的评价不同,有些人认为这个解决方法有效,有些人则遇到了兼容性问题。