博客园自定义设计（一）添加音乐播放器

还记得第一次接触可以自定义代码的博客是新浪和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);

我已经把插件上传到了自己的文件中，可以直接链接使用:

点击下载

然后加入到我们的自定义代码里：

效果如下：

 

好了。到这里，音乐已经可以播放了。