weixin/target/classes/static/style/audioplayer.css

.audiobox{background: #f8fcff;border:1px solid #ddeeff;border-radius: 8px;padding:25px 15px 20px;position: relative;}
.audiotitle{
	font-size: 14px;
	color: #666;
	position: absolute;
	left: 55px;
	right: 0px;
	top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
	padding:0 10px;
}
.audioplayer-volume{display: none;}
.audioplayer-bar-played{background: #3399ff;z-index: 2;position: relative;}
.audioplayer-bar-played:before{
	content: '';
	position: absolute;
	width: 9px;
	height: 9px;
	right: 0;
	background: #3399ff;
	margin-left: -4px;
	border-radius: 50%;
	margin-top: -3px;
	top: 0;
	
}
.audioplayer-time-current{right: 50px;}
.audioplayer-time-duration{right: 0;}
.audioplayer-bar
{
	height: 3px; /* 14 */
	cursor: pointer;
	z-index: 1;
	top: 50%;
	right: 0px; /* 110 */
	left: 55px; /* 110 */
	background: #e7e7e7;
	margin-top: -1px;
}
.audioplayer-playpause
{
	width: 32px;
	height: 32px;
	text-align: left;
	text-indent: -9999px;
	cursor: pointer;
	z-index: 2;
	top: 0;
	left: 0;
}
.audioplayer-time
{
	z-index: 2;
	bottom: -15px;
	width: 50px;
}
.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a{
	display: block;
	width: 32px;
	height: 32px;
	background: url(../images/play.png) no-repeat center center/32px 32px;
}
.audioplayer-playing .audioplayer-playpause a{
	display: block;
	width: 32px;
	height: 32px;
	background: url(../images/noplay.png) no-repeat center center/32px 32px;
}

.audioplayer{
	position: relative;
	z-index: 1;
	height: 32px;
	text-align: right;
	font-size: 14px;
	color: #666;
}

.audioplayer > div
{
	position: absolute;
}
.audioplayer-bar div
{
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.audioplayer-bar-loaded
{
	background-color: #93c9ff;
	z-index: 1;
}