如何在一个网页上播放多个声音文件?(点击最佳实践)


How to play multiple sound files on one Web Page? (on click best practice)

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

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

我认为另一种方法是:

  • 只包含一个flash播放器
  • 加载和播放文件,点击减少页面加载为tts文件创建。

我的问题是,

是否有任何javascript或jquery插件,可以做任何其他两种方法?

谢谢

你可以使用<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