(原创文章转载请出示页尾版权信息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
如果解决了你的困扰, 赏杯咖啡吧!
正文字体: 苍耳字库(屏幕显示字体)·苍耳今楷