(原创文章转载请出示页尾版权信息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轴；开始位置由左到右由上到下，数值越小越接近开始位置。
注意：以上代码可能在粘贴发布的时候出现问题，上面全部引号、双引号都为英文半角状态输入，如有误请自行批量替换!
Last modification：June 25, 2021
© Allow specification reprint
如果解决了你的困扰, 赏杯咖啡吧!
正文字体： 苍耳字库（屏幕显示字体）·苍耳今楷