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

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。