Window: class
ここでは window
グローバル変数から利用できる、ウィンドウインタフェースについて説明しています。
ウェブブラウザから Songle JavaScript API を利用している場合、このウィンドウインタフェースが自動的に拡張されます。
Songle: any
ウィンドウインタフェースに追加される Songle JavaScript API のクラスメソッドが定義されたオブジェクトです。
このオブジェクトが確実に利用できることを保証する必要がある場合は onSongleAPIReady
を利用することが推奨されます。
const player =
new window.Songle.Player({
mediaElement: "#songle"
});
player.on("ready",
function(ev) {
player.play();
});
player.useMedia("https://www.youtube.com/watch?v=6j7VwJ7sM_k");
onSongleAPIReady: function
ウェブブラウザから Songle JavaScript API を利用している場合 Songle JavaScript API の初期化処理が完了すると自動的に呼び出される、予約されたメソッドです。
このメソッドは Songle JavaScript API 読み込み前に定義しておく必要があります。
window.onSongleAPIReady =
function(Songle) {
const player =
new Songle.Player({
mediaElement: "#songle"
});
player.on("ready",
function(ev) {
player.play();
});
player.useMedia("https://www.youtube.com/watch?v=6j7VwJ7sM_k");
}
Player: class
名前 | 型 | 初期値 | 説明 |
---|---|---|---|
accessToken | string | null | Songle Sync API (Plugin.SongleSync) を利用する際に使用する公開用のトークンを指定します。 |
secretToken | string | null | Songle Sync API (Plugin.SongleSync) を利用する際に使用する認証用のトークンを指定します。 |
mediaElement | HTMLElement | string | document.body | 外部埋め込みプレーヤーを埋め込む先の DOM を指定します。 |
const player =
new Songle.Player({
mediaElement: "#songle"
});
MinVolume: number
MaxVolume: number
accessToken: string
secretToken: string
mediaElement: HTMLElement | string
volume: number
音量(パーセンテージ)です。
console.log(player.volume);
player.volume += 10; // + 10 %
player.volume -= 10; // - 10 %
media: Songle.Media.SuperClass
musicMap: any
console.log(player.musicMap);
/**
{
beat: any
chord: any
melody: any
chorus: any
variation: any
}
*/
isReady: boolean
isPlaying: boolean
isPaused: boolean
isSeeking: boolean
duration: number
position: number
addPlugin: void
このメソッドを利用することで Player クラスの機能を必要に応じて拡張していくことができます。
例えば、音楽の拍子に連動させたい場合は Plugin.Beat
をインストールすることで、拍子に連動したプログラムを作成することができます。初期状態では、何もインストールされていない一般的な音楽プレイヤーとして機能します。
原則として、プラグインのインストールはメディアを設定する前に完了しておく必要があります。
const player =
new Songle.Player({
mediaElement: "#songle"
});
player.on("ready",
function() {
player.play();
});
player.addPlugin(new Songle.Plugin.Beat());
player.addPlugin(new Songle.Plugin.Chord());
player.useMedia("https://www.youtube.com/watch?v=6j7VwJ7sM_k");
useMedia: void
名前 | 型 | 必須 | 初期値 | 説明 |
---|---|---|---|---|
第1引数 | string | Media.SuperClass | true | null | Songle に登録されている楽曲の配信元 URL を指定します。 |
第2引数 | object | false | null | オプション |
Songle API では、インターネット上に公開された楽曲のことを「メディア」と呼ばれる抽象化された概念として扱います。メディアとして扱うことができる楽曲の種類の詳細については、こちらのヘルプページをご確認ください。
const player =
new Songle.Player({
mediaElement: "#songle"
});
player.on("ready",
function() {
player.play();
});
player.useMedia("https://www.youtube.com/watch?v=6j7VwJ7sM_k");
activate: void
play: void
pause: void
stop: void
seekTo: void
on: void
player.on("ready",
function()
{
player.play();
});
error
ready
play
pause
seek
finish
mediaError
mediaReady
mediaStateChange
これらの違いは「メディア側の都合によりメディアの状態が変化したか否か」です。ユーザが Player.play
などの Songle API メソッドを介してメディアを再生させた場合は mediaPlay
と play
が呼び出されます。逆にメディアが何らかの要因で自動再生した場合は mediaPlay
のみが呼び出されます。カジュアルにプログラミングをする場合は、接頭辞のない方のイベントを使うと良いでしょう。
mediaPlay
mediaPause
mediaSeek
mediaFinish
SyncPlayer: class
音楽プレイヤーを抽象化したクラスです。
このクラスを利用して初期化された Player
は、次のコードと同じ意味になります。
const player =
new Songle.Player({
mediaElement: "#songle"
});
player.addPlugin(Songle.Plugin.SongleSync());
WidgetPlayer: class
音楽プレイヤーを抽象化したクラスです。
このクラスを利用して初期化された Player
は、次のコードと同じ意味になります。
const player =
new Songle.Player({
mediaElement: "#songle"
});
player.addPlugin(Songle.Plugin.SongleWidget());
Media.SuperClass: abstract class
メディアクラスのスーパークラスです。
全てのメディアクラスは、このスーパークラスのメソッド・プロパティを呼び出すことができます。
メディアクラスは、音源となる様々な配信元の音楽プレイヤーを抽象化する役割を担っています。例えば、再生や停止、音量の調節など、使用する音楽プレイヤー毎にその利用方法が異なりますが、このクラスを利用することで、その差異を意識することなく制御することができるようになります。
Name: string
メディアクラスに設定された名称の定数です。
この値は継承先のメディアクラスによって変化することがあります。
Type: string
メディアクラスに設定された種類の定数です。
この値は継承先のメディアクラスによって変化することがあります。
dispatcherName: string
メディアクラスのインスタンスに設定された名称です。
この値は継承先のメディアクラスによって変化することがあります。
dispatcherType: string
メディアクラスのインスタンスに設定された種類です。
この値は継承先のメディアクラスによって変化することがあります。
name: string
artistId: number
artistName: string
medianSeekTime: number
originalDuration: number
メディアの再生時間(ミリ秒)です。
この値は、メディアの種類(実装の差異)及び再生環境によって値が揺らぐため、特別な理由がなければ Player.duration
を使うことを推奨します。
originalPosition: number
メディアの再生位置(ミリ秒)です。
この値は、メディアの種類(実装の差異)及び再生環境によって値が揺らぐため、特別な理由がなければ Player.position
を使うことを推奨します。
Media.Headless: class
音楽の再生を必要としない場合に利用するメディアクラスです。
例えば、スピーカーを持たない端末などから、音楽地図のみを利用したい場合に利用します。
const media =
new Songle.Media.Headless("https://www.youtube.com/watch?v=6j7VwJ7sM_k");
player.useMedia(media);
Media.HTMLMediaElement: class
const media =
new Songle.Media.HTMLMediaElement(audioElement);
player.useMedia(media);
Media.NnVideo: class
const media =
new Songle.Media.NnVideo(nnVideoInstance);
player.useMedia(media);
Media.YtVideo: class
const media =
new Songle.Media.YtVideo(ytVideoInstance);
player.useMedia(media);
Plugin.SuperClass: abstract class
プラグインクラスのスーパークラスです。
全てのプラグインクラスは、このスーパークラスのメソッド・プロパティを呼び出すことができます。
Name: string
プラグインクラスに設定された名称の定数です。
この値は継承先のプラグインクラスによって変化することがあります。
Type: string
プラグインクラスに設定された種類の定数です。
この値は継承先のプラグインクラスによって変化することがあります。
dispatcherName: string
プラグインクラスのインスタンスに設定された名称です。
この値は継承先のプラグインクラスによって変化することがあります。
dispatcherType: string
プラグインクラスのインスタンスに設定された種類です。
この値は継承先のプラグインクラスによって変化することがあります。
Plugin.Beat: class
名前 | 型 | 初期値 | 説明 |
---|---|---|---|
revisionId | number | 0 | 使用する音楽地図のリビジョン番号です。 |
offset | number | 0 | イベントのオフセット値(ミリ秒)です。 |
pollingInterval | number | 50 | イベントのポーリング値(ミリ秒)です。 |
player.addPlugin(new Songle.Plugin.Beat());
player.on("beatEnter",
function(ev) {
// do someting ...
});
オフセットでは、イベントの実行タイミングにオフセットを与えることができます。これは、アプリケーションの処理負荷などの要因によって、イベントの実行タイミングが前後にズレる場合に役立ちます。また、オフセットはイベント毎に個別に与えることもできます。
player.addPlugin(new Songle.Plugin.Beat({
offset: -100,
});
player.on("beatEnter",
function(ev) {
// this event will be run faster 100ms than the original beat event
});
player.on("beatEnter",
function(ev) {
// this event will be run faster 200ms than the original beat event
}, { offset: -100 });
player.on("beatEnter",
function(ev) {
// this event will be run faster 300ms than the original beat event
}, { offset: -200 });
BarEnterTrapName: string
BarLeaveTrapName: string
BeatEnterTrapName: string
BeatLeaveTrapName: string
offset: number
pollingInterval: number
revisionId: number
seekToPrevBar: void
現在の再生位置から後方に対して、最も近い小節にシークします。
このメソッドは Player
クラスに同名のメソッド名がプラグイン読み込み前に定義されていない場合は Player
クラスから呼び出すことができます。
player.addPlugin(new Songle.Plugin.Beat());
player.on("ready",
function() {
player.seekToPrevBar();
});
seekToNextBar: void
現在の再生位置から前方に対して、最も近い小節にシークします。
このメソッドは Player
クラスに同名のメソッド名がプラグイン読み込み前に定義されていない場合は Player
クラスから呼び出すことができます。
player.addPlugin(new Songle.Plugin.Beat());
player.on("ready",
function() {
player.seekToNextBar();
});
barEnter
player.on("barEnter",
function(ev) {
console.log(ev);
/**
{
data: {
beat: Beat
}
}
*/
/**
// 拍子構造
type Beat = {
index: number, // インデックス
startTime: number, // 拍子の開始位置(ミリ秒)
startTimeSec: number, // 拍子の開始位置(秒)
numberOfBeatsPerBar: number, // 現在の小節の拍子の数
number: number, // 現在の小節の拍子の位置
bpm: numbeer, // BPM
prev: Beat, // 前の拍子構造の参照
next: Beat // 次の拍子構造の参照
}
*/
});
barLeave
player.on("barLeave",
function(ev) {
console.log(ev);
/**
{
data: {
beat: Beat
}
}
*/
/**
// 拍子構造
type Beat = {
index: number, // インデックス
startTime: number, // 拍子の開始位置(ミリ秒)
startTimeSec: number, // 拍子の開始位置(秒)
numberOfBeatsPerBar: number, // 現在の小節の拍子の数
number: number, // 現在の小節の拍子の位置
bpm: numbeer, // BPM
prev: Beat, // 前の拍子構造の参照
next: Beat // 次の拍子構造の参照
}
*/
});
beatEnter
player.on("beatEnter",
function(ev) {
console.log(ev);
/**
{
data: {
beat: Beat
}
}
*/
/**
// 拍子構造
type Beat = {
index: number, // インデックス
startTime: number, // 拍子の開始位置(ミリ秒)
startTimeSec: number, // 拍子の開始位置(秒)
numberOfBeatsPerBar: number, // 現在の小節の拍子の数
number: number, // 現在の小節の拍子の位置
bpm: numbeer, // BPM
prev: Beat, // 前の拍子構造の参照
next: Beat // 次の拍子構造の参照
}
*/
});
beatLeave
player.on("beatLeave",
function(ev) {
console.log(ev);
/**
{
data: {
beat: Beat
}
}
*/
/**
// 拍子構造
type Beat = {
index: number, // インデックス
startTime: number, // 拍子の開始位置(ミリ秒)
startTimeSec: number, // 拍子の開始位置(秒)
numberOfBeatsPerBar: number, // 現在の小節の拍子の数
number: number, // 現在の小節の拍子の位置
bpm: numbeer, // BPM
prev: Beat, // 前の拍子構造の参照
next: Beat // 次の拍子構造の参照
}
*/
});
Plugin.Chord: class
名前 | 型 | 初期値 | 説明 |
---|---|---|---|
revisionId | number | 0 | 使用する音楽地図のリビジョン番号です。 |
offset | number | 0 | イベントのオフセット値(ミリ秒)です。 |
pollingInterval | number | 50 | イベントのポーリング値(ミリ秒)です。 |
player.addPlugin(new Songle.Plugin.Chord());
player.on("chordEnter",
function(ev) {
// do someting ...
});
オフセットでは、イベントの実行タイミングにオフセットを与えることができます。これは、アプリケーションの処理負荷などの要因によって、イベントの実行タイミングが前後にズレる場合に役立ちます。また、オフセットはイベント毎に個別に与えることもできます。
player.addPlugin(new Songle.Plugin.Chord({
offset: -100,
});
player.on("chordEnter",
function(ev) {
// this event will be run faster 100ms than the original chord event
});
player.on("chordEnter",
function(ev) {
// this event will be run faster 200ms than the original chord event
}, { offset: -100 });
player.on("chordEnter",
function(ev) {
// this event will be run faster 300ms than the original chord event
}, { offset: -200 });
ChordEnterTrapName: string
ChordLeaveTrapName: string
offset: number
pollingInterval: number
revisionId: number
chordEnter
player.on("chordEnter",
function(ev) {
console.log(ev);
/**
{
data: {
chord: Chord
}
}
*/
/**
// 和音構造
type Chord = {
index: number, // インデックス
startTime: number, // 和音の開始位置(ミリ秒)
startTimeSec: number, // 和音の開始位置(秒)
endTime: number, // 和音の終了位置(ミリ秒)
endTimeSec: number, // 和音の終了位置(秒)
durationTime: number, // 和音の再生時間(ミリ秒)
durationTimeSec: number, // 和音の再生時間(秒)
name: string, // 和音の名前
prev: Chord, // 前の和音構造の参照
next: Chord // 次の和音構造の参照
}
*/
});
chordLeave
player.on("chordLeave",
function(ev) {
console.log(ev);
/**
{
data: {
chord: Chord
}
}
*/
/**
// 和音構造
type Chord = {
index: number, // インデックス
startTime: number, // 和音の開始位置(ミリ秒)
startTimeSec: number, // 和音の開始位置(秒)
endTime: number, // 和音の終了位置(ミリ秒)
endTimeSec: number, // 和音の終了位置(秒)
durationTime: number, // 和音の再生時間(ミリ秒)
durationTimeSec: number, // 和音の再生時間(秒)
name: string, // 和音の名前
prev: Chord, // 前の和音構造の参照
next: Chord // 次の和音構造の参照
}
*/
});
Plugin.Melody: class
名前 | 型 | 初期値 | 説明 |
---|---|---|---|
revisionId | number | 0 | 使用する音楽地図のリビジョン番号です。 |
offset | number | 0 | イベントのオフセット値(ミリ秒)です。 |
pollingInterval | number | 50 | イベントのポーリング値(ミリ秒)です。 |
player.addPlugin(new Songle.Plugin.Melody());
player.on("melodyEnter",
function(ev) {
// do someting ...
});
このプラグインを利用して、ピッチ(音高)を取得することはできません。ここで扱うことのできるメロディとは、メロディの発音タイミングや音符・休符の判別フラグのみとなります。
オフセットでは、イベントの実行タイミングにオフセットを与えることができます。これは、アプリケーションの処理負荷などの要因によって、イベントの実行タイミングが前後にズレる場合に役立ちます。また、オフセットはイベント毎に個別に与えることもできます。
player.addPlugin(new Songle.Plugin.Melody({
offset: -100,
});
player.on("melodyEnter",
function(ev) {
// this event will be run faster 100ms than the original melody event
});
player.on("melodyEnter",
function(ev) {
// this event will be run faster 200ms than the original melody event
}, { offset: -100 });
player.on("melodyEnter",
function(ev) {
// this event will be run faster 300ms than the original melody event
}, { offset: -200 });
MelodyEnterTrapName: string
MelodyLeaveTrapName: string
offset: number
pollingInterval: number
revisionId: number
melodyEnter
player.on("melodyEnter",
function(ev) {
console.log(ev);
/**
{
data: {
melody: Melody
}
}
*/
/**
// メロディ構造
type Melody = {
index: number, // インデックス
startTime: number, // メロディの開始位置(ミリ秒)
startTimeSec: number, // メロディの開始位置(秒)
endTime: number, // メロディの終了位置(ミリ秒)
endTimeSec: number, // メロディの終了位置(秒)
durationTime: number, // メロディの再生時間(ミリ秒)
durationTimeSec: number, // メロディの再生時間(秒)
isNote: boolean, // 音符の判別フラグ
isRest: boolean, // 休符の判別フラグ
prev: Melody, // 前のメロディ構造の参照
next: Melody // 次のメロディ構造の参照
}
*/
});
melodyLeave
player.on("melodyLeave",
function(ev) {
console.log(ev);
/**
{
data: {
melody: Melody
}
}
*/
/**
// メロディ構造
type Melody = {
index: number, // インデックス
startTime: number, // メロディの開始位置(ミリ秒)
startTimeSec: number, // メロディの開始位置(秒)
endTime: number, // メロディの終了位置(ミリ秒)
endTimeSec: number, // メロディの終了位置(秒)
durationTime: number, // メロディの再生時間(ミリ秒)
durationTimeSec: number, // メロディの再生時間(秒)
isNote: boolean, // 音符の判別フラグ
isRest: boolean, // 休符の判別フラグ
prev: Melody, // 前のメロディ構造の参照
next: Melody // 次のメロディ構造の参照
}
*/
});
Plugin.Chorus: class
名前 | 型 | 初期値 | 説明 |
---|---|---|---|
revisionId | number | 0 | 使用する音楽地図のリビジョン番号です。 |
offset | number | 0 | イベントのオフセット値(ミリ秒)です。 |
pollingInterval | number | 50 | イベントのポーリング値(ミリ秒)です。 |
player.addPlugin(new Songle.Plugin.Chorus());
player.on("chorusSectionEnter",
function(ev) {
// do someting ...
});
この図は、楽曲訂正インタフェースにおける、サビ及び繰り返し構造の可視化を模倣したものです。サビ区間は、楽曲訂正インタフェースにおける橙色の区間を指し、繰り返し区間は、楽曲訂正インタフェースにおける橙色と青色の区間を指します。
オフセットでは、イベントの実行タイミングにオフセットを与えることができます。これは、アプリケーションの処理負荷などの要因によって、イベントの実行タイミングが前後にズレる場合に役立ちます。また、オフセットはイベント毎に個別に与えることもできます。
player.addPlugin(new Songle.Plugin.Chorus({
offset: -100,
});
player.on("chorusSectionEnter",
function(ev) {
// this event will be run faster 100ms than the original chorus event
});
player.on("chorusSectionEnter",
function(ev) {
// this event will be run faster 200ms than the original chorus event
}, { offset: -100 });
player.on("chorusSectionEnter",
function(ev) {
// this event will be run faster 300ms than the original chorus event
}, { offset: -200 });
ChorusSectionEnterTrapName: string
ChorusSectionLeaveTrapName: string
RepeatedSectionEnterTrapName: string
RepeatedSectionLeaveTrapName: string
offset: number
pollingInterval: number
revisionId: number
seekToPrevChorusSection: void
現在の再生位置から後方に対して、最も近いサビ区間にシークします。
このメソッドは Player
クラスに同名のメソッド名がプラグイン読み込み前に定義されていない場合は Player
クラスから呼び出すことができます。
player.add(new Songle.Plugin.Chorus());
player.on("ready",
function()
{
player.seekToPrevChorusSection();
});
seekToNextChorusSection: void
現在の再生位置から前方に対して、最も近いサビ区間にシークします。
このメソッドは Player
クラスに同名のメソッド名がプラグイン読み込み前に定義されていない場合は Player
クラスから呼び出すことができます。
player.add(new Songle.Plugin.Chorus());
player.on("ready",
function()
{
player.seekToNextChorusSection();
});
seekToPrevRepeatedSection: void
現在の再生位置から後方に対して、最も近い繰り返し区間にシークします。
このメソッドは Player
クラスに同名のメソッド名がプラグイン読み込み前に定義されていない場合は Player
クラスから呼び出すことができます。
player.add(new Songle.Plugin.Chorus());
player.on("ready",
function()
{
player.seekToPrevRepeatedSection();
});
seekToNextRepeatedSection: void
現在の再生位置から前方に対して、最も近い繰り返し区間にシークします。
このメソッドは Player
クラスに同名のメソッド名がプラグイン読み込み前に定義されていない場合は Player
クラスから呼び出すことができます。
player.add(new Songle.Plugin.Chorus());
player.on("ready",
function()
{
player.seekToNextRepeatedSection();
});
chorusSectionEnter
サビ区間の開始で呼び出されるイベントです。
区間が重なっている場合は、インデックスの値が小さい順に呼び出されます。
player.on("chorusSectionEnter",
function(ev) {
console.log(ev);
/**
{
data: {
section: ChorusSection,
sectionItem: ChorusSectionItem
}
}
*/
/**
// サビ区間構造
type ChorusSection = {
index: number, // インデックス
isChorus: boolean, // サビの判別フラグ
durationTime: number, // 区間の再生時間(ミリ秒)
durationTimeSec: number, // 区間の再生時間(秒)
items: Array<ChorusSectionItem>
}
*/
/**
// サビ区間の要素構造
type ChorusSectionItem = {
index: number, // インデックス
startTime: number, // 区間の開始位置(ミリ秒)
startTimeSec: number, // 区間の開始位置(秒)
endTime: number, // 区間の終了位置(ミリ秒)
endTimeSec: number, // 区間の終了位置(秒)
durationTime: number, // 区間の再生時間(ミリ秒)
durationTimeSec: number, // 区間の再生時間(秒)
prev: ChorusSectionItem, // 前のサビ区間の要素構造の参照
next: ChorusSectionItem // 次のサビ区間の要素構造の参照
}
*/
});
chorusSectionLeave
player.on("barLeave",
function(ev) {
console.log(ev);
/**
{
data: {
section: ChorusSection,
sectionItem: ChorusSectionItem
}
}
*/
/**
// サビ区間構造
type ChorusSection = {
index: number, // インデックス
isChorus: boolean, // サビの判別フラグ
durationTime: number, // 区間の再生時間(ミリ秒)
durationTimeSec: number, // 区間の再生時間(秒)
items: Array<ChorusSectionItem>
}
*/
/**
// サビ区間の要素構造
type ChorusSectionItem = {
index: number, // インデックス
startTime: number, // 区間の開始位置(ミリ秒)
startTimeSec: number, // 区間の開始位置(秒)
endTime: number, // 区間の終了位置(ミリ秒)
endTimeSec: number, // 区間の終了位置(秒)
durationTime: number, // 区間の再生時間(ミリ秒)
durationTimeSec: number, // 区間の再生時間(秒)
prev: ChorusSectionItem, // 前のサビ区間の要素構造の参照
next: ChorusSectionItem // 次のサビ区間の要素構造の参照
}
*/
});
repeatedSectionEnter
player.on("chorusSectionEnter",
function(ev) {
console.log(ev);
/**
{
data: {
section: ChorusSection,
sectionItem: ChorusSectionItem
}
}
*/
/**
// サビ区間構造
type ChorusSection = {
index: number, // インデックス
isChorus: boolean, // サビの判別フラグ
durationTime: number, // 区間の再生時間(ミリ秒)
durationTimeSec: number, // 区間の再生時間(秒)
items: Array<ChorusSectionItem>
}
*/
/**
// サビ区間の要素構造
type ChorusSectionItem = {
index: number, // インデックス
startTime: number, // 区間の開始位置(ミリ秒)
startTimeSec: number, // 区間の開始位置(秒)
endTime: number, // 区間の終了位置(ミリ秒)
endTimeSec: number, // 区間の終了位置(秒)
durationTime: number, // 区間の再生時間(ミリ秒)
durationTimeSec: number, // 区間の再生時間(秒)
prev: ChorusSectionItem, // 前のサビ区間の要素構造の参照
next: ChorusSectionItem // 次のサビ区間の要素構造の参照
}
*/
});
repeatedSectionLeave
player.on("chorusLeave",
function(ev) {
console.log(ev);
/**
{
data: {
section: ChorusSection,
sectionItem: ChorusSectionItem
}
}
*/
/**
// サビ区間構造
type ChorusSection = {
index: number, // インデックス
isChorus: boolean, // サビの判別フラグ
durationTime: number, // 区間の再生時間(ミリ秒)
durationTimeSec: number, // 区間の再生時間(秒)
items: Array<ChorusSectionItem>
}
*/
/**
// サビ区間の要素構造
type ChorusSectionItem = {
index: number, // インデックス
startTime: number, // 区間の開始位置(ミリ秒)
startTimeSec: number, // 区間の開始位置(秒)
endTime: number, // 区間の終了位置(ミリ秒)
endTimeSec: number, // 区間の終了位置(秒)
durationTime: number, // 区間の再生時間(ミリ秒)
durationTimeSec: number, // 区間の再生時間(秒)
prev: ChorusSectionItem, // 前のサビ区間の要素構造の参照
next: ChorusSectionItem // 次のサビ区間の要素構造の参照
}
*/
});
Plugin.Variation: class
名前 | 型 | 初期値 | 説明 |
---|---|---|---|
offset | number | 0 | イベントのオフセット値(ミリ秒)です。 |
pollingInterval | number | 50 | イベントのポーリング値(ミリ秒)です。 |
groupCount | number | 2 | 分割するグループ数です。 |
player.addPlugin(new Songle.Plugin.Variation());
player.on("variationEnter",
function(ev) {
switch(ev.data.variation.group) {
case 0:
// do someting ...
break;
case 1:
// do someting ...
break;
case 2:
// do someting ...
break;
case 3:
// do someting ...
break;
}
});
バリエーションとは、楽曲の盛り上がりに応じて分割された区間のことです。楽曲に応じた演出の選択などの用途で利用することが想定されています。例えば、分割するグループ数を4とした場合、楽曲全体を4つのグループ(バリエーション区間)に分割します。
バリエーションでは、再生位置に応じた区間の開始・終了でイベントが発生します。イベント発生時に返されるグループ番号は、音響的に派手である区間に対応しており、値が小さほど静かな区間、値が大きい程派手な区間であるとラベリングされています。
オフセットでは、イベントの実行タイミングにオフセットを与えることができます。これは、アプリケーションの処理負荷などの要因によって、イベントの実行タイミングが前後にズレる場合に役立ちます。また、オフセットはイベント毎に個別に与えることもできます。
player.addPlugin(new Songle.Plugin.Variation({
offset: -100,
});
player.on("variationEnter",
function(ev) {
// this event will be run faster 100ms than the original variation event
});
player.on("variationEnter",
function(ev) {
// this event will be run faster 200ms than the original variation event
}, { offset: -100 });
player.on("variationEnter",
function(ev) {
// this event will be run faster 300ms than the original variation event
}, { offset: -200 });
MinGroupCount: number
MaxGroupCount: number
VariationEnterTrapName: string
VariationLeaveTrapName: string
offset: number
pollingInterval: number
variationEnter
player.on("variationEnter",
function(ev) {
console.log(ev);
/**
{
data: {
variation: Variation
}
}
*/
/**
// バリエーション構造
type Variation = {
index: number, // インデックス
startTime: number, // バリエーションの開始位置(ミリ秒)
startTimeSec: number, // バリエーションの開始位置(秒)
endTime: number, // バリエーションの終了位置(ミリ秒)
endTimeSec: number, // バリエーションの終了位置(秒)
durationTime: number, // バリエーションの再生時間(ミリ秒)
durationTimeSec: number, // バリエーションの再生時間(秒)
group: number, // バリエーションのグループ番号
prev: Variation, // 前のバリエーション構造の参照
next: Variation // 次のバリエーション構造の参照
}
*/
});
variationLeave
player.on("variationLeave",
function(ev) {
console.log(ev);
/**
{
data: {
variation: Variation
}
}
*/
/**
// バリエーション構造
type Variation = {
index: number, // インデックス
startTime: number, // バリエーションの開始位置(ミリ秒)
startTimeSec: number, // バリエーションの開始位置(秒)
endTime: number, // バリエーションの終了位置(ミリ秒)
endTimeSec: number, // バリエーションの終了位置(秒)
durationTime: number, // バリエーションの再生時間(ミリ秒)
durationTimeSec: number, // バリエーションの再生時間(秒)
group: number, // バリエーションのグループ番号
prev: Variation, // 前のバリエーション構造の参照
next: Variation // 次のバリエーション構造の参照
}
*/
});
Plugin.SongleSync: class
message: string
isMaster: boolean
isSlave: boolean
play: void
pause: void
stop: void
seekTo: void
songleSyncMediaChange
songleSyncMessage
songleSyncNodeChange
songleSyncNodeEnter
songleSyncNodeLeave
songleSyncStateChange
Plugin.SongleWidget: class
名前 | 型 | 必須 | 初期値 | 説明 |
---|---|---|---|---|
element | string | HTMLElement | true | null | 埋め込み先の DOM 要素を指定します。 |
widget | number | 256 | 外部埋め込みプレイヤーの横幅です。この値を設定した場合、後述する横幅に関するオプションが自動的に計算されます。 | |
height | number | 100 | 外部埋め込みプレイヤーの縦幅です。この値を設定した場合、後述する縦幅に関するオプションが自動的に計算されます。 | |
responsive | boolean | false | 埋め込み先の親要素サイズに応じて自動的にリサイズします。 | |
showController | boolean | true | 操作に関する情報を表示します。 | |
showOriginalSiteLink | boolean | true | 配信サイトに関する情報を表示します。 | |
showMusicMap | boolean | true | 音楽地図に関する情報を表示します。 | |
showSongleJpSiteLink | boolean | true | 訂正サイトに関する情報を表示します。 | |
controllerWidth | number | 256 | 操作に関するインタフェースの横幅です。 | |
controllerHeight | number | 30 | 操作に関するインタフェースの縦幅です。 | |
controllerMouseEnterColor | string | #e17 | 操作ボタンにマウスポインタが触れている場合のカラー設定です。 | |
controllerMouseLeaveColor | string | #222 | 操作ボタンにマウスポインタが触れてない場合のカラー設定です。 | |
language | string | auto | 表示する言語です。 | |
musicMapWidth | number | 256 | 音楽地図に関するインタフェースの横幅です。 | |
musicMapHeight | number | 40 | 音楽地図に関するインタフェースの縦幅です。 | |
musicMapOuterBackgroundColor | string | #999 | 音楽地図に関するインタフェースのカラーです。 | |
musicMapInnerBackgroundColor | string | #eee | 音楽地図に関するインタフェースのカラーです。 | |
musicMapChorusSectionColor | string | #f84 | 音楽地図に関するインタフェースの繰り返し区間に関するカラーです。 | |
musicMapRepeatedSectionColor | string | #48f | 音楽地図に関するインタフェースの繰り返し区間に関するカラーです。 | |
musicMapCursorColor | string | #e17 | 音楽地図に関するインタフェースの再生位置に関するカラーです。 | |
const plugin =
new Songle.Plugin.SongleWidget({ element: "#sw" });
player.addPlugin(plugin);
render: void
System: class
showDebugLog: boolean
Songle.System.showDebugLog = true;
showErrorLog: boolean
Songle.System.showErrorLog = true;
showLicense: boolean
Songle.System.showLicense = false;