能動的音楽鑑賞サービスSongle (http://songle.jp) では、誰でも自分のホームページやブログなどに「Songle外部埋め込みプレーヤ」を上記のように埋め込むことを可能にしました。
中央に表示されているのは楽曲の構造で、オレンジの区間を押すか右側のオレンジのボタンを押せば、サビを手軽に試聴できます。
さらに、埋め込み先のウェブページの背景に、楽曲の再生に連動して変化する視覚的効果（音楽連動図形）も付与できます。 このページはそのデモンストレーション目的で公開しています。
ただしSongle外部埋め込みプレーヤと音楽連動図形は、Internet Explorer 8以下ではHTML5に対応していないため表示されません。 Chromeブラウザでの閲覧をお勧めします。
本機能は、2012年8月29日の 産総研プレスリリース で初めて公表され、同日から産総研が提供を開始しました。 その後、2013年8月27日にニコニコ動画とYouTubeの音楽動画に対応し、本機能もバージョンアップしました。
具体的な方法は、曲名をクリックすれば、 Songle上のその楽曲のページ に直接アクセスできますので、そこの「外部埋め込みプレーヤ」リンクを押すと表示されます。
例えば、このページでは、下記を本文中にコピー＆ペーストしただけで、その場所に「Songle外部埋め込みプレーヤ」が出現しています。 data-url=""の後に data-song-start-at="開始時刻" を追記すれば再生開始時刻を変更できます。開始時刻には、秒単位の数字か、chorus （最初のサビ区間の先頭）か、repeat （最初の繰り返し区間の先頭）を記述します。
ページの背景に音楽連動図形を表示したい場合には、上記の代わりに下記をコピー＆ペーストすれば可能です。
是非、皆様のホームページやブログでもご活用下さい。
注: ブログのテンプレート等によっては、音楽連動図形が意図しない場所に表示されたり、全然表示されなかったりする不具合が生じる場合があります。そのときは、本文の背景のブロック要素（例えば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"の指定時には指定先に、指定されていなければ背景に表示されます。