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 打开为移动端模式。

手机扫描二维码:

audio-player

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值