之前也有用到audio,大概是生日贺卡,博客音乐,播放语音等场景。
场景也比较简单,一个按钮加一点动画,再用上Audio的API,基本上就可以搞定了。
哦,可能还会涉及到自动播放。【这里】
DIY
以上场景,我们一般都看不到Audio的样式,基本都被隐藏了。因为对于新时代的我们来说,暂时还没有get它的美。
但是,我们要控制音频的播放,直观的看到时间进度等,那就需要展示这东西了。世上没有丑audio,只有懒audio.
我们给它化个妆就好了。淡妆,淡妆。
资料
Use
$(selector).initAudioPlayer(); // select 为audio元素,可以初始化多个
播放器样式是写在js代码里的,如果有需要,可以把代码抠出来放在CSS文件里。然后再化成自己喜欢的样子。或者你产品经理喜欢的样子。
DEMO
来个demo,PC 打开为移动端模式。
手机扫描二维码:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。