DIY audio player - 自定义audio播放器样式

以前也有用到audio，大概是生日贺卡，博客音乐，播放语音等场景。
场景也比较简单，一个按钮加一点动画，再用上Audio的API，基本上就能够搞定了。
哦，可能还会涉及到自动播放。【这里】

DIY

以上场景，咱们通常都看不到Audio的样式，基本都被隐藏了。由于对于新时代的咱们来讲，暂时尚未get它的美。

可是，咱们要控制音频的播放，直观的看到时间进度等，那就须要展现这东西了。世上没有丑audio，只有懒audio.

咱们给它化个妆就行了。淡妆，淡妆。

【code here】

资料

HTML/Element/audio

Media_events

Use

$(selector).initAudioPlayer();  // select 为audio元素，能够初始化多个

播放器样式是写在js代码里的，若是有须要，能够把代码抠出来放在CSS文件里。而后再化成本身喜欢的样子。或者你产品经理喜欢的样子。

DEMO

来个demo，PC 打开为移动端模式。

手机扫描二维码：