如何更好的实现web聊天的语音播放功能
0
悬赏园豆：50
[已解决问题]
解决于 2015-06-16 15:16
效果如图，目标效果和微信web端一样。
我这边是实现思路是这样的，用audio标签进行控制，样式调好后，把audio的opacity设为0，既透明，然后通过点击audio进行播放语音。
但是实现方式出现了不少问题：在IE上，audio标签在透明后（opacity=0），不能进行点击，其他浏览器都可以； audio标签兼容性又比较差； audio标签只能用ID控制（这个搞了很多，发现标签和类名都不能获取全部的audio进行控制，用ID就可以，但是单个的，实现的效果是要点击其中一个时，停止其它正在播放的）。
所以在这里问问各位大神，大家有更好的实现思路吗？ 小弟将感激不尽....
最佳答案
1
直接放一个audio标签，界面上播放图标用其他元素展示，然后用js控制audio播放和切换源。
收获园豆：40
我基本也是这个思路，但是在点击其中一条时，必须关闭其它的，只播放点击的这条，这个有点难实现，我通过点击遍历停止了所有的，但是实现不了播放当前的...
@灰鸽1号: 只有一个andio标签，就只有一个实例，应该不会播放多个哇。
@幻天芒: 可是我有很多个audio标签，每一段语音就放了一个audio标签
@灰鸽1号: 我的意思是只放一个，通过js切换src和控制播放。
@幻天芒: 果然是我思路错了，非常感谢指点！
@灰鸽1号: :)
其他回答(1)
2
IE可以把透明度设置为0.01
收获园豆：10
这个可以了，感谢！
赞！
