Songle外部埋め込みプレーヤ
埋め込み方法
これは、能動的音楽鑑賞サービスSongle(ソングル)をあなたのウェブページで簡単に利用することができるSongle外部埋め込みプレーヤです。 あなたにプログラミングの知識があれば、音楽理解技術により解析された音楽地図を利用した、アプリケーションを開発することもできます。
埋め込むには、次のコードをあなたのウェブページの外部埋め込みプレーヤの表示したい位置に貼り付けます。 ソングルに登録されている楽曲を指定することで、埋め込む楽曲を切り替えることもできます。
<div data-api="songle-widget-extra-module" data-url="www.nicovideo.jp/watch/sm24041693" id="songle-widget"></div>
<script src="https://widget.songle.jp/v1/widgets.js"></script>
埋め込みプラグイン
次のタグを埋め込みコードと一緒に記述すると、外部埋め込みプレーヤの拡張を手軽に試すことができます。再生中の音楽に連動した写真や図形を表示したり、音楽地図(拍・和音・メロディ・サビ)の情報を表示することができます。
埋め込みオプション
オプション名 | 説明 | デフォルト値 | 必須 |
---|---|---|---|
data-api | API を利用する際、任意の文字列を指定します。 | "" | No |
data-url | 配信元サイトの URL を指定します。 (例: www.youtube.com/watch?v=PqJNc9KVIZE ) | "" | Yes |
data-api-create-callback-name | DOM Element が作成された際に実行するメソッド名を指定します。 | "onSongleWidgetCreate" | No |
data-api-error-callback-name | API の初期化に失敗した際に実行するメソッド名を指定します。 | "onSongleWidgetError" | No |
data-api-ready-callback-name | API の初期化に成功した際に実行するメソッド名を指定します。 | "onSongleWidgetReady" | No |
data-api-beat-auto-reload | 1 の場合、拍に関する音楽地図の自動更新を行います。 | "0" | No |
data-api-chord-auto-reload | 1 の場合、和音に関する音楽地図の自動更新を行います。 | "0" | No |
data-api-melody-auto-reload | 1 の場合、メロディに関する音楽地図の自動更新を行います。 | "0" | No |
data-api-chorus-auto-reload | 1 の場合、サビに関する音楽地図の自動更新を行います。 | "0" | No |
data-api-beat-disabled | 1 の場合、拍に関する音楽地図のダウンロードをスキップします。 | "0" | No |
data-api-chord-disabled | 1 の場合、和音に関する音楽地図のダウンロードをスキップします。 | "0" | No |
data-api-melody-disabled | 1 の場合、メロディに関する音楽地図のダウンロードをスキップします。 | "0" | No |
data-api-chorus-disabled | 1 の場合、サビに関する音楽地図のダウンロードをスキップします。 | "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-play | 1 の場合、自動再生を有効にします(YouTube / mp3 のみ)。 | "0" | No |
data-song-auto-loop | 1 の場合、自動繰返を有効にします(YouTube / mp3 のみ)。 | "0" | No |
data-song-start-at | 初回再生時の再生位置を時刻(秒)指定します。chorus の場合、最初の繰り返し区間(橙色)から再生します。repeat の場合、最初の繰り返し区間(青色)から再生します。 | "0" | No |
data-song-volume | 初期音量を 0 ~ 100 の範囲で設定します。 | "auto" | No |
data-songle-widget-ctrl | 1 の場合、コントロールボタンを表示します。 | "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-w | Songle Widget の横幅(ピクセル)を設定します。auto の場合、埋め込まれた親要素のサイズに自動調節します。 | "275" | No |
data-songle-widget-size-h | Songle Widget の縦幅(ピクセル)を設定します。auto の場合、埋め込まれた親要素のサイズに自動調節します。 | "100" | No |
data-video-player-size-w | 動画プレーヤの横幅(ピクセル)を設定します。auto の場合、埋め込まれた親要素のサイズに自動調節します。 | "275" | No |
data-video-player-size-h | 動画プレーヤの縦幅(ピクセル)を設定します。auto の場合、埋め込まれた親要素のサイズに自動調節します。 | "155" | No |
data-nn-transparent | 1 の場合 wmode を有効にします(ニコニコ動画のみ)。 | "0" | No |
data-yt-ctrl | 1 の場合、動画プレーヤの制御表示を有効にします(YouTube のみ)。 | "0" | No |
data-yt-info | 1 の場合、動画プレーヤの詳細表示を有効にします(YouTube のみ)。 | "0" | No |
data-yt-quality | 動画プレーヤの品質を設定します(YouTube のみ)。 | "small" | No |