前面我们介绍了小程序实现在线音乐网站歌词实时同步到本地,整个实现的思路是:
无论是哪个在线音乐网站,当我们看歌词时,歌词都会有滚动显示歌词的功能,而且当前正播放的那句歌词样式和别的行歌词样式不同,通常是颜色加重字体加大。所以我们可以在前端控制台里利用jQuery样式选择器来获得当前歌词。
接下来我们只需用一个定时器来接近实时捕捉当前歌词文字内容,如果发生改变说明歌词滚动到下一句,将此歌词提交到另一个自己写的简单的web服务中,因为在线网站和自己的web服务域不同,所以将我们的web服务接口设置成允许跨域来接收从音乐网站提交的请求,后台拿到歌词,可以再转发给本地的其他应用来显示,我使用的是Python的tornado作为web框架,收到请求直接打印出来,同时使用colorama库来在控制台程序里来定义歌词的样式。
浏览器控制台里的js代码如下:
//豆瓣FM
s=document.createElement('script')
s.onload=function(){
prev=null;setInterval(function(){
var text=$('.ps-outer.lyrics').find('p.on').text();
if(text!=prev){
prev=text;
$.post('http://localhost:9000/lyric',{'lyric':text},function(r){
console.log(r)
})
}
},1000)
}
s.src="https://gallery.echartsjs.com/dep/jquery/jquery.min.js"
document.head.append(s)
//网易云音乐
s=document.createElement('script')
s.onload=function(){
prev=null;
setInterval(function(){
var text=$('.listlyric').find('.j-flag.z-sel').text();
if(text!=prev){
prev=text;
$.post('http://localhost:9000/lyric',{'lyric':text},function(r){
console.log(r)
})
}
},1000)
}
s.src="https://gallery.echartsjs.com/dep/jquery/jquery.min.js"
document.head.append(s)
后台web服务器代码如下:
import tornado.web
import tornado.httpserver
import tornado.ioloop
from tornado.options import define,options
import os
from colorama import init
from colorama import Fore, Back, Style
init(autoreset=True)
define('port',default=9000,type=int,help="input your port")
class cross_originAllowed_Handler(tornado.web.RequestHandler):
def initialize(self):
self.set_header('Access-Control-Allow-Origin','*')
self.set_header('Access-Control-Allow-Methods','POST,GET')
self.set_header('Access-Control-Max-Age',1000)
self.set_header('Access-Control-Allow-Headers','*')
class lyricHandler(cross_originAllowed_Handler):
def post(self):
lyric=self.get_argument('lyric',None)
print(Fore.WHITE +Back.MAGENTA+ lyric)
self.write('ok')
app=tornado.web.Application(
handlers=[
(r'/lyric', lyricHandler),
],
template_path=os.path.join(os.path.curdir,'templates'),
static_path=os.path.join(os.path.curdir,'static'),
cookie_secret='miao',debug=True,log=False
)
if __name__=='__main__':
tornado.options.parse_command_line()
httpserver=tornado.httpserver.HTTPServer(app)
httpserver.listen(options.port)
tornado.ioloop.IOLoop.instance().start()
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。