养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

h5微信上怎么点击播放音频

时间:2024-10-06 19:18:28

很多小伙伴可能很想h5微信上添加播放音频,那么怎样具体操作?不会的小伙伴快来看看吧。

h5微信上怎么点击播放音频

工具/原料

微信

方法/步骤

1、如何在网页上进行音频的播放?话题挺高大裼沙钔炯上,实际上的开发工作确实非常easy,只需要利用html5的一个标签audio即绺从萦米可。网页上大多数音频一般是通过插件falsh播放的。但是,并不是所有的浏览器对其都支持。html5规定了通过audio元素来包含音频的标准方法。当前audio支持的音频格式以及具体细节,可参考w3c标准。本文我们来看看具体实现以及一些有处理。

h5微信上怎么点击播放音频

2、我们首先做一个简单的实现,播放单个语音。就是这么简单。

h5微信上怎么点击播放音频

3、但是,想象一下我们现在的场景就是类似微信的聊天页面,一个页面大概有多个播放语音的按钮,还用上面的代码实现,你可以播放一下试试看。效果不出所料的话所点击的音频会同时进行播放。这显然不是我们所要的。我们目前的实现方法是标记一个播放状态,播放任意一个音频之前判断该状态,如果该状态显示正在播放,只需要将其暂停,然后再播放新的音频即可。

h5微信上怎么点击播放音频

4、具体实现,可以在多音频的状态下实现了播放单个音频不冲突。

h5微信上怎么点击播放音频

5、问题总是那么多,尖锐的矛盾也随之而来。打开firebug,我们吨易坌荐切换到Network栏看看,实际上我们的多个音频在页面上也是进行了加载,这样用户打梯瓣氨割开我们的网页就会非常耗时,在网络不好的情况下效果估计会更差。我们来看看如何在不影响效果的前提下进行优化。、我们对audio进行了优化,实际的播放地址用属性存储。、如此的话我们就有必要简单的修改下javascript代码即可。

h5微信上怎么点击播放音频

6、来看看具体实现;我们只增加了一行代码$audio.attr("src",$audio.data("src"));对于要播放的我们在点击后才去加载。我们打开firebug-Network验证下,确实是点击后才进行加载,这样就达到我们优化的效果了。

h5微信上怎么点击播放音频

© 一点知识