自建虾米音乐搜索

提醒:本文最后更新于 3185 天前,文中所描述的信息可能已发生改变,请谨慎使用。

预览

预览地址:虾米音乐搜索  主要目的是搜索音乐并获取播放器代码

原理

本段代码主要利用了http://www.xiami.com/app/nineteen/search/key/搜索内容/page/搜索结果页数虾米这个隐藏的API,例如http://www.xiami.com/app/nineteen/search/key/传奇/page/1可以获取到搜索结果总数已经相关歌曲的信息等。

简单的思路是搜索框输入搜索信息点击搜索AJAX载入API搜索结果并返回给页面解析显示,单击一条歌曲时根据搜索结果获得的歌曲ID返回播放器代码。

代码分析

首先是基本的HTML代码

<input type="text" id="text" value="" />
<input type="hidden" id="page" value="1" />
<!--隐藏的input用来存放页面数-->
<button>搜索</button>
<!--#result用来显示歌曲列表 | #navi增加载入更多特效 | #show用来显示播放器代码-->
<div id="list">
    <div id="result"></div>
    <div id="navi"></div>
</div>
<div id="show"></div>

加载jQuery库文件

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>

添加获取搜索结果的异步事件,增加搜索框回车快捷获取结果效果。第7行用于清除播放器代码显示结果,以防是得到播放器显示结果后重新搜索。第10行用于当搜索结果时不加载载入更多代码。

function search() {
  $.ajax({
      url: "http://www.xiami.com/app/nineteen/search/key/"+$('#text').val()+"/page/"+$('#page').val(),
      type: "get",
      dataType: "jsonp",
      success: function(data, status) {
                  $('#show').html('');
                  $("#list").css('display','block'); 
                  if(data.total / 8 != 1) {
                  	$('#navi').html('<center>载入更多</center>');
                  }
                  $.each(data.results, function(i,item){
                  	$('<p onclick="show(\''+item.song_id+'\');">'+decodeURIComponent(item.song_name)+' - '+decodeURIComponent(item.artist_name)+'</p>').appendTo('#result');
                  });
                },
	  error: function() {
             	alert('failed!');
             }
	});
}
//当点击搜索按钮时先清除结果显示防止是重新搜索,然后再一步加载搜索结果
$('button').click(function(){
	$("#result").html('');
	search();
});
//搜索框回车时触发搜索按钮点击事件
$("body").keydown(function() {
	if (event.keyCode == "13") {
    	$('button').click();
    }
});

增加点击歌曲名获取歌曲播放器代码事件,先是在页面中显示播放器,再用一个textarea框显示引用代码,并增加了当textarea框获得焦点时自动全选框内代码效果。

function show(id) {
    //搜索结束搜索起始页面自动返回到1
    $('#page').val('1');
    $('#list').css('display', 'none');
    var html = '<embed src="http://www.xiami.com/widget/0_'+id+'/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed>';
    $("#show").html(html);
    $("#show").append('<textarea onfocus="this.select();" onmouseover="this.focus()">'+html+'</textarea>');
}
Avatar
怡红公子 擅长前端和 Node.js 服务端方向。热爱开源时常在 Github 上活跃,也是博客爱好者,喜欢将所学内容总结成文章分享给他人。

44 评论

Tranch Firefox38.0 Mac OS 10.10
2015-06-14T11:26:17.000Z 回复
一上来就拿我开刀……
公子 Chrome44.0 Windows 7
2015-06-14T11:53:48.000Z 回复
@Tranch .... 略冷的笑话啊…
旧旧的 Chrome42.0 Windows 7
2015-05-29T03:25:18.000Z 回复
不能听了!?
Chrome31.0 Windows 7
2015-05-26T08:29:40.000Z 回复
@ 公子 你好。麻烦看一下我的问题
旧旧的 Chrome42.0 Windows 7
2015-05-29T03:32:03.000Z 回复
@ 貌似是:Cookie: _xiamitoken=e0c5007c2d10d7a02316c4522f8905c1; _unsign_token=a3574f9cf17c325b663543414d36c98d;;sec=5567de89d39816bb8b15ef38bf14cb7c2e36f17bCookie: _xiamitoken=e0c5007c2d10d7a02316c4522f8905c1; _unsign_token=a3574f9cf17c325b663543414d36c98d;;sec=5567de89d39816bb8b15ef38bf14cb7c2e36f17b;sec=5567de89acf7957511e2253c5ba806f0c3930787{"id":"3678741","title":"\u5fc3\u5899","artist":"\u90ed\u9759","location":"http:\/\/m5.file.xiami.com\/578\/1578\/328545\/3678741_2371331_l.mp3?auth_key=b014be1d1faaecf478ce495419f8dfe0-1432944000-0-null","lyric":"http:\/\/img.xiami.net\/lyric\/upload\/41\/3678741_1356506611.lrc","pic":"http:\/\/img.xiami.net\/images\/album\/img78\/1578\/3285451383293977_4.jpg"} 前边那些Cookie 搞的鬼
古奇 Firefox38.0 Windows 7
2015-05-31T02:25:04.000Z 回复
@旧旧的你找到原因了吗?
古奇 Firefox38.0 Windows 7
2015-05-31T02:35:13.000Z 回复
@公子博主,有办法解决吗?
Chrome31.0 Windows 7
2015-05-26T08:26:18.000Z 回复
@公子音乐播发貌似又不行了,和上次那个问题一样。能搜索出歌名和音乐id,但通过音乐id获取的音乐外链location播放不了。请指教,谢谢!
阿伦 Firefox38.0 Windows 7
2015-05-21T02:20:26.000Z 回复
博主,音乐搜索又用不了了,有没有办法?
公子 Chrome44.0 Windows 7
2015-05-21T04:11:40.000Z 回复
@阿伦 可以用。
阿伦 Firefox38.0 Windows 7
2015-05-21T04:03:32.000Z 回复
@公子是能搜索出歌名和音乐id,但通过音乐id获取的音乐外链location播放不了。请指教,谢谢!
公子 Chrome44.0 Windows 7
2015-05-21T04:32:23.000Z 回复
@阿伦 可以了。
阿伦 Firefox38.0 Windows 7
2015-05-21T04:38:46.000Z 回复
@公子是可以了,谢谢谢!
阿伦 Firefox38.0 Windows 7
2015-05-27T03:14:34.000Z 回复
@ 公子 博主你好!音乐测试又貌似不行了,能否有办法?
风雨 Chrome31.0 Windows 7
2014-11-05T06:28:10.000Z 回复
我刚试了下http://songs.sinaapp.com/search/key/喜欢你/page/1 这个可以使用 我想知道 通过ID获取 歌曲地址的API是哪个 麻烦博主 把文档重新更新下
王权道 Chrome31.0 Windows 8.1
2014-08-01T16:56:11.000Z 回复
我参加软件大赛,作品中需要实现音乐搜索的功能,本想用豆瓣的接口,可惜豆瓣没有api,我想采用你这种方式来获取音乐资源,求指导我该怎么做
公子 Chrome35.0 Linux x86_64
2014-08-02T03:35:23.000Z 回复
@王权道搜索: http://songs.sinaapp.com/search/key/xxoo/page/1 歌曲信息: http://songs.sinaapp.com/apiv3.php?id=123456 另外,豆瓣FM是有API的。
王权道 Chrome31.0 Windows 8.1
2014-08-02T03:39:43.000Z 回复
@公子麻烦问一下虾米的这个能用吗,我想在安卓手机上实现你做的虾米这一个
公子 Chrome35.0 Linux x86_64
2014-08-02T03:46:59.000Z 回复
@王权道自建API不保证长期有效。
王权道 Chrome31.0 Windows 8.1
2014-08-02T03:52:29.000Z 回复
@公子豆瓣没有开发好的sdk,要是用是不是太麻烦了?虾米这个要是用的话我该怎么做啊,?有点迷茫,不知该从哪下手,麻烦你了,再给我指指思路吧
公子 Chrome36.0 Windows 7
2014-08-02T04:06:19.000Z 回复
@王权道官方没有,网上搜索下应该有其它开发者写的SDK吧。 直接访问URL你就知道该怎么做了,换个参数简单的GET而已。
王权道 Chrome31.0 Windows 8.1
2014-08-02T04:13:36.000Z 回复
@公子好的,我研究一下,谢谢你啊,麻烦了
彼岸 Chrome35.0 Windows 7
2014-06-05T10:18:51.000Z 回复
http://songs.sinaapp.com/search/key/xxxx/page/1这个是你自己解析的,放在新浪开发者永久有效吗,我想自己做个,就用你这个解析,能扛的住吗
公子 Chrome37.0 Windows 7
2014-06-05T10:55:46.000Z 回复
@彼岸 我自己在用的话应该能保证有效...其它的时候就不能保证了。代码就在前几条评论里头,担心的话可以在自己的服务器上运行。
彼岸 Chrome35.0 Windows 7
2014-06-06T07:24:48.000Z 回复
我用的是java,通过其他方式把页面解析了,拿到歌曲id,现在就是通过歌曲id获取歌曲链接,看了你php写的,看不懂,能不能简单的告诉我通过歌曲id获取歌曲路径,或者有相关文章也行
公子 Chrome37.0 Windows 7
2014-06-06T07:32:05.000Z 回复
@彼岸 http://www.xiami.com/song/playlist/id/123456
彼岸 Chrome35.0 Windows 7
2014-06-06T07:42:04.000Z 回复
@公子你说的这个接口,我在http://www.blackglory.me/xiami-music-xml-information-interfaces/这篇文章已经看过,具体怎么利用location里面的字符,计算出类似这样的链接http://m5.file.xiami.com/712/55712/435293/1771115301_3944660_l.mp3?auth_key=2a2dc8170bb24ae578edf75b0ce3faea-1402012800-0-null
彼岸 Chrome35.0 Windows 7
2014-06-06T07:43:07.000Z 回复
@彼岸本身新手,刚接触,很多不懂,正在学习,谢谢了
公子 Chrome37.0 Windows 7
2014-06-06T08:10:20.000Z 回复
@彼岸http://imnerd.org/player-lyric-by-audio.html
游客 Chrome35.0 Windows 7
2014-06-03T05:53:55.000Z 回复
可以分享下http://songs.sinaapp.com/search/key/xx/page/1源码吗?
游客 Chrome35.0 Windows 7
2014-06-03T05:55:32.000Z 回复
还有http://imnerd.org/lab/search/api.php这个源码
公子 Chrome35.0 Windows 7
2014-06-03T06:19:48.000Z 回复
@游客 不要总是做伸手党,自己仔细看下页面内容好么,第一个URL的源码就在你头顶的几个评论上就有了,敢不敢不让博主这么累。第二个URL的在这里(其实我在相关文章里头也分享出来了好么)。
liu Chrome34.0 Mac OS 10.9.2
2014-05-21T14:58:49.000Z 回复
为什么我通过浏览器输入http://www.xiami.com/app/nineteen/search/key/xx/page/1,返回的是空页面呢,
公子 Chrome34.0 Windows 7
2014-05-21T03:33:03.000Z 回复
@liu 文章是很早前写的啦,虾米半个月前把这个接口给封掉了,好忧桑。你可以用 http://songs.sinaapp.com/search/key/xx/page/1 代替。
旧旧的 Chrome33.0 Windows 7
2014-05-29T03:52:24.000Z 回复
http://songs.sinaapp.com/search/key/xx/page/1 代替。 @公子 这个好像也不能用了啊!!
公子 Chrome35.0 Windows 7
2014-05-29T04:02:37.000Z 回复
@旧旧的 我这没问题。
蛋蛋来了 IE10.0 Windows 8
2014-09+00T14:25:46.000Z 回复
@公子 这个json里面没有专辑图片的链接,怎么解决呢?
公子 Chrome37.0 Windows 7
2014-09-09T03:06:19.000Z 回复
@蛋蛋来了 这个只是搜索API,具体歌曲信息请用获取歌曲信息的API来拿。
蛋蛋来了 Chrome47.0 Windows 10
2016-03-09T13:06:28.000Z 回复
@公子 博主,最近因为需要再次使用你这个api,但不能用了。你的新浪云关了吗?
小草 Chrome22.0 Linux i686
2014-05-20T07:31:53.000Z 回复
求http://songs.sinaapp.com/search/key/xxxx/page/1的源码。
公子 Chrome34.0 Windows 7
2014-05-20T07:51:32.000Z 回复
@小草 很简单,就是抓页面解析而已,解析用了[phpQuery](https://code.google.com/p/phpquery/)你自己去下载吧,至于URL的格式用的是.htaccess。 0, 'results'=>array()); foreach(pq("table.track_list tr:not(:first)") as $song) { $id = pq('input', $song)->attr('value'); $name = pq('td.song_name a', $song)->text(); $artist = pq('td.song_artist a', $song)->text(); $album = pq('td.song_album a', $song)->text(); $songs['results'][] = array('song_id'=>$id, 'song_name'=>$name, 'artist_name'=>$artist, 'song_album'=>$album); $songs['total'] ++; } JSONP($songs); ?>
小草 Chrome22.0 Linux i686
2014-05-20T11:26:12.000Z 回复
@公子谢了~
apisky Chrome30.0 iOS 6.1
2013-10-23T16:52:10.000Z 回复
你对虾米研究很深刻了。
小明猪 Safari6.0 Mac OS 10.8.2
2012-12-31T03:33:32.000Z 回复
技术文,过来支持一个好了~