android进度条竖条,音频（audio）自定义样式以及控制操作面板

简介

audio为html5中的新属性。定义声音，比如音乐或者其他的音频流。在ie8(包括)以及更早的版本并不支持。

我的自以为

一直以为自定义样式，就要添加相应的控制js代码，所以是望而却步。此次项目中正好出现了这一题目，而jacques同学则完美的呈现了这个音频效果。so决定学习一下，并且记录一下，有理解错误或者不能理解的地方还希望jacques给指教一下。

样式

audio默认提供一个控制面板，这个控制面板则可以由我们自己来定义其显示状态

html代码

00:00

0

css代码

.Audio{position: relative; width: 500px; margin: 0 auto;}

.pgs{width: 326px; margin: 0 auto 30px; background-color: #E3E8EE; text-align: center; position: relative; overflow: hidden; height: 35px;}

.pgs-play{position: absolute; top:0; left: 4.65%; width: 0; height: 100%; background-color: #4785f9; z-index: 1;}

.pgs img{width: 100%; position: relative; z-index: 2;}

.audio-name{position: absolute; top: 0; width: 100%; left: 0;text-align: center; color: #666; font-size: 12px;}

.controls{width: 100%; height: 40px; padding: 0; text-align: center;}

.play-pause{border: 0; outline: 0; padding: 0; width: 40px; height: 40px; margin: 0 28px; background: none; display: inline-block; vertical-align: middle;}

.icon-play{width: 40px; height: 40px; background: url(images/play.png) no-repeat; display: block; color: #478f59;}

.icon-pause{width: 40px; height: 40px; background: url(images/pruse.png) no-repeat; display: block; color: #478