简洁的html5音乐播放器

2017-03-14 | 4,978浏览 | 0评论 | 标签:html5 player audio

原本是想总结一下h5场景中音频控制,以及在ios下音频不自动播放的问题,结果demo越做越大,最后变成了一个音乐播放器... /汗
那就干脆把它做完整吧。

界面:

QQ截图20170315175357.jpg

预览地址:demo

功能:

  • 播放、暂停、上一首、下一首、进度条、简易动效

总结:

  • ios不支持audio自动播放,因此在document上绑定了touchstart事件来触发播放,如果是在微信中,可以监听微信的WeixinJSBridgeReady事件来触发,ios10亲测有效,其它手机没试。
  • 没用现在大家喜欢的框架,使用了传统的zepto,感想是:dom操作真的很不舒服。
  • 为了便于大家在pc上预览,使用了click事件,但没怎么对pc做兼容,还是建议大家用手机扫来看。
(本篇完。有疑问欢迎留言探讨)

留言:

*

* (方便回复通知)

打赏
编辑代码 运行结果
退出