誰でもDJになれちゃう。みたいなそんないけてるサービス。
@fladdictさんがたくさんつぶやいてたから、なんとなく初めてみたんだけどともかく面白い。
何が楽しいかはちゃんと説明できないけど、なんか面白い。
裏側（選曲）に人を感じるからとかそういうことだろうか。。とりあえずそういうことにする。
Facebookのアカウントがあれば誰でも参加できるから、気になる人はとりあえずやってみるといいです。
これを聴いてると自分の知らない曲がばんばん流れてくるわけです。
そんで、「この曲なんだろう？」って思ったときに、いちいちTurntableに見にいくのはめんどくさいからどうにか曲情報だけゲットしたい！
と思ったところで、もちろんAPIなんてのは公開されてないわけで。
そうなったら力技で解決するっきゃないから、Google Chromeの機能拡張として作ってみた。
が、途中で力尽きた！
今のところこんな感じになります↓。
仕組みとしては、
- chrome.tabs.captureVisibleTab()を使って表示されてる部分をキャプチャ
- 1.で取得した画像をimgタグのsrcに指定
- imgタグの内容から曲情報の部分をcanvasで切り抜き
という感じ。
今後やること。
- 一定時間おきにバッグラウンドでキャプチャする
- なんかいい感じに画像を表示する（Growlみたいな感じで）
あと、ろくにテストをしてないので、画面サイズ変えたりしたら表示おかしくなるかも。
そんでもって下にスクロールとかしたら確実におかしなことになるので。
なんというか。
Google Extensionsを勉強しつつだったからやけに疲れた。
早くHTML5とかJSを使いこなせるようになりたい。
ソース置いときます。
popup.html
<html>
<head>
<script>
chrome.windows.getCurrent(function (win) {
chrome.tabs.captureVisibleTab(win.id,{"format":"png"}, function(imgUrl) {
var img = document.getElementById('myImg');
img.setAttribute('src', imgUrl);
img.style.visiblity = 'hidden';
setTimeout(function() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillRect(0, 0, 100, 100);
var x = (img.width - 760) / 2 + 72;
context.drawImage(img, -x, -224);
document.body.removeChild(img);
}, 100);
});
});
</script>
</head>
<body>
<img id="myImg" src="" /><br />
<canvas id="myCanvas" width="360" height="88" />
</body>
<</html>
manifest.json
{
"name": "Test",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
"tabs",
"http://*/"
]
}
そんじゃーね。
0 件のコメント:
コメントを投稿