博客園自定義設計（一）添加音樂播放器

還記得第一次接觸可以自定義代碼的博客是新浪和QQ空間。

不過現在都已經被禁了。

突然發現博客園還是這么朴實，業界良心。好吧，重溫下小時候逃課上網的感覺。

 

一、開通JS權限

要想實現很多自己喜歡的效果，js是必不可少的。

點擊設置>定制代碼，需要郵件申請，ok，我們發送郵件，等待可愛的管理員們給我們審核開通。

二、自定義音樂

高中時候用新浪博客和QQ空間的時候，寧可什么模塊都沒有，也要加個播放器，和自己喜歡的音樂，來彰顯與眾不同的逼格。

首先自己寫了個播放音樂的jquery插件，非常簡陋（工作中涉及不到前端的東西，沒有規范的學習過），見附件。

simplemusic api:

參數名	類型	取值	說明
loop	boolean	可選，true,false	是否循環播放
autoplay	boolean	可選，true,false	是否自動播放
urls	array	string,string	播放地址列表

 

 

 

 

使用方法：

$(function(){
        $(".audioplay").simplemusic({
            autoplay:true,
            urls:["http://m1.music.126.net/gpi8Adr_-pfCuP7ZXk_F2w==/2926899953898363.mp3"]
        });
    });

 

插件代碼：

 

(function($){
	/*
		simpler music player
	*/
	var _playstatus = false;
	var _palyInterval;
	var n=0;
	$.fn.simplemusic=function(settings){
		$(this).css({"width":"44px","height":"44px","position":"fixed","top":"10px","right":"10px","cursor":"pointer","background":"url(http://images.cnblogs.com/cnblogs_com/luochengqiuse/705731/o_music_note_big.png)"}).bind("click",function(){
			if(_playstatus){
				pause(this);
			}else{
				play(this);
			}
		});
		var audio = document.createElement("audio");
		$(audio).attr("id","audioPlayer").css("display","none").prependTo(this);
		
		if(settings.loop==true){ $(audio).attr("loop","loop");}
		if(settings.urls && settings.urls instanceof Array){
			for(var i in settings.urls){
				var source = document.createElement("source");
				$(source).attr("src",settings.urls[i]).appendTo($(audio));
			}
		}
		if(settings.autoplay == true){$(this).click();}
	};
	function play(e){
		_palyInterval = setInterval(function(){
			startRotate(e);
		},10);
		$("#audioPlayer")[0].play();
		_playstatus=true;
	}
	function pause(){
		$("#audioPlayer")[0].pause();
		clearInterval(_palyInterval);
		_playstatus=false;
	}
	function startRotate(e){
		n=n+1;
		e.style.transform="rotate(" + n + "deg)";
		e.style.webkitTransform="rotate(" + n + "deg)";
		e.style.OTransform="rotate(" + n + "deg)";
		e.style.MozTransform="rotate(" + n + "deg)";
		if (n==360){n=0}
	}
})(jQuery);

 

我已經把插件上傳到了自己的文件中，可以直接鏈接使用:

點擊下載

 

然后加入到我們的自定義代碼里：

 

效果如下：

 

 

 

好了。到這里，音樂已經可以播放了。