Songle外部埋め込みプレーヤ

埋め込み方法

 これは、能動的音楽鑑賞サービスSongle(ソングル)をあなたのウェブページで簡単に利用することができるSongle外部埋め込みプレーヤです。 あなたにプログラミングの知識があれば、音楽理解技術により解析された音楽地図を利用した、アプリケーションを開発することもできます。

 埋め込むには、次のコードをあなたのウェブページの外部埋め込みプレーヤの表示したい位置に貼り付けます。 ソングルに登録されている楽曲を指定することで、埋め込む楽曲を切り替えることもできます。

<div data-api="songle-widget-extra-module" data-url="www.nicovideo.jp/watch/so18006496" id="songle-widget"></div>
<script src="https://widget.songle.jp/v1/widgets.js"></script>

埋め込みプラグイン

 次のタグを埋め込みコードと一緒に記述すると、外部埋め込みプレーヤの拡張を手軽に試すことができます。
再生中の音楽に連動した写真や図形を表示したり、音楽地図(拍・和音・メロディ・サビ)の情報を表示することができます。
音楽地図の表示拡張
<script src="https://ongacrest.github.io/songle-widget-api-examples/extras/sw-extra-stats.js"></script>
図形連動拡張
<script src="https://ongacrest.github.io/songle-widget-api-examples/extras/sw-extra-visualizer.js"></script>

埋め込みオプション

オプション名説明デフォルト値必須
data-apiAPI を利用する際、任意の文字列を指定します。""No
data-url配信元サイトの URL を指定します。
(例:www.youtube.com/watch?v=PqJNc9KVIZE
""Yes
data-api-create-callback-nameDOM Element が作成された際に実行するメソッド名を指定します。"onSongleWidgetCreate"No
data-api-error-callback-nameAPI の初期化に失敗した際に実行するメソッド名を指定します。"onSongleWidgetError"No
data-api-ready-callback-nameAPI の初期化に成功した際に実行するメソッド名を指定します。"onSongleWidgetReady"No
data-api-beat-auto-reload1 の場合、に関する音楽地図の自動更新を行います。"0"No
data-api-chord-auto-reload1 の場合、和音に関する音楽地図の自動更新を行います。"0"No
data-api-melody-auto-reload1 の場合、メロディに関する音楽地図の自動更新を行います。"0"No
data-api-chorus-auto-reload1 の場合、サビに関する音楽地図の自動更新を行います。"0"No
data-api-beat-disabled1 の場合、に関する音楽地図のダウンロードをスキップします。"0"No
data-api-chord-disabled1 の場合、和音に関する音楽地図のダウンロードをスキップします。"0"No
data-api-melody-disabled1 の場合、メロディに関する音楽地図のダウンロードをスキップします。"0"No
data-api-chorus-disabled1 の場合、サビに関する音楽地図のダウンロードをスキップします。"0"No
data-api-beat-revisionに関する音楽地図のバージョンを指定のバージョンに固定します。
0 の場合、最新版の音楽地図をダウンロードします。
"0"No
data-api-chord-revision和音に関する音楽地図のバージョンを指定のバージョンに固定します。
0 の場合、最新版の音楽地図をダウンロードします。
"0"No
data-api-melody-revisionメロディに関する音楽地図のバージョンを指定のバージョンに固定します。
0 の場合、最新版の音楽地図をダウンロードします。
"0"No
data-api-chorus-revisionサビに関する音楽地図のバージョンを指定のバージョンに固定します。
0 の場合、最新版の音楽地図をダウンロードします。
"0"No
data-song-auto-play1 の場合、自動再生を有効にします(YouTube / mp3 のみ)。"0"No
data-song-auto-loop1 の場合、自動繰返を有効にします(YouTube / mp3 のみ)。"0"No
data-song-start-at初回再生時の再生位置を時刻(秒)指定します。
chorus の場合、最初の繰り返し区間(橙色)から再生します。
repeat の場合、最初の繰り返し区間(青色)から再生します。
"0"No
data-song-volume初期音量を 0 ~ 100 の範囲で設定します。"auto"No
data-songle-widget-ctrl1 の場合、コントロールボタンを表示します。"1"No
data-songle-widget-ctrl-enter-colorマウスが触れた際、コントロールボタンの色を設定します。"#e17"No
data-songle-widget-ctrl-leave-colorマウスが離れた際、コントロールボタンの色を設定します。"#000"No
data-songle-widget-ctrl-link-colorリンクテキストのデザインを設定します。"#e17"No
data-songle-widget-size-wSongle Widget の横幅(ピクセル)を設定します。
auto の場合、埋め込まれた親要素のサイズに自動調節します。
"275"No
data-songle-widget-size-hSongle Widget の縦幅(ピクセル)を設定します。
auto の場合、埋め込まれた親要素のサイズに自動調節します。
"100"No
data-video-player-size-w動画プレーヤの横幅(ピクセル)を設定します。
auto の場合、埋め込まれた親要素のサイズに自動調節します。
"275"No
data-video-player-size-h動画プレーヤの縦幅(ピクセル)を設定します。
auto の場合、埋め込まれた親要素のサイズに自動調節します。
"155"No
data-nn-transparent1 の場合 wmode を有効にします(ニコニコ動画のみ)。"0"No
data-yt-ctrl1 の場合、動画プレーヤの制御表示を有効にします(YouTube のみ)。"0"No
data-yt-info1 の場合、動画プレーヤの詳細表示を有効にします(YouTube のみ)。"0"No
data-yt-quality動画プレーヤの品質を設定します(YouTube のみ)。"small"No