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

Question

我有一个页面，其中有一个词汇表列表。每个词汇都有一个TTS。 我目前使用的方法是为每个词汇包括一个mp3 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