存档

文章标签 ‘音乐播放器’

本博音乐播放器已支持html5

May 8th Wed, 2013/JiaJieChan/日志/1,323 阅读/2 comments

html5的出台,也由于flash不再开发移动版了,为了以后的手机版本,所以趁着这几天将原来的audioplay删除了,改成html5的播放器。之前的大部分歌曲均已修改成html5格式的播放器,以后也全面使用html5的播放器。目前在chrome android版上测试可以正常播放音乐。

这是本博支持html5的第一步。

下面是歌曲页面的传送门#: http://blog.jiajieit.net/love-diving-super-girls-hong-kong/

AudioPlayer插件边栏调用及使用技巧

Apr 28th Sat, 2012/JiaJieChan/折腾/1,148 阅读/没有评论

在Wordpress中使用AudioPlayer播放器插件的人很多,为了大家能够更方便的使用这个插件,特意向大家介绍一下相关的使用技巧和方法。部分内容是自己在使用中发现的,而部分方法是转帖的,所以也希望出示本站的版权信息。出示版权信息只是为了保障大家的博主链接,并没有什么利益所在。

使用Audio Player在WP的文章或首页播放音乐

基本用法:如果在文章里面添加音乐,只要在HTML编辑模式下添加[@audio:http://www.你的域名.com/path/to/MP3文件名字.mp3]即可。

注意,http://www.你的域名.com/path/to/MP3文件名字.mp3 为你的mp3歌曲地址。

 

如何实现一首歌的重复播放

调用下面代码时请将前面的“@”去掉!

只要在输出链接后添加|loop=yes就可以了,例如

[@audio:http://www.你的域名.com/path/to/MP3名字.mp3|loop=yes]

Read More...

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

Oct 7th Thu, 2010/JiaJieChan/折腾/4,076 阅读/1 comment

(原创文章转载请出示页尾版权信息 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轴;开始位置由左到右由上到下,数值越小越接近开始位置。

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