简单谈谈如何利用h5实现音频的播放
作者:白狼 出处:http://www.manks.top/article/h5_audio本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
如何在网页上进行音频的播放?话题挺高大上,实际上的开发工作确实非常easy,只需要利用html5的一个标签audio即可。
网页上大多数音频一般是通过插件falsh播放的。但是,并不是所有的浏览器对其都支持。
html5 规定了通过audio元素来包含音频的标准方法。
当前audio支持的音频格式以及具体细节,可参考w3c标准。本文我们来看看具体实现以及一些有处理。
我们首先做一个简单的实现,播放单个语音。
//html
<button class="btn audio">
播放语音
<audio src="音频地址"></audio>
</button>
//javascript
$(".audio").on("click", function () {
var $this = $(this),
$audio = $this.find("audio");
$audio.get(0).play();
});
对,你没有看错,就是这么简单。
但是,想象一下我们现在的场景就是类似微信的聊天页面,一个页面大概有多个播放语音的按钮,还用上面的代码实现,你可以播放一下试试看。
效果不出所料的话所点击的音频会同时进行播放。
这显然不是我们所要的。我们目前的实现方法是标记一个播放状态,播放任意一个音频之前判断该状态,如果该状态显示正在播放,只需要将其暂停,然后再播放新的音频即可。
我们来看看具体实现。
var playing = false, currentAudio = null;
$(".audio").on("click", function () {
var $audio = $(this).find("audio");
if (playing) {
playing = false;
currentAudio.pause();
currentAudio.currentTime = 0;
currentAudio = null;
}
playing = true;
currentAudio = $audio.get(0);
currentAudio.play();
});
这次就如愿了,在多音频的状态下实现了播放单个音频不冲突的问题了。
问题总是那么多,尖锐的矛盾也随之而来。
打开firebug,我们切换到Network栏看看,实际上我们的多个音频在页面上也是进行了加载,这样用户打开我们的网页就会非常耗时,在网络不好的情况下效果估计会更差。
我们来看看如何在不影响效果的前提下进行优化。
①、我们对audio进行了优化,实际的播放地址用属性存储
②、如此的话我们就有必要简单的修改下javascript代码即可
来看看具体实现
//html
<button class="btn audio">
播放语音
<audio data-src="音频地址"></audio>
</button>
<button class="btn audio">
播放语音
<audio data-src="音频地址"></audio>
</button>
//javascript
var playing = false, currentAudio = null;
$(".audio").on("click", function () {
var $audio = $(this).find("audio");
$audio.attr("src", $audio.data("src"));
if (playing) {
playing = false;
currentAudio.pause();
currentAudio.currentTime = 0;
currentAudio = null;
}
playing = true;
currentAudio = $audio.get(0);
currentAudio.play();
});
简单吧,我们只增加了一行代码 $audio.attr("src", $audio.data("src"));
对于要播放的我们在点击后才去加载。
我们打开firebug-Network验证下,确实是点击后才进行加载,这样就达到我们优化的效果了。
有小伙伴想问了,我想实现像百度mp3的播放那样,有播放倒计时。因为不属于我们本文主题,具体细节实现可参考w3caudio属性currentTime即可
最新文章
- 关于DSP的boot mode / boot loader /上电顺序 /在线升级等问题的总结
- static成员变量与返回对象的引用
- Hong Kong Regional Online Preliminary 2016 C. Classrooms
- SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
- hdu 5098 双队列拓扑排序
- iOS— UIScrollView和 UIPageControl之间的那些事
- (C# 基础) Datatable
- Java编程规范实践
- fedora 安装lamp
- Spring实例化bean的三种方法
- 初识google多语言通信框架gRPC系列(二)编译gRPC
- Java中使用有返回值的线程
- Tomcat解决中文乱码并部署项目
- Linux驱动之同步、互斥、阻塞的应用
- 学习 Spring Boot:(二十九)Spring Boot Junit 单元测试
- 【★★★★★】提高PHP代码质量的36个技巧
- vs变量监视提示-VAR-CREATE: UNABLE TO CREATE VARIABLE OBJECT解决方法
- inux系统用户名和全名有什么区别
- Java遍历对象所有属性
- [LeetCode] Paint House I &; II