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

Question

我有一个包含词汇列表的页面。我对每个词汇都有一个 TTS。 我目前使用的方法是为每个词汇添加一个 mp3 flash 播放器。 这会导致加载所有 Flash 的延迟，因为一页中可能有超过 10 个词汇表。

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

我认为的一些替代方法是：

• 仅包含一个 Flash 播放器。
• 点击加载和播放文件，以减少创建 tts 文件的页面负载。

所以我的问题是，

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

谢谢

Answer 1

您可以使用<audio> 标签 (HTML5) 并控制它何时加载文件。
Google Chrome、Firefox、Opera 等大多数浏览器都支持它...

设置链接有两种方式：

方式 1

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

方式 2

<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