jAudio.js是一款基于HTML5 audio的Material design风格音频播放器jQuery插件。该音频播放器可以设置音频播放列表，每首曲子的封面，标题等，还可以控制歌曲的播放和快进，而且它使用上非常简单。

使用方法

使用Material design风格音频播放器插件需要引入jQuery和jaudio.min.js。

HTML结构

该Material design风格音频播放器的基本HTML结构如下：

00:00

00:00

CSS样式

下面是该音频播放器的主要CSS样式。你可以修改下面的样式来制作你自己需要的音频播放器样式。

.jAudio--player {

display: table;

overflow: hidden;

background: #fff;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);

margin: 100px auto;

width: 352px;

}

.jAudio--player:after {

content: " ";

display: block;

width: 100%;

clear: both;

}

.jAudio--player .jAudio--ui {

position: relative;

width: 100%;

}

.jAudio--player .jAudio--status-bar {

width: 100%;

z-index: 1;

position: relative;

padding: 100px 2rem 2rem 2rem;

display: table;

}

.jAudio--player .jAudio--status-bar:after {

content: " ";

display: block;

width: 100%;

clear: both;

}

.jAudio--player .jAudio--controls {

width: 100%;

display: table;

background: #fafafa;

}

.jAudio--player .jAudio--controls:after {

content: " ";

display: block;

width: 100%;

clear: both;

}

.jAudio--player .jAudio--controls ul {

display: table;

overflow: hidden;

width: 100%;

}

.jAudio--player .jAudio--controls ul:after {

content: " ";

display: block;

width: 100%;

clear: both;

}

.jAudio--player .jAudio--controls li {

position: relative;

width: 33.3333%;

height: 5rem;

line-height: 5rem;

}

.jAudio--player .jAudio--thumb {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

background-size: cover;

background-position: center center;

}

.jAudio--player .jAudio--time {

display: table;

width: 100%;

}

.jAudio--player .jAudio--time:after {

content: " ";

display: block;

width: 100%;

clear: both;

}

.jAudio--player .jAudio--time * {

width: 50%;

display: block;

float: left;

color: #fff;

text-shadow: 0 1px 1px #000;

font-size: 0.9rem;

}

.jAudio--player .jAudio--time .jAudio--time-elapsed { text-align: left; }

.jAudio--player .jAudio--time .jAudio--time-total { text-align: right; }

.jAudio--player .jAudio--details * {

color: #fff;

text-shadow: 0 1px 1px #000;

font-size: 1.2rem;

}

.jAudio--player .jAudio--details *:first-of-type { font-weight: bold; }

.jAudio--player .jAudio--details p { width: 100%; }

.jAudio--player .jAudio--details p span { display: block; }

.jAudio--player .jAudio--progress-bar { margin: 1.33333rem 0; }

.jAudio--player .jAudio--progress-bar .jAudio--progress-bar-wrapper {

width: 100%;

position: relative;

background: rgba(255, 255, 255, 0.3);

cursor: pointer;

border-radius: 10px;

overflow: hidden;

}

.jAudio--player .jAudio--progress-bar .jAudio--progress-bar-played {

height: 10px;

background: #FF6666;

position: relative;

border-radius: 10px;

}

.jAudio--player .jAudio--progress-bar .jAudio--progress-bar-pointer {

height: 10px;

width: 10px;

border-radius: 50%;

position: absolute;

right: 0;

background: #fff;

}

.jAudio--player .jAudio--playlist { background: #fff; }

.jAudio--player .jAudio--playlist .jAudio--playlist-item {

display: block;

width: 100%;

padding: 1.33333rem 2rem;

display: table;

}

.jAudio--player .jAudio--playlist .jAudio--playlist-item:after {

content: " ";

display: block;

width: 100%;

clear: both;

}

.jAudio--player .jAudio--playlist .jAudio--playlist-item.active {

background: #f55c5c;

border-bottom-color: #f55c5c;

}

.jAudio--player .jAudio--playlist .jAudio--playlist-item.active * { color: #fff; }

.jAudio--player .jAudio--playlist .jAudio--playlist-item:not(.active):hover { background: #fafafa; }

.jAudio--player .jAudio--playlist .jAudio--playlist-item:last-of-type {

border: 0;

margin-bottom: 0;

}

.jAudio--player .jAudio--playlist .jAudio--playlist-thumb {

float: left;

margin-right: 0.66667rem;

display: table;

}

.jAudio--player .jAudio--playlist .jAudio--playlist-thumb:after {

content: " ";

display: block;

width: 100%;

clear: both;

}

.jAudio--player .jAudio--playlist .jAudio--playlist-thumb img {

height: 2.4rem;

width: 2.4rem;

border-radius: 50%;

float: left;

margin-right: 0.5rem;

}

.jAudio--player .jAudio--playlist .jAudio--playlist-meta-text h4 {

font-size: 1rem;

color: #000;

}

.jAudio--player .jAudio--playlist .jAudio--playlist-meta-text p { font-size: 0.8rem; }

.btn {

position: relative;

overflow: hidden;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: transparent;

border: 0;

}

.btn span {

position: absolute;

display: table;

height: 15px;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

overflow: hidden;

}

.btn span:before, .btn span:after {

display: block;

content: " ";

height: 0;

float: left;

border-color: transparent;

border-style: solid;

}

.btn:active { background: #f5f5f5; }

#btn-prev span:before, #btn-prev span:after, #btn-next span:before, #btn-next span:after, #btn-play span:before, #btn-play span:after {

border-top: 7.5px solid transparent;

border-bottom: 7.5px solid transparent;

}

#btn-prev span:before, #btn-prev span:after {

border-right: 15px solid #ddd;

border-left: 0;

}

#btn-prev:active span:before, #btn-prev:active span:after { border-right-color: #FF6666 !important; }

#btn-next span:before, #btn-next span:after {

border-left: 15px solid #ddd;

border-right: 0;

}

#btn-next:active span:before, #btn-next:active span:after { border-left-color: #FF6666 !important; }

#btn-play span:before {

border-left: 15px solid #ddd;

border-right: 0;

}

#btn-play span:after { display: none; }

#btn-play:active span:before, #btn-play.active span:before { border-left-color: #FF6666 !important; }

#btn-pause span:before, #btn-pause span:after {

width: 5px;

height: 15px;

background: #FF6666;

border: 0;

}

#btn-pause span:before { margin-right: 5px; }

#btn-pause span:active:before, #btn-pause span:active:after, #btn-pause span.active:before, #btn-pause span.active:after {

background: #fff;

margin-right: 5px;

}

.jAudio--player .jAudio--controls li button span:before, .jAudio--player .jAudio--controls li button span:after {

-webkit-transition: border-color 0.3s ease 0s;

transition: border-color 0.3s ease 0s;

}

.jAudio--player .jAudio--thumb {

-webkit-transition: all 0.5s ease 0s;

transition: all 0.5s ease 0s;

}

.jAudio--player .jAudio--progress-bar .jAudio--progress-bar-played {

-webkit-transition: all 0.2s ease 0s;

transition: all 0.2s ease 0s;

}

.jAudio--player .jAudio--playlist .jAudio--playlist-item {

-webkit-transition: all 0.5s ease 0s;

transition: all 0.5s ease 0s;

}

.jAudio--player .jAudio--playlist .jAudio--playlist-item * {

-webkit-transition: all 0.3s ease 0s;

transition: all 0.3s ease 0s;

}

初始化插件

首先需要做的事情是给音频播放器添加一个播放列表。播放列表是一个对象数组，它的格式如下所示。然后可以将播放列表变量以参数的形式传入jAudio()方法中来初始化该音频播放器。

var t = {

playlist: [

{

file: "resources/tracks/01.mp3",

thumb: "resources/thumbs/01.jpg",

trackName: "Dusk",

trackArtist: "Tobu & Syndec",

trackAlbum: "Single",

},

{

file: "resources/tracks/02.mp3",

thumb: "resources/thumbs/02.jpg",

trackName: "Blank",

trackArtist: "Disfigure",

trackAlbum: "Single",

},

{

file: "resources/tracks/03.mp3",

thumb: "resources/thumbs/03.jpg",

trackName: "Fade",

trackArtist: "Alan Walker",

trackAlbum: "Single",

}

]

}

$(".jAudio--player").jAudio(t);

配置参数

该音频播放器的可用配置参数有：

playlist：播放列表。

defaultAlbum：默认的专辑，默认值undefined。

defaultArtist：默认的歌手，默认值undefined。

autoPlay：自动播放，默认值为false。

debug：默认值为false。

html5 仿微信语音播放器,Material design风格HTML5 audio音频播放器相关推荐

  1. html5好看的注册页面设计,Material Design风格用户注册登录界面设计

    这是一款Material Design风格用户注册登录界面设计效果.该设计由用户登录,用户注册和忘记密码三个界面组成.设计中的所有元素都以Material Design为基础,整体效果时尚大方. 使用 ...

  2. php仿微信语音条,html5的audio实现高仿微信语音播放效果

    前言 之前做过一个微信的项目,专家回复可以录音,然后储存成mp3格式,前台可以获取mp3,客户可以在线试听mp3录音效果,今天就简单分享一下这个效果如何实现,及实现思路和方法! 效果图 前台大体呈现效 ...

  3. html5的audio实现高仿微信语音播放效果

    效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...

  4. html5语音即时聊天|仿微信语音效果|表情|定位

    h5+css3语音实时聊天系统|仿微信语音聊天|js音频录制|仿微信地图定位 基于html5开发的仿微信语音聊天系统weChatIM项目,采用了h5+css3+jQuery+swiper+wcPop+ ...

  5. html仿微信语音功能案例,html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图...

    之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...

  6. Androidpcm格式音频编解码及播放，socket文件传输通讯，soundTouch变声框架 合成的一款仿微信语音按住说话的demo

    pcm格式音频编解码及播放,socket文件传输通讯,soundTouch变声框架 合成的一款仿微信语音按住播放的demo 效果:   -------------- 代码: MainActivity ...

  7. html 语音播放插件,Html5添加audio音频播放器插件教程

    一.方法: 使用Material design风格音频播放器插件需要引入jQuery和jaudio.min.js. 二.HTML结构 00:00 00:00 三.CSS样式 下面是该音频播放器的主要C ...

  8. 仿微信语音消息的录制和播放

    仿微信语音消息的录制和播放 一.简述 效果: 实现功能: 长按Button时改变Button显示文字,弹出Dialog(动态更新音量),动态生成录音文件,开始录音: 监听手指动作,规定区域.录音状态下 ...

  9. android放微信@功能,Android仿微信语音消息的录制和播放功能

    一.简述 效果: 实现功能: 长按Button时改变Button显示文字,弹出Dialog(动态更新音量),动态生成录音文件,开始录音: 监听手指动作,规定区域.录音状态下手指划出规定区域取消录音,删 ...

最新文章

  1. 进入Docker容器命令
  2. 如何创建共享文件夹？2009.6.10 三 紧张后 高兴
  3. 合成孔径成像算法与实现_声呐二维成像技术
  4. Windows 2000/XP/2003超级工具
  5. Android个人信息管理系统 源代码,个人信息管理系统源代码(自己写的).doc
  6. c语言从集合中随机选取一个值,从集合中挑选一个随机元素
  7. matplotlib.pyplot 和opencv 的结合画图
  8. cropper+pillow处理上传图片剪裁（一）
  9. python之optparse模块
  10. MongoDB 通过 Java 代码 批量操作
  11. 微信公众号开发-公众号支付
  12. 地理加权回归出现多重共线性如何解决
  13. 铁路CAD设计辅助软件V2.0
  14. 软件开发中需求分析的过程、层次、阶段、重点都在这里
  15. win10系统使用自带的win7图片查看器
  16. Chromium扩展（Extension）机制简要介绍和学习计划
  17. php生成word,并下载
  18. column xxx is of type integer but expression is of type character varying。String的成员变量存到int的数据库列 报错
  19. GOT-10k: A Large High-Diversity Benchmark forGeneric Object Tracking in the Wild（论文翻译）
  20. php取网盘真实链接,利用蓝奏做个人小文件网盘和获取真实下载地址

热门文章

  1. [图文]历届奥斯卡影帝(中)
  2. 使用NVM对node进行版本管理
  3. Java 10块钱 换 1元和0.5元
  4. MIPSel PPoE拨号上网
  5. 【180927】美女拼图游戏源码
  6. 面向切面编程（AOP）的理解
  7. PHP获取微信公众号头像,新版微擎框架公众号获取用户头像
  8. 做企业网站用好的自助建站系统,还得配好的虚拟主机空间
  9. 搜狗输入法不能输入中文，shift切换为中文输出的还是英文--------解决方法
  10. 中南大学实用测量数据处理实验