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看看。我也會接着作些高級的功能，有興趣的同志能夠接着來。