博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DIY audio player - 自定义audio播放器样式
阅读量:6591 次
发布时间:2019-06-24

本文共 384 字,大约阅读时间需要 1 分钟。

之前也有用到audio,大概是生日贺卡,博客音乐,播放语音等场景。

场景也比较简单,一个按钮加一点动画,再用上Audio的API,基本上就可以搞定了。
哦,可能还会涉及到自动播放。

DIY

以上场景,我们一般都看不到Audio的样式,基本都被隐藏了。因为对于新时代的我们来说,暂时还没有get它的美。

但是,我们要控制音频的播放,直观的看到时间进度等,那就需要展示这东西了。世上没有丑audio,只有懒audio.

我们给它化个妆就好了。淡妆,淡妆。

资料

Use

$(selector).initAudioPlayer();  // select 为audio元素,可以初始化多个

播放器样式是写在js代码里的,如果有需要,可以把代码抠出来放在CSS文件里。然后再化成自己喜欢的样子。或者你产品经理喜欢的样子。

DEMO

,PC 打开为移动端模式。

手机扫描二维码:

audio-player

转载地址:http://jrkio.baihongyu.com/

你可能感兴趣的文章
Linux设备模型 (4)
查看>>
iOS报错:linker command failed with exit code 1 (use -v to see invocation)
查看>>
App Store付费应用退款流程(2015超级详细版)
查看>>
事件触发的模型
查看>>
CSS规范 > 9 视觉格式化模型 Visual Formatting Model
查看>>
Angular的模板与路由功能
查看>>
istio-0.8 指标监控,prometheus,grafana
查看>>
支付系统的防重设计
查看>>
Eclipse_常用技巧_01_自动添加类注释和方法注释
查看>>
詹嵩:性能牛逼的Log4j2是个什么鬼?
查看>>
WebView深度学习(三)之WebView的内存泄漏、漏洞以及缓存机制原理和解决方案...
查看>>
《Kotlin 程序设计》第五章 Kotlin 面向对象编程(OOP)
查看>>
[Hadoop]大量小文件问题及解决方案
查看>>
使用 WebStorm 创建 React App
查看>>
光纤通信简史
查看>>
SpringMVC详细教程:教你细节与走位(●'◡'●)
查看>>
LeetCode 326 Power of Three(3的幂)(递归、Log函数)
查看>>
MacOS High Sierra 设置中找不到允许任何来源的安装选项
查看>>
3亿人都参加的95公益周来了,爱心攻略看这里!
查看>>
(码友推荐)2018-08-21 .NET及相关开发资讯速递
查看>>