English

Songle外部埋め込みプレーヤ

音楽連動アニメーションのデモンストレーション

下記の「再生ボタン」を押してみて下さい

能動的音楽鑑賞サービスSongle (http://songle.jp) では、誰でも自分のホームページやブログなどに「Songle外部埋め込みプレーヤ」を上記のように埋め込むことを可能にしました。

中央に表示されているのは楽曲の構造で、オレンジの区間を押すか右側のオレンジのボタンを押せば、サビを手軽に試聴できます。

さらに、埋め込み先のウェブページの背景に、楽曲の再生に連動して変化する視覚的効果(音楽連動図形)も付与できます。 このページはそのデモンストレーション目的で公開しています。

ただしSongle外部埋め込みプレーヤと音楽連動図形は、Internet Explorer 8以下ではHTML5に対応していないため表示されません。 Chromeブラウザでの閲覧をお勧めします。

本機能は、2012年8月29日の 産総研プレスリリース で初めて公表され、同日から産総研が提供を開始しました。 その後、2013年8月27日にニコニコ動画とYouTubeの音楽動画に対応し、本機能もバージョンアップしました。


「Songle外部埋め込みプレーヤ」を埋め込んだ例:


「Songle外部埋め込みプレーヤ」の埋め込み方法:

具体的な方法は、曲名をクリックすれば、 Songle上のその楽曲のページ に直接アクセスできますので、そこの「外部埋め込みプレーヤ」リンクを押すと表示されます。

例えば、このページでは、下記を本文中にコピー&ペーストしただけで、その場所に「Songle外部埋め込みプレーヤ」が出現しています。 data-url=""の後に data-song-start-at="開始時刻" を追記すれば再生開始時刻を変更できます。開始時刻には、秒単位の数字か、chorus (最初のサビ区間の先頭)か、repeat (最初の繰り返し区間の先頭)を記述します。

<div data-url="http://songle.jp/songs/www.youtube.com%2Fwatch%3Fv=PqJNc9KVIZE" id="songle-embedded-player"></div><script src="http://assets.songle.jp/assets/embedded_v2.js" type="text/javascript"></script>

ページの背景に音楽連動図形を表示したい場合には、上記の代わりに下記をコピー&ペーストすれば可能です。

<div data-api="songle-visualizer-type1" data-url="http://songle.jp/songs/www.youtube.com%2Fwatch%3Fv=PqJNc9KVIZE" id="songle-embedded-player"></div><script src="http://assets.songle.jp/assets/embedded_v2.js" type="text/javascript"></script><script src="http://assets.songle.jp/assets/songle_api_v2.js" type="text/javascript"></script><script src="http://assets.songle.jp/javascripts/embed_player_v2/songle/api_example.js" type="text/javascript"></script>

是非、皆様のホームページやブログでもご活用下さい。

注: ブログのテンプレート等によっては、音楽連動図形が意図しない場所に表示されたり、全然表示されなかったりする不具合が生じる場合があります。そのときは、本文の背景のブロック要素(例えばdiv)に、 <div id="背景に相当" data-songle-visualizer-target="true"> あるいは <div id="背景に相当" data-songle-visualizer-target="true" style="position:relative; z-index:1;"> 等のように追記する必要があります。さらに他の要素のz-indexの調整が必要な場合もあります。data-songle-visualizer-target="true"の指定時には指定先に、指定されていなければ背景に表示されます。


関連ページ:


後藤 真孝 / Masataka GOTO <songle-ml [at] aist.go.jp>