如何在一个网页上播放多个声音文件？（点击的最佳实践）

Question

我有一个页面，其中列出了一些词汇表。每个词汇都有一个TTS。

我目前的做法是为每个词汇都包含一个mp3 flash播放器。因为一个页面中可能会有超过10个单词，所以这样做会导致加载所有flash的延迟。

另一个问题是，tts文件的mp3必须在页面加载时创建，这也会延迟加载时间。

我脑海中有一些替代方法：

- 只包含一个flash播放器。 - 在点击时加载和播放文件，以减少tts文件创建的页面加载时间。

所以我的问题是，

是否有任何javascript或jquery插件可以执行这两种其他方法？

谢谢。

- bbnn

---

你是否考虑过 SoundManager？它是一个简单易用的JavaScript到Flash API。 - aziz punjani

Answer 1

您可以使用<audio>标签（HTML5），并且可以控制何时加载文件。
它在大多数浏览器中都得到支持，如Google Chrome、Firefox、Opera等。

它有两种设置链接的方式：

方式一

<audio src="YOUR FILE LINK HERE">
    <embed> <!--FALLBACK HERE (FLASH PLAYER FOR IE)--> </embed>
</audio>

方法二

<audio>
    <source src="YOUR FILE LINK HERE (MP3)" type="audio/ogg" />
    <source src="YOUR OTHER FILE LINK HERE (OGG)" type="audio/mp3" />
    <embed> <!--FALLBACK HERE (FLASH PLAYER FOR IE)--> </embed>
</audio>

属性

• 如果您想显示音频播放器，请添加controls="controls"。
• 如果您想循环播放音频，请添加loop="loop"。
• 如果您想让音频自动播放，请添加autoplay="autoplay"。
• 如果您想预加载音频，请添加preload="preload"。

---

JavaScript 控制

您也可以使用 JavaScript 进行控制。

播放： document.getElementById("YOUR AUDIO TAG").play()
暂停： document.getElementById("YOUR AUDIO TAG").pause()

---

了解更多

• http://w3schools.com/html5/tag_audio.asp

- Derek 朕會功夫

---

谢谢，除了HTML 5之外还有其他选择吗？因为现在我的网站还没有使用HTML 5。我考虑要保持一致，当我将一个页面更改为HTML 5时，我必须将所有页面都更改为HTML 5。 - bbnn