如何在一个网页上播放多个声音文件?(点击最佳实践)
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 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>
性><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
相关文章:
- 什么's是连接供应商js文件的最佳方式
- 将大数组(字符串和类型数组的混合物)存储到blob或文件中/从blob或文件检索大数组的最佳方式
- 节点:'最佳实践'使用其他js文件的js文件
- ExtJS类的最佳实践最终导致了太多的.JS文件.性能怎么样
- 在企业应用程序框架中包含js/css文件的最佳实践是什么
- 在d3.json中使用d3.csv组合多个csv文件数据输入的最佳方法是什么
- 将文件夹中的所有图像包括在阵列中的最佳方式是什么
- 最佳实现:将图像文件上传到数据库,并从数据库中读取图像
- 通过http传输大文件(>100MB)的最佳方式
- Jade包含JavaScript文件的最佳实践
- 链接不同 Web 文件夹中的图像/文件的最佳实践
- Web 项目的文件夹/目录结构 - 最佳做法
- 使用标记和 (TXT) .dat 文件中追加信息的最佳方式.从窗体
- 从 Javascript 读取硬编码 csv 文件的最佳实践
- 在 Node.JS 中使用配置文件的最佳方式
- 加载正确的PhoneGap文件的最佳方法是什么
- 整合多个 Javascript 文件的最佳实践是什么?
- 让目录中的所有文件都成为 webpack 中的入口点的最佳方法
- 通过web应用程序下载文件[最佳实践]
- 将JavaScript代码拆分为几个文件:最佳实践