初めてのSongle (ソングル)
Songleというサービスとそれを利用するためのAPIについて紹介したいと思います。
Songleとは
Songle（ソングル）は、音楽をより深く理解しながら、能動的に音楽鑑賞が楽しめるサービスです。音楽理解技術で解析した内容（サビ、メロディ、コード、ビート）を見ながら、楽曲中のサビ区間や繰り返し区間へ頭出しして聴くことができます。 その解析誤りは誰でも自由に訂正でき、さらに、インターネット上のお好きな楽曲を登録できます。
よくわからないと思うので、詳しくはアクセス↓↓↓↓
songle.jp
要約すると、「ネットにある音楽動画を解析してサビやメロディなどを情報を使うことができたり、訂正することができるシステム」です。
Songleのサービスは大きく分けて3つ
- 音楽情報を見たり、編集するメインサイトの http://songle.jp/
- 音楽情報を元に自分の思うようなサービスをつくるために提供される埋め込みAPIのSongle Widget http://widget.songle.jp/
- 上のSongle Widgetを活用したサービスたち http://widget.songle.jp/docs/featured-projects
今回はこのうちの上2つについて解説します。
songle
Tell your world(↓のサイト)を例にして解説していきます。
Tell Your World by livetune - Songle
一番上のオレンジ色はサビを区間を表しており、他の青い部分は一列ごとに繰り返し区間と呼ばれ、AメロBメロなどの情報になってます。
上からコード、メロディ、ビートが一覧で見れます。(薄くなっているのは初回解析での判定結果)
Songle Widget
Songle Widget は動画と音楽情報のうめ込みだけではなく、JavaScriptから実際に音楽情報をリアルタイムに取得することができます。
一部情報はxmlやjsonで取得もできるのでアプリからAPIとして使うこともできます。
すべてメールアドレスなどを使用した認証はありません。
Songle Widgetから取得できる情報
JavaScriptからアクセスできる主な情報
- 楽曲情報(タイトルや長さ、更新情報など)
- 拍
- 拍の更新情報
- 和音
- 和音の更新情報
- メロディ
- メロディの更新情報
- サビ
- サビの更新情報
- 楽曲の検索
SongleWidgetの使い方
JavaScriptから操作する方法を主に紹介しますが、基本的なことはリファレンスを参照してください。
Songle Widget - Songle Widget API (version 1)
よく使う関数のリアルタイムデモを準備しましたので参考にしてください。
http://songle-samples.azurewebsites.net/list/
ちょっとくせ者なのがcurrentChorusSegmentとcurrentRepeatSegmentの中身の構造です。
それぞれ、repeat.indexが示すものは、今の繰り返し区間の通し番号です。
例を見ながら説明します。
このとき、youtubeのシークバーはオレンジ色(サビ区間)と青色(繰り返し区間)のところにあって、
currentChorusSegment(.repeat.index) currentRepeatSegment(.repeat.index)
はそれぞれ0を指しています。
これになると、0と1になっています。この1というのは、青色の繰り返し区間の上から3番目の区間が1回目(仕様上、初回は0回目とカウント)ということを指しています。これが0が1に変わった理由です。その繰り返し区間が何回目かをリアルタイムで知ることができます。
ちなみに、以前作ったものもsongleからJSONをprocessingで読み込みました。
matatsuna.hatenablog.com
Songle Widgetの埋め込みプラグイン
深く理解したり、簡単にスゴイことがしたいなら見てもいいかもしれません。
Songle Widget API Examples
Songle Widget API Examples
最後に
songleを使うと今までできなかった様々な音楽動画に関することができるようになるのでぜひ、つかって遊んでみてほしいです。
WindowsでImagemagickを使ってローカルのコマンドラインでpdfから画像を作る方法
ImageMagickという超便利な画像変換ソフト?を使ってpdfを画像にしてしまう方法です。
最初にダウンロードページでWindows Binary ReleaseからImageMagick-7.0.3-5-Q16-x64-dll.exeを選択し、ダウンロード&インストールします。
詳しいインストール方法は、
ImageMagickのインストール - Qiita
さて、コマンドプロンプトでファイルのあるディレクトリに移動して下のコマンドを実行
convert hoge.pdf hoge.jpg
するとエラーが出てしまいました。これを解決するためにはGhostscriptというPDF用のプログラムが必要なようです。
Ghostscript: Ghostscript Downloads
↑これの「GNU Affero General Public License」のものをインストールして開くと、さらにインストールしろとダイアログが出るのでそれもインストールすると動きました。
以上、動いたことの報告でした。
[2016-11-08追記]
pdfを変換したところ、画質がすごく悪くびっくり！以下のサイトを参考にコマンドを叩くときれいになりました。
takuya-1st.hatenablog.jp
javascriptでBadApple!!
作品URL
http://matayoshi.nkmr.io/js/badapple/
この記事の作品 https://service.matatsuna.net/badapple-old/
改良版 https://service.matatsuna.net/badapple/
(以上 更新 2018/08/17)
BadApple!!とは?
音楽同人サークル「Alstroemeria Records」による東方アレンジ曲"Bad Apple!! feat. nomico"のPV字コンテをPVにした作品の一つである。
【東方】Bad Apple!! ＰＶ【影絵】 (sm8628149) - ニコニコ大百科
東方の曲のPVを考えて手書きで書いた動画
www.nicovideo.jp
を実際に白黒pvにしてしまった。というお話
www.nicovideo.jp
その動画のパロディ－がたくさん生まれています。
www.nicovideo.jp
実装について
1. 動画をffmpegを使い、1秒10フレームで切り出して2190枚の画像を生成します。
2. processingで画像を読み込んで白黒を判定し、jsで読み込めるように配列形式でテキストに吐き出します。
https://gist.github.com/eb68c1d404ae33f9a47c5c4fa852bf34:tile
3. tableを準備して、その中に配列から読みだしたデータをどんどん追加する処理をsetintervalでfps10で回します。
4. 完成！！
感想
作ってて超楽しかった。重いかな？とか粗すぎて見えないかな？っておもってたのですがしっかりそこそこ見えて感動しました。
ただ、画像をURIスキームを使って入れたとしても、厳しいのは残念でした。（環境にもよるかもしれないが）
参考URL
tableタグで二次配列を取り出す方法
[jQuery] tableの内容を取得する | きほんのき
ffmpegのコマンド
ffmpegで動画から静止画を抜き出す
jsの配列について
JavaScriptプログラミング講座【配列について（Array）】
htmlのaudioタグについて
HTML5 audioタグを使って音声を再生する方法 | TechBooster
etc
