先看看效果---》传送门《---，如果感觉没什么大不了的就可以绕道了(==)

HTML结构其实很简单，不要在意那个音频的地址。 首先是audio标签，是我们这个小东西的核心。其主要的属性可以点这里。

做点前期的小工作。把背景弄黑，让播放器居中。

body {

background: black;

}

#maindiv {

width: 300px;

margin: 0px auto;

position: relative;

}

我们会将这个标签进行隐藏，本来我们就是不想用浏览器的默认样式。

#vid {

display : none;

}

接下来，我们开始给我们的播放器上样式。首先是最外面的标签。

.vid-span {

width: 300px;

height: 300px;

border-radius: 100%;

position: relative;

top: 0px;

left: 0px;

background: -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */

background: -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */

background: -o-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 12+ */

background: -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */

background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */

box-shadow:0px 0px 15px #7db9e8;}

这里使用一个在线的背景制作工具，各种兼容，神器不解释。想用的可以猛戳这里。

在进行下一步之前，我给大家介绍点知识，就是用字体代替图片。我做的这个播放暂停键其实是就是两个图标，大家可以用浏览器尽量放大看看，你就会发现这个按键非常清晰。这就是字体的好处，放大而不失真，大概就是这个意思吧。而且体积极小。我是使用了一个网站自动生成了自定义的字体，使用的时候去服务器加载。这样的网站其实还是挺多的，我在这放一个链接，我感觉使用的方法还是相当简单的，就不做太多的介绍了。

↑这就是把图标引入的方式。

↓为了不太过于死板，把图标放对位置后，我们再加点过度动画。

.play-button {

font-size: 100px;

position: absolute;

top: 100px;

left: 100px;

}

.play-button span {

transition: color linear 0.2s, box-shadow linear 0.2s;

}

.play-button span:hover {

color: #F7FCFA;

text-shadow:0px 0px 15px #F7FCFA;

}

这样我们就把HTML和CSS写的差不多了。这次就简单的写写播放暂停，音量神马的之后再写。

$(document).ready(function() {

var vid = $("#vid").attr({

// 'autoplay' : 'autoplay',

// 'controls' : 'controls',

'loop' : 'loop',

'preload' : 'auto'

});

var vidDOM = vid[0];

vidDOM.volume = 0.2;

$(".play-button").on({

click : function(){

$(this).children().toggleClass(function(){

if ($(this).hasClass("icon-play")) {

return "icon-pause";

} else {

return "icon-play";

};

});

if (vidDOM.paused) {

vidDOM.play();

} else {

vidDOM.pause();

};

return false;

}

});

});

这里面有个小坑，直接用JQ返回的不是多媒体对象，里面没有相关的方法。解决的方法就是用var vidDOM = vid[0];这种方式获取。将这个变量保存，方便接下来的操作。说实话，代码非常简单，我就不多说了。

有同志可能想立马写一些高级的功能，可以查看这里，或去W3C看看。我也会接着做些高级的功能，有兴趣的同志可以接着来。