打造自己的WP换页不间断音乐播放器

Oct 7th Thu, 2010/JiaJieChan/折腾/4,204 阅读/6 评论

(原创文章转载请出示页尾版权信息 By.JiaJie Chan (陈家杰) )播放器效果

[mp3j track="http://3g.mobase.cn/download/uploadFiles/e8d38yq10051650747.mp3" autostart=yes |titles=你的味道 |artists=Hotcha]

一边学一边听听歌吧! ..... 3:)

这个播放器制作方法早就在我的论坛(现已荒废)出现过,效果见我的博客,顶部右方的位置。

 

播放器效果

 

 

今天我来教大家如何做出这个效果,有人说框架不利于SEO,对于这种方式来说不用怕,这个是一个链接,点击了才会出现框架,对SEO没有什么影响,百度蜘蛛不会自己去玩这个播放器吧。

这种方法本来是用89525.com  提供的播放器服务,可是 89525.com已经倒闭了,因此我们要换另外一个服务商,就是www.zzsky.cn,下面的两个代码都是一样的,只是播放器服务商的链接不同,如果要更换其他服务商,请按照前两个例子修改相关代码。

注意:以下代码可能在粘贴发布的时候出现问题,下面全部引号、双引号都为英文半角状态输入,如有误请自行批量替换!


 

  1. 第一步 申请播放器
  2. 第二步 制作JS文件
  3. 第三步 上传JS文件
  4. 第四步 调用JS代码


1.到http://www.zzsky.cn/service/申请一个网页播放器


2.制作播放器JS文件

function musicmode(){
if(window.parent==self){
var playercode="<html><head><title>陈家杰's Blog | 陈家杰个人中文博客</title><meta http-equiv="content-type" content="text/html;charset=gb2312"></head><frameset rows="730,30" framespacing="0" frameborder="0" border="0"><frame name="content" src="http://www.zzsky.cn/service/player/url.asp" scrolling="yes"><frame name="player" src="http://player1.89525.com/p/MusicMode.php?user=jiajieit" scrolling="no" noresize></frameset><noframes><body></body></noframes></html>";
document.write(playercode);
}
}
function quietmode(){
top.location=self.location;
}

如果更换了服务商直接改上面的红色即可,请按照格式,例如 “” 改为 “/”。

例如:89525.com倒闭了,现要改成zzsky.cn的

function musicmode(){
if(window.parent==self){
var playercode="<html><head><title>陈家杰's Blog | 陈家杰个人中文博客</title><meta http-equiv="content-type" content="text/html;charset=gb2312"></head><frameset rows="730,30" framespacing="0" frameborder="0" border="0"><frame name="content" src="http://www.zzsky.cn/service/player/url.asp" scrolling="yes"><frame name="player" src="http://www.zzsky.cn/service/player/player7/?user=jiajieit&playername=%BC%D2%BD%DC%BF%C6%BC%BC" scrolling="no" noresize></frameset><noframes><body></body></noframes></html>";
document.write(playercode);
}
}
function quietmode(){
top.location=self.location;
}

 

具体的红色字代码可以到该服务商找到,只是路径不同,请注意后面?user=jiajieit&playername=%BC%D2%BD%DC%BF%C6%BC%BC,不同服务商所提供的代码是不同的,例如89525.com,他提供的是一个固定地址,若修改播放器样式只需要后台修改;而zzsky.cn的在后台修改是无效的,修改后会重新生成一段代码,换句话来说修改后台只是为了获取新的代码,要真正修改样式还需要用新的代码覆盖掉旧的。


注意:保存的格式一顶要为UTF-8,可以用记事本打开,另存为选择UTF-8制式,保存。

 

3.把上面制作的JS文件上传到空间,以我为例就在博客更目录新建一个images文件夹然后上传JS文件,文件名可以自己改。

 

4.在适当的地方加入以下代码,地方可以自己选择只要能显示就可以,例如header,footer等等,现在一般的主题都带后台,也可以在通用显示的地方加入。

<script src="http://blog.jiajieit.net/images/music.js"></script><span style="position:absolute;top:33px;left:1135px"><a href="javascript:musicmode()" style="color:green" title="启动背景音乐播放器(换页不间断)">音乐模式</a> | <a href="javascript:quietmode()" style="color:blue" title="把播放器关闭了…">静音模式</a></span><script src="http://blog.jiajieit.net/images/music.js"></script>
红色的字改为自己的JS文件地址;把绿色的字改为要显示出来的文字;把蓝色的字改为合适的位置,Top为y轴;Left为x轴;开始位置由左到右由上到下,数值越小越接近开始位置。

注意:以上代码可能在粘贴发布的时候出现问题,上面全部引号、双引号都为英文半角状态输入,如有误请自行批量替换!
声明: 本文采用 BY-NC-SA 协议进行许可. 转载请出示版权信息.
支持使用Gravatar头像

JiaJieChan提醒您: 要回复某人的评论,请将鼠标移动到那条评论,评论右边就会出现Replay字样(一定是要鼠标指针中的评论),在评论框中出现的的后面下一行填写评论提交即可.被回复者将收到邮件通知噢; 要是想直接对本文评论请直接在评论框留言即可,然后点提交.