注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

使用speakker实现Douban FM音乐播放  

2012-02-02 20:42:49|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
speakker的下载地址: http://www.speakker.com
下载完成后,阅读API,如何实现Html5播放器。

播放单个音乐
$(document).ready(function() { 
$('#speakkerSmall').speakker({
file: 'music.mp3',
title: 'one single MP3',
theme: 'dark',
poster: 'cover.jpg'
});
});

播放音乐列表 (注意 playlist:true)
$(document).ready(function() {  
$().speakker({
file: 'http://www.speakker.com/opentape/code/projekktor.php',
playlist: true,
theme: 'light',
admin: 'http://www.speakker.com/opentape/code/login.php',
lastfm: 'http://www.lastfm.de/music/paniq'
});
});
音乐列表的数据格式

{
"playlist": [
{
"0": {
"src": "http://www.speakker.com/opentape/songs/paniq%20-%20Beyond%20Good%20and%20Evil%20-%2007%20The%20Only%20Way%20Out%20Is%20Through.ogg",
"type": "audio/ogg"
},
"1": {
"src": "http://www.speakker.com/opentape/songs/paniq%20-%20Beyond%20Good%20and%20Evil%20-%2007%20The%20Only%20Way%20Out%20Is%20Through.mp3",
"type": "audio/mp3"
},
"config": {
"title": "The Only Way Out Is Through",
"poster": "http://www.speakker.com/opentape/songs/cover.jpg"
}
},
{
"0": {
"src": "http://www.speakker.com/opentape/songs/paniq%20-%20Beyond%20Good%20and%20Evil%20-%2001%20Ultimate%20Downfall.ogg",
"type": "audio/ogg"
},
"1": {
"src": "http://www.speakker.com/opentape/songs/paniq%20-%20Beyond%20Good%20and%20Evil%20-%2001%20Ultimate%20Downfall.mp3",
"type": "audio/mp3"
},
"config": {
"title": "Ultimate Downfall",
"poster": "http://www.speakker.com/opentape/songs/cover.jpg"
}
} ]

}

这时候只需要将豆瓣FM的JSON数据转换成speakker的数据格式,使用JQuery的Ajax方法

var songList = [];

$.ajax({
url : "http://douban.fm/j/mine/playlist?type=n&channel=1",
dataType : "json",
cache: false,
async: false,
success : function(data) {
$('.playList').empty();
$.each(data['song'], function(n, value) {
var song = {};
song["0"] = {
"src" : value.url,
"type" : "audio/mp3"
};
song["config"] = {
"ID" : n+1,
"title" : value.title,
"poster" : value.picture,
"start" : true
};
songList.push(song);
});
}
})

完整代码

<script type="text/javascript">
$(document).ready(function() {
function getSongList(){
var songList = [];
$.ajax({
url : "http://douban.fm/j/mine/playlist?type=n&channel=1",
dataType : "json",
cache: false,
async: false,
success : function(data) {
$('.playList').empty();
$.each(data['song'], function(n, value) {
var song = {};
song["0"] = {
"src" : value.url,
"type" : "audio/mp3"
};
song["config"] = {
"ID" : n+1,
"title" : value.title,
"poster" : value.picture,
"start" : true
};
songList.push(song);
$('.playList').append("<li>"+(n+1)+"&nbsp;"+value.title+"</li>");
});
}
})
return songList;
}

var songList = getSongList();

$('.speakkerSmall').speakker({
file: {"playlist" : songList},
playlist: true,
poster: 'img/album-cover.png',
title: 'Douban FM',
theme: 'dark'
});

/*$().speakker({
file: {"playlist" : songList},
playlist: true,
theme: 'dark',
admin: 'http://www.speakker.com/opentape/code/login.php',
lastfm: 'http://www.lastfm.de/music/paniq',
autoplay: true,
loop: true
});*/

$('.next').click(function(){
$('.speakkerSmall').speakker({
file: {"playlist" : getSongList()},
playlist: true,
poster: 'img/album-cover.png',
title: 'Douban FM',
theme: 'dark'
});
});
});
</script>


将下载的包中的Demo修改一下,就OK啦,很简单。(对了,目前测试后只支持IE9
使用speakker实现Douban FM音乐播放 - 星期五 - 星期五


使用speakker实现Douban FM音乐播放 - 星期五 - 星期五
  评论这张
 
阅读(1329)| 评论(1)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017