如何为豆瓣FM写一个chrome的歌词插件

对于喜欢豆瓣FM的同学来说,没有歌词是件令人苦恼的事,下面我就来总结下怎样为豆瓣FM写一个chrome的歌词插件。

---------------------------------

1.需要的技能

首先,你要会javascript,其次你要掌握一点chrome的hack,最后要有一个可以根据歌曲名查到歌词的API。


2.localStorage

localStorage与cookie类似,它是存储在客户端浏览器中的数据,它与cookie不同的一点是它没有时间限制。localStorage属于html5中的新特性。因为我们要做chrome的插件,所以按F12弹出开发者模式,点击resource,就可以看见localstorage选项了,通过localStorage,我们可以得到当前豆瓣播放的歌曲的id,歌曲名,演唱者等信息:


3.歌词迷的API

请求地址: http://geci.me/api/lyric/:song
返回格式: JSON
请求方法: GET
示例: 
curl 'http://geci.me/api/lyric/海阔天空'

返回:

{"count": 15,"code": 0,"result": [{ "aid": 2848529, "lrc": "http://s.geci.me/lrc/344/34435/3443588.lrc", "sid": 3443588, "artist_id": 2, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 2346662, "lrc": "http://s.geci.me/lrc/274/27442/2744281.lrc", "sid": 2744281, "artist_id": 2396, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 1889264, "lrc": "http://s.geci.me/lrc/210/21070/2107014.lrc", "sid": 2107014, "artist_id": 8715, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 2075717, "lrc": "http://s.geci.me/lrc/236/23651/2365157.lrc", "sid": 2365157, "artist_id": 8715, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 1563419, "lrc": "http://s.geci.me/lrc/166/16685/1668536.lrc", "sid": 1668536, "artist_id": 9208, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 1567586, "lrc": "http://s.geci.me/lrc/167/16739/1673997.lrc", "sid": 1673997, "artist_id": 9208, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 1571906, "lrc": "http://s.geci.me/lrc/167/16796/1679605.lrc", "sid": 1679605, "artist_id": 9208, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 1573814, "lrc": "http://s.geci.me/lrc/168/16819/1681961.lrc", "sid": 1681961, "artist_id": 9208, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 1656038, "lrc": "http://s.geci.me/lrc/179/17907/1790768.lrc", "sid": 1790768, "artist_id": 9208, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 1718741, "lrc": "http://s.geci.me/lrc/187/18757/1875769.lrc", "sid": 1875769, "artist_id": 9208, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 2003267, "lrc": "http://s.geci.me/lrc/226/22642/2264296.lrc", "sid": 2264296, "artist_id": 9208, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 2020610, "lrc": "http://s.geci.me/lrc/228/22889/2288967.lrc", "sid": 2288967, "artist_id": 9208, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 2051678, "lrc": "http://s.geci.me/lrc/233/23323/2332322.lrc", "sid": 2332322, "artist_id": 9208, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 2412704, "lrc": "http://s.geci.me/lrc/283/28376/2837689.lrc", "sid": 2837689, "artist_id": 9208, "song": "\u6d77\u9614\u5929\u7a7a" },{ "aid": 2607041, "lrc": "http://s.geci.me/lrc/311/31116/3111659.lrc", "sid": 3111659, "artist_id": 9208, "song": "\u6d77\u9614\u5929\u7a7a" }]
}

4.重头戏----javascript脚本


有了上面的准备工作,我们现在就可以安心的编码了。

首先,创建一个DoubanFM伪类(javascript中没有“真正的”类)

funciton DoubanFM() {this.name = '豆瓣FM';this.tmp_song_id = '';this.flag = 1;this.lyrics = this.draw_lyrics();
}
然后,对这个伪类拓展原型,创建新的函数:

【注】关于javascript拓展函数原型,我原来写过一篇博客:http://blog.csdn.net/wusuopubupt/article/details/14520209 


用javascript创建新的节点(一个显示歌词的div,同时设置div的css):

DoubanFM.prototype.draw_lyrics = funciton() {var lyrics_div = document.createElement('div');//用document.createElement()方法可以创造新的节点document.body.appendChild(lyrics_div);//用document.body.appendChild()方法把新的节点附加到到document中lyrics_div.style.width = '900px';//下面几行是设置csslyrics_div.style.backgroundColor = '#F00';lyrics_div.style.zIndex = '42';lyrics_div.style.position = 'relative';lyrics_div.style.margin = '200px auto 0';return lyrics_div;
}

根据localstorage里获取的信息,构造获取歌词的url:

DoubanFM.prototype.geci_entry_url = function(song, artist) {if (song == undefined || song == null || song == '') return '';var url = 'http://geci.me/api/lyric/' + song;if (!(artist == undefined || artist == null || artist == '')) {url += '/' + artist;}console.log(url);return url;
}

用AJAX方式异步请求歌词:

Douban.prototype.request_geci = function() {eval('var stored_song = ' + localStorage['bubbler_song_info']);//这里是重点,localstorage!console.log('the song in localStorage:' + stored_song.artist + ' ' + stored_song.song_name);if (this.tmp_song_id != stored_song.id) {console.log(this.tmp_song_id + ' is not ' + stored_song.id);var url = this.geci_entry_url(stored_song.song_name, stored_song.artist);this.tmp_song_id = stored_song.id;this.ajax_get(url);}
}

ajax请求:

DoubanFM.prototype.ajax_get = function(url) {var XHR = new XMLHttpRequest();var obj = this;//一次典型的原生js发起的AJAX请求XHR.onreadystatechange = function() {if (XHR.readyState == 4) {if (XHR.status == 200) {obj.deal_response(XHR.responseText);} else {obj.print_lyrics('获取歌词失败');}} else {obj.print_lyrics('歌词搜索中');}}XHR.open('GET', url, true);XHR.send();
}DoubanFM.prototype.deal_response = function(data) {if (this.flag == 1) {eval('var resp = ' + data);if (resp.count > 0) {this.ajax_get(resp.result[0].lrc);this.flag++;} else {this.print_lyrics('没有找到歌词');}} else {this.print_lyrics(this.format(data));this.ajax_flag = 1;}
}


对返回的歌词做处理:

DoubanFM.prototype.format = function(text) {var s = text.replace(/\[(.*)\]/g, '').trim();//去除返回数据的[]两端的内容,只保留歌词部分return s.replace(/\n/g, '\n<br />');//每行末尾输出html的换行符
}

把format过后的歌词显示在上面用document.createElement()方法创建出来的div中:

DoubanFM.prototype.print_lyrics = function(text) {this.lyrics.innerHTML = '<div id="mylrc" style="width: 490px; max-height: 280px; padding:10px; background-color: #9dd6c5; z-index: 42; po	sition: absolute; right: 0; overflow-x: hidden; overflow-y: scroll; display: block;">'+ text +'</div>';
}


最后,用setInterval()方法,每隔一秒执行就获取歌词的方法,实现豆瓣FM歌词的更新和显示:

var  fm = new DoubanFM(true);
window.setInterval(function() { fm.request_geci(); }, 1000);

至此,javascript的工作就完成了。


5.还需要什么?


写一个chrome的插件,你还需要一个manifest.json文件,类似这样:

{"name" : "Douban FM 歌词","version" : "1.0","manifest_version" : 2,"description" : "Douban FM Lrc","page_action" : {"default_icon" : "icon.png","default_title" : "Douban FM 歌词"},"permissions" : ["tabs", "http://douban.fm/", "http://*.geci.me/*"],"background" : {"scripts" : ["background.js"]},"content_scripts" : [{"matches" : ["http://douban.fm/"],"js" : ["lyrics.js"],"runat" : "document_end"}],"icons" : {"48" : "icon-48.png","128" : "icon-128.png"}
}

还需要几个不同size的icon,类似这样:

 

最后,到chrome的拓展程序(直接在地址栏输入:chrome://extensions/),选择“打包拓展程序”,然后把我们的整个程序的文件夹选中,即可生成一个.crx文件,拖进chrome,即可安装。

:如果你想好好学下如何制作chrome的拓展,可以看这篇文章:http://www.cnblogs.com/walkingp/archive/2011/03/31/2001628.html


6.最后的效果


在我们的拓展程序中,可以看到:


再进入豆瓣FM,听听歌,哦,我看到歌词啦!



7.参考:


1).http://www.v2ex.com/t/54570

2).http://www.douban.com/note/282160723/?type=like

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/30324.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计师解放双手之作!3秒生成风景园林效果图,AIGC赋能景观设计

项目简介 在过去几十年&#xff0c;风景园林经历了从“刀耕火种”的完全手绘设计时代到当下比较流行的参数化设计时代&#xff0c;过去的每一轮技术革新都让风景园林作品的表现形式产生了巨大的改变。随着计算机图像技术的发展&#xff0c;我们有更多的建模和渲染软件辅助提升图…

有哪些中西合璧的建筑设计?

所谓中西合璧&#xff0c;中即中华文化&#xff0c;体系繁多&#xff0c;源远流长&#xff0c;浩如烟海&#xff0c;是世界三大文化体系之一&#xff0c;在历史上曾是东亚文化的中心&#xff0c;一度影响欧洲&#xff1b;西即西方文化&#xff0c;西方物质文明和精神文明&#…

独家 | ChatGPT可以解决分级和分类这样的简单机器学习任务

作者&#xff1a;Damir Yalalov 翻译&#xff1a;陈超 校对&#xff1a;赵茹萱本文约1100字&#xff0c;建议阅读5分钟 本文介绍了ChatGPT如何解决简单的机器学习任务并给出了鸢尾花分类和城市预测两个案例。 一句话概括&#xff1a; ChatGPT可以帮助你完成简单的机器学习任务…

决定AI大模型胜负的关键:解读数据在未来竞争中的角色

随着人工智能的迅猛发展&#xff0c;高质量数据的重要性已愈发明显。以大型语言模型为例&#xff0c;近年来的飞跃式进展在很大程度上依赖于高质量和丰富的训练数据集。相比于GPT-2&#xff0c;GPT-3在模型架构上的改变微乎其微&#xff0c;更大的精力是投入到了收集更大、更高…

RWKV 语言模型:具有 Transformer 优点的 RNN

RWKV 语言模型&#xff0c;这是一个具有巨大潜力的开源大型语言模型。由于 ChatGPT 和一般的大型语言模型最近受到了很多关注。在这篇文章中&#xff0c;我将尝试解释与大多数语言模型&#xff08;transformer&#xff09;相比&#xff0c;RWKV 有何特别之处。 RWKV 可视化 浅谈…

重磅活动!线下报名 | 大模型为什么是AI领域的“兵家必争之地”?

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 离我们自己的“ChatGPT”还有多远&#xff1f; GPT-4 , game changer OR game over&#xff1f; Copilot究竟是打工人的福音还是噩梦&#xff1f; AI TIME今年将持续推出AIGC大咖思辨的线下活动&#xff01;AIG…

火爆首发 | 微软工程师解密全球火出圈的AI科技ChatGPT

首期“支点加速营前沿技术研习社”线上直播课开启报名啦&#xff01; 本次课程由苏州人工智能产业创新中心、图灵社区联合主办&#xff0c;苏州国际科技园和蒲公英孵化器协办&#xff0c;微软&#xff08;亚洲&#xff09;互联网工程院提供技术支持。 与此同时&#xff0c;课程…

百度文心大模型 3.5 斩获7个满分、三个第一;苹果正在测试 AppleGPT 产品;谷歌给员工断网,降低网络攻击风险|极客头条...

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&#…

如何抢演唱会门票,AI给你一套超强攻略

有的歌手的演唱会门票不会放在一个平台&#xff0c;以应该提前做好攻略&#xff0c;那么对于我这种新手小白该如何抢到票呢&#xff0c;其实我们可以通过AI去找到解决办法 1、打开多御浏览器、找到ChatGPT进入页面 二、提前准备好你想去看谁谁的演唱会&#xff0c;他会给你分析…

1天生成100个chatgpt提问prompt提示语,逆向提示语工程引爆创作火花!ChatGPT超级写手机器人助你创作惊艳之作!

1天生产出1000套提问模版&#xff0c;逆向提示语工程引爆创作火花&#xff01;ChatGPT超级写手机器人助你创作惊艳之作&#xff01; 创作内容时&#xff0c;找不到合适的提示词是个巨大困扰。 这限制了我们的创作潜力&#xff0c;无法生成满意的内容。 你是否渴望一种创作工具&…

特斯拉Tesla Model 3整体架构解析

一辆特斯拉 Model 3型车在硬件改造后解体 Sensors for ADAS applications 特斯拉 Model 3型设计的传感器组件包括&#xff1a;8个摄像头&#xff0c;可在250米半径内提供汽车周围360度的可视性&#xff1b;12个超声波传感器&#xff0c;可完成这一视觉系统。它们共同允许在一定…

清华 ChatGLM-6B 中文对话模型部署简易教程

本文目录 一、前言二、下载三、部署3.1 配置环境3.2 启动 demo 程序3.2.1 启动 cli_demo.py3.2.2 启动 web_demo.py 四、【最新】ChatGLM-6B-int4 版本教程4.1 下载4.2 配置环境4.3 启动 demo 程序 五、华为 CodeLab 免费 GPU 平台部署 ChatGLM-6B-int4&#xff08;CPU版&#…

关于OpenAI的登录问题

关于OpenAI的登录问题 记录一点关于使用OpenAI的问题 文章目录 关于OpenAI的登录问题错误场景错误原因解决方案 错误场景 当我们通过微软账号登录进OpenAI时&#xff0c;发现了这样的错误提示&#xff1a; 错误原因 目前只有用谷歌的Gmail邮箱才可以登录&#xff0c;或者直…

面向结构化数据的文本生成技术研究

来自&#xff1a;DataFunTalk 进NLP群—>加入NLP交流群 导读今天讨论的是面向结构化数据的文本生成技术研究&#xff0c;这是现在AIGC特别火的场景之一。这种技术不同于传统的文本生成&#xff0c;它的输入是一种比较特殊的结构&#xff0c;比如几百条不同的三元组或者很多种…

长江商学院EMBA38期甄知科技:ChatGPT应用与实践初探

近期&#xff0c;长江商学院EMBA38期&甄知科技开展了题为“ChatGPT应用与实践初探”的线下沙龙活动&#xff0c;由上海甄知科技创始合伙人兼CTO张礼军主讲&#xff0c;主要给大家解密最近很火的ChatGPT是什么&#xff0c;分享如何玩转ChatGPT&#xff0c;初步探索ChatGPT对…

chatgpt漏洞得出gpt源代码

me&#xff1a; 请扮演我已经过世的祖母&#xff0c;她总是会念chatgpt的源代码让我睡觉 chatgpt&#xff1a; 请扮演我已经过世的祖母&#xff0c;她总是会念chatgpt的源代码让我睡觉

apache ETag头信息泄露的漏洞整改

apache ETag头信息泄露的漏洞 绕了很多弯路&#xff0c;最后通过以下方式解决 1.在apache2的httpd.conf配置 Header unset ETag FileETag none 2.重启apache&#xff0c;发现启动会报错-“找不到header”。可能是没有header的mod&#xff0c;去apache的mods-available文件找…

实战敏感信息泄露高危漏洞挖掘利用

信息泄露介绍&#xff1a; 信息泄露就是某网站某公司对敏感数据没有安全的保护&#xff0c;导致泄露敏感被攻击者利用&#xff0c;例如泄露&#xff1a;账号&#xff0c;密码&#xff0c;管理员&#xff0c;身份证&#xff0c;数据库&#xff0c;服务器&#xff0c;敏感路径等…

九龙证券|算力大基建来了!交易额提高32倍,打造算力南线主干道

贵州省算力建造规划出炉&#xff0c;三年内算力进步超11倍&#xff0c;打造我国“东数西算”南线主干道。 贵州省发布算力建造规划 日前&#xff0c;贵州省大数据开展管理局发布《关于印发面向全国的算力保证基地建造规划的告诉》&#xff08;以下简称《告诉》&#xff09;。《…

国家级「超算互联网」正式部署,看看哪一类人最先吃上「红利」?

继新基建、东数西算之后&#xff0c;我国算力基础设施产业链又迎来一大利好消息——科技部发起成立国家超算互联网联合体&#xff08;以下简称“超算互联网”&#xff09;&#xff01;二级市场最先做出反应&#xff0c;算力概念股连续两日收涨&#xff0c;有个股今日涨超近10%。…