https://imnerd.org/tags/%E9%9F%B3%E4%B9%90.htmlRecent content in 音乐 on 怡红院落zh-CN© 2021Thu, 07 Nov 2013 13:36:00 +0800https://imnerd.org/xiamiplayer-plugin-for-typecho-0-9.html2013-01-07https://imnerd.org/xiamiplayer-plugin-for-typecho-0-9.html曾经大家以为Typecho还会蓬勃发展的时候，它停下了脚步；现在大家以为Typecho必然行之将死的时候，它居然更新了！是的，在半个月前，历时几年后Typecho终于发布了新版。虽然只是小小的0.1，但是这是一个契机，之后Typecho开始了疯狂的更新，Github上也开始活跃了起来。不管怎么说，这是一件值得令人高兴的事情。 新版最重要的一个功能就是把Markdown编辑器给加上去了，而且样式上都有比较大的变化，所以我的XiaMiPlayer插件对于新版也出现了一点问题。在前几个版本Typecho终于恢复了文章/页面编辑页面上的插件接口之后，我就立马做了一下优化。目前这个版本应该能比较完美的支持Typecho 0.9了。 目前的版本号是3.0.1，算是Alpha版吧。如果大家有什么意见建议的话请留言。以后的打算是这样的，基数版本号（3.x）对应新版，偶数版本号（2.x）对应老版本，想要下载老版本的可以在这里下载：XiaMiPlayer插件 for typecho 0.8。 本插件更新至3.0.2版，增强了插件与Typecho后台的兼容性（推荐使用默认Markdown编辑器效果会更好），并增加了多个快捷键。 快捷键一览： Ctrl + Shift + M ：进入插件 Esc ：退出插件 Ctrl + ← ：虾米搜索 Ctrl + → ：输入链接 Ctrl + ↑ ：上一页 Ctrl + ↓ ：下一页 Ctrl + Enter : 搜索 Ctrl + [1-8] ：插入相应行的歌曲 本插件紧急更新至3.0.3版，修复了搜索结果页码不重置的问题，同时为搜索结果增加数字提示以方便使用快捷键。 本插件更新至3.0.4版，增加了对非默认Markdown编辑器的支持，更新播放器代码，设置为默认不自动加载歌曲文件，减少页面加载时间。 本插件更新至3.0.5版，修复了自定义歌曲地址不支持自定义配色的BUG。 本插件更新至3.0.6版，修复了之前版本播放器的一些样式问题。增加了添加列表播放器的功能（暂时还没有简洁好看的播放器样式，所以还是先用了官方的Flash播放器，所以只支持虾米搜索添加，直链添加会在之后的版本中支持）。选择了列表模式之后添加的歌曲会进入列表中，上下拖拽列表歌曲可以对歌曲进行排序，左右拖拽至外侧可删除歌曲。新功能写的比较仓促没做过多的测试，欢迎反馈意见。 本插件更新至3.0.7版，更改音乐的插入方式（由iframe替换为script）。列表播放支持自定义地址。代码改动较大，为了兼容老版本没有将一些废弃文件去除掉，想要研究代码的可以进插件内查看。 本插件更新至3.0.8版，修复了音乐搜索不可用的问题 本插件更新至3.0.9，修复了一些小BUG，增加直接解析文章内以http://开头的虾米链接插入歌曲、专辑、精选集功能。例如在文章中直接插入“http:// www.xiami.com/album/435293“（请自行去除空格）即可插入该专辑的所有音乐，同时支持Markdown模式和非Markdown模式。 http://www.xiami.com/album/435293 本插件更新至3.1.0，修改插件内以相对协议加载相关文件，防止https阻止非https的资源加载。同时修改播放器的class名称防止与主题自带样式冲突。 插件更新至3.1.1，主要是修改了接口地址，另外修改了一个多歌曲时无法切换的 BUG。之前的服务放在 SAE 上由于 SAE 开始收费遂切换到另外一个免费服务提供商。由于该服务商未提供 SSL 服务所以对于 https 用户只能抱歉。如果需要替换之前已经发布的歌曲链接可以在数据库中执行以下命令进行批量替换： UPDATE `typecho_contents` SET `text` = REPLACE(`text`, 'songs.sinaapp.com', 'xiamiplayer.songs.ali-sh.goodrain.net:10080') 插件更新至 3.1.2，还是修改接口地址，求个国内主机啊卧槽 T_T 下载地址：百度云 | 微盘https://imnerd.org/red-heart-fm.html2013-07-07https://imnerd.org/red-heart-fm.html 前两天写了篇Audio标签的文章，想要更深入学习一下，遂决定写一个网页版音乐播放器试试（其实有更深部的动机的，不过我不告诉你们，哼哼！）。在整个网页的编写过程中，我学习到了很多的东西，感觉对jQuery又有了更新的认识。同时新接触了jQuery UI这个非常可靠的工具。不过说到底也还是新手，代码写的很脏，也没想到重构什么的，功能实现出来就好了，至于美观什么的，哈哈，你是在开玩笑么！ 放上本篇文章主角：红心电台 - https://imnerd.org/lab/player 简单介绍：红心电台是一个利用HTML5制作的能够存储播放列表的在线音乐播放器。是的，没错，虽然是叫做红心电台，但是基本上也就只是一个能存播放列表的播放器而已。另外，本网页是用HTML5写的，然后由于播放的音乐基本是MP3格式的，所以只支持Webkit系的浏览器（Chrome为首）和IE9+以上的浏览器，对Firefox和Opera的用户感到抱歉了，OGG的音乐库毕竟还是挺小众的。具体浏览器支持可以看红心电台的HELP。 使用说明： 1、左上角有搜索框，用户可自行添加歌曲到播放列表中。 2、默认播放列表的歌曲在用户添加过歌曲后会自行清除（需要刷新页面），用户不必手动清除。 3、默认支持快捷键，左右方向键为上一首下一首，空格键为暂停，Delete键为删除当前播放曲目。 如果对红心电台有什么意见或者是建议，又或者是发现了什么问题，可以随时与我联系（联系方式见关于页面），当然你也可以在本文留言，我都是可以看的到的。https://imnerd.org/xiami-search-diy.html2012-09-22https://imnerd.org/xiami-search-diy.html预览 预览地址：虾米音乐搜索 主要目的是搜索音乐并获取播放器代码 原理 本段代码主要利用了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>'); }