HTML5-定制音频播放器-audio

先看看效果---》传送门《---，若是感受没什么大不了的就能够绕道了（==）

<!-- lang: html -->
	<div id="maindiv">
	<audio id="vid" name="media">
		<source src="http://zhangmenshiting.baidu.com/data2/music/41665262/14992037190800128.mp3?xcode=37e656673d5f0515b46af84fcbd20586" type="audio/mp3">
	</audio>

	<div class="vid-span">
		<div class="play-button">
			<span aria-hidden="true" class="icon-play"></span>
		</div>
	</div>
</div>

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

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

<!-- lang: css -->
body {
    background: black;
}

#maindiv {
	width: 300px;
	margin: 0px auto;
	position: relative;
}

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

<!-- lang: css -->
#vid {
    display : none;
}

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

<!-- lang: css -->
.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;}

这里使用一个在线的背景制做工具，各类兼容，神器不解释。想用的能够猛戳这里。

在进行下一步以前，我给你们介绍点知识，就是用字体代替图片。我作的这个播放暂停键实际上是就是两个图标，你们能够用浏览器尽可能放大看看，你就会发现这个按键很是清晰。这就是字体的好处，放大而不失真，大概就是这个意思吧。并且体积极小。我是使用了一个网站自动生成了自定义的字体，使用的时候去服务器加载。这样的网站其实仍是挺多的，我在这放一个连接，我感受使用的方法仍是至关简单的，就不作太多的介绍了。

<!-- lang: html -->
<span aria-hidden="true" class="icon-play"></span>

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

↓为了避免太过于死板，把图标放对位置后，咱们再加点过分动画。

<!-- lang: css -->
.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写的差很少了。此次就简单的写写播放暂停，音量神马的以后再写。

<!-- lang: js -->
$(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看看。我也会接着作些高级的功能，有兴趣的同志能够接着来。