XiaMiPlayer插件 for typecho 0.8(更新至2.1版)

2.1版对应的是typecho 0.8版,如果想要下载对应最新版(typecho 0.9)的同学,请跳转到此页:XiaMiPlayer插件 for typecho 0.9

2.1版新增自定义播放器颜色(换颜色,全球浪潮~),默认提供了六种颜色,同时用户也可以自定义颜色哟!

2.0版本新增同步显示歌词和外链MP3地址的支持,提供移动端支持(需要支持html5)!欢迎大家更新使用!

本插件是基于MiniPlay1g1g插件的基础上修改过来的,所以插件的基本样式和MiniPlay1g1g是一样的,如果大家介意的话我会在下个版本中修改过来。在此感谢MiniPlay1g1g插件的作者vfasky君给我们带来了这么好的一个插件。

XiaMiPlayer插件的主要功能:

  • 根据关键词获取虾米音乐搜索结果
  • 生成音乐播放器代码,并自动插入到文中
  • 歌曲同步显示歌词(如果歌曲有歌词的话,2.0版本以上支持)
  • 支持插入外链MP3地址(2.0版本以上支持)
  • 自定义播放器样式(2.1版以上支持)

本插件是在typecho 0.8的基础上开发的,没有做对老版本兼容的测试,没有做对其它编辑器兼容的测试,同时没有做浏览器兼容测试,以及各种其它有的没有的测试。如果有不能用的,欢迎大家来报BUG,我会尽我所能DeBug的。

更新:
2.1 - 新增自定义播放器样式功能
2.0 - 更换播放器代码,支持所有支持HTML5平台的客户端。增加同步显示歌词功能,以及支持外链MP3地址。
1.3 - 修改翻页样式,修复了开启插件之后无法使用附件的插入功能。
1.2 - 增加了Ckeditor, xheditor编辑器的支持,修复了之前支持的编辑器无法插入的问题。
1.1 - 增加了TinyMce, KindEditor, FCKeditor三个编辑器的支持。

下载地址:BOX | 百度云

自建虾米音乐搜索

<button>搜索</button>

加载jQuery库文件


添加获取搜索结果的异步事件,增加搜索框回车快捷获取结果效果。第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('
载入更多
'); } $.each(data.results, function(i,item){ $('

'+decodeURIComponent(item.song_name)+' - '+decodeURIComponent(item.artist_name)+'

').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 = '';
    $("#show").html(html);
    $("#show").append('<textarea onfocus="this.select();" onmouseover="this.focus()">'+html+'</textarea>');
}

-->

预览

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

原理

本段代码主要利用了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" />

<button>搜索</button>

加载jQuery库文件


添加获取搜索结果的异步事件,增加搜索框回车快捷获取结果效果。第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('
载入更多
'); } $.each(data.results, function(i,item){ $('

'+decodeURIComponent(item.song_name)+' - '+decodeURIComponent(item.artist_name)+'

').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 = '';
    $("#show").html(html);
    $("#show").append('<textarea onfocus="this.select();" onmouseover="this.focus()">'+html+'</textarea>');
}