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

一、方法:

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

二、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: