Created
February 4, 2018 04:38
-
-
Save XxGodmoonxX/6fe73b7be845f0bb25ca789081b8f8f9 to your computer and use it in GitHub Desktop.
Songle Sync Tutorial Step.3 (songle-sync-master.html)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html><head><script src="//api.songle.jp/v2/api.js"></script><script>//ブラウザ開いた時 | |
window.onload = function() { | |
console.log("open"); | |
//connect2unity_server(); | |
} | |
//ブラウザ閉じる時 | |
window.onbeforeunload = function(){ | |
console.log("exit"); | |
//disconnect2unity_server(); | |
} | |
function onSongleWidgetAPIReady(SongleWidget) { | |
// 音楽プレーヤーを表示する | |
var player = new SongleWidget.Player({ | |
// 他の端末と同期しない場合は不要 | |
accessToken: '00000052-o8Ck6Wx', // アクセストークン | |
secretToken: 'nUuRqmz39ye9FwY7v3uKN4nBSikLy659' // シークレットトークン | |
}); | |
// 使用する楽曲メディアを指定する | |
player.useMedia( | |
// 自分でアップロードした楽曲のURLを指定 | |
'https://www.youtube.com/watch?v=-tKVN2mAKRI', | |
{ rootElement: document.querySelector('div.media') }); | |
// 使用する plugin を追加する | |
//ビートのプラグイン | |
player.addPlugin(new SW.Plugin.Beat()); | |
//コードのプラグイン | |
player.addPlugin(new SW.Plugin.Chord()); | |
//サビのプラグイン | |
player.addPlugin(new SW.Plugin.Chorus()); | |
//バリエーションのプラグイン | |
var options = { | |
//何分割するか | |
groupCount: 4 | |
}; | |
player.addPlugin(new SW.Plugin.Variation(options)); | |
// 再生ボタンで再生を開始する | |
var playButton = document.querySelector('button.play'); | |
playButton.addEventListener('click', function () { | |
player.play(); | |
}); | |
//音楽開始したら | |
player.on("play", function() { | |
//start.music(); | |
var div_element = document.createElement('div'); | |
div_element.innerHTML = '<hr>start'; | |
var parent_object = document.getElementById("add_sentence"); | |
parent_object.appendChild(div_element); | |
}) | |
// 停止ボタンで再生を停止する | |
var pauseButton = document.querySelector('button.pause'); | |
pauseButton.addEventListener('click', function () { | |
player.pause(); | |
}); | |
//音楽が停止したら | |
player.on("pause", function() { | |
var div_element = document.createElement('div'); | |
div_element.innerHTML = '<hr>pause'; | |
var parent_object = document.getElementById("add_sentence"); | |
parent_object.appendChild(div_element); | |
}); | |
// ビートに合わせて情報を表示する | |
var beat = document.querySelector('span.beat'); | |
player.on("beatEnter", function(event) { | |
console.log(event) | |
setText(beat, event.data.beat.position); | |
}); | |
// 再生時刻を定期的に更新する | |
var time = document.querySelector('span.time'); | |
setInterval(function () { | |
if (player.isPlaying) { | |
setText(time, msToTimeString(player.position)); | |
} | |
}, 100); | |
//1小節ごとに文章増加、1ずつiが増える | |
var barEnterArray = new Array(10000); | |
var i = 0; | |
player.on('barEnter', function(event) { | |
// console.log(event.data.bar); | |
add_barenter(); | |
barEnterArray[i] = i; | |
console.log("BarEnter" + barEnterArray[i]); | |
i += 1; | |
var barEnter = document.querySelector('span.barEnter'); | |
var barEnterText = "小節" + i; | |
setText(barEnter, barEnterText); | |
}); | |
//コードが1回変わると名前わかる、jが1増える | |
var chordEnterArray = new Array(10000); | |
var j = 0; | |
player.on("chordEnter", function(event) { | |
//コードの名前がわかる | |
console.log(event.data.chord.name); | |
chordEnter(); | |
chordEnterArray[j] = j | |
console.log("Chord" + chordEnterArray[j]); | |
j += 1; | |
var chord = document.querySelector('span.chord'); | |
var chordText = "コード" + j; | |
setText(chord, chordText); | |
}); | |
//サビに1回入るとkが1増える | |
var chorusSectionEnterArray = new Array(10000); | |
var k = 0; | |
player.on("chorusSectionEnter", function(event) { | |
//サビはいると | |
// console.log(event.data.section.duration); | |
chorusSectionEnter(); | |
chorusSectionEnterArray[k] = k; | |
console.log("ChorusSection" + chorusSectionEnterArray[k]); | |
k += 1; | |
var chorus = document.querySelector('span.chorus'); | |
var chorusText = "サビ" + k; | |
setText(chorus, chorusText); | |
}); | |
//繰り返し期間に入ったとき | |
var repeatSectionEnterArray = new Array(10000); | |
var l = 0; | |
player.on("repeatSectionEnter", function(event) { | |
console.log(event.data.section); | |
repeatSectionEnterArray[l] = l; | |
console.log("Repeat" + repeatSectionEnterArray[l]); | |
l += 1; | |
var repeat = document.querySelector('span.repeat'); | |
var repeatText = "繰り返し" + l; | |
setText(repeat, repeatText); | |
}); | |
//バリエーション | |
player.on("variationEnter", function(event) { | |
console.log(event.data.variation.gruop); | |
var variation = document.querySelector("span.variation"); | |
var variationText = "盛り上がりレベル" + event.data.variation.group; | |
setText(variation, variationText); | |
}); | |
} | |
function setText(node, text) { | |
if (typeof node.textContent !== 'undefined') { | |
node.childNodes[0].textContent = text; | |
} else { | |
node.innerHTML = text; | |
} | |
} | |
function msToTimeString(ms) { | |
var sec = (ms / 1000 % 60) | 0; | |
var min = (ms / 1000 / 60) | 0; | |
return min + ':' + (sec < 10 ? ('0' + sec) : sec); | |
} | |
function add_barenter() { | |
var div_element = document.createElement('div'); | |
div_element.innerHTML = '<hr>barenter'; | |
var parent_object = document.getElementById("add_sentence"); | |
parent_object.appendChild(div_element); | |
} | |
function chordEnter() { | |
var div_element = document.createElement('div'); | |
div_element.innerHTML = '<hr>chordChange!!'; | |
var parent_object = document.getElementById("add_sentence"); | |
parent_object.appendChild(div_element); | |
} | |
function chorusSectionEnter() { | |
var div_element = document.createElement('div'); | |
div_element.innerHTML = '<hr>サビ!!'; | |
var parent_object = document.getElementById("add_sentence"); | |
parent_object.appendChild(div_element); | |
} | |
function receice_success_send() { | |
var div_element = document.createElement('div'); | |
div_element.innerHTML = '<hr>Success Send Word!!'; | |
var parent_object = document.getElementById("add_sentence"); | |
parent_object.appendChild(div_element); | |
}</script><style type="text/css"> | |
body { | |
margin: 1em; | |
font-family: 'Hiragino Kaku Gothic Pro','游ゴシック体','Yu Gothic',YuGothic,Meiryo,HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif; | |
} | |
h1 { | |
font-size: 1.6em; | |
border: solid #000; | |
border-width: 0 0 1px 0; | |
} | |
iframe { | |
max-width: 100%; | |
overflow-x: scroll-x; | |
} | |
p>span { | |
font-weight: bold; | |
} | |
</style></head><body><div> | |
<section> | |
<div class="media"></div> | |
</section> | |
<section class="control"> | |
<h1> | |
<a href="https://www.youtube.com/watch?v=-tKVN2mAKRI">DAOKO × 米津玄師『打上花火』</a> | |
</h1> | |
<p> | |
<button class="play">再生</button> | |
<button class="pause">停止</button> | |
</p> | |
<p><span class="time">-</span></p> | |
<p><span class="beat">-</span></p> | |
<p><span class="barEnter">-</span></p> | |
<p><span class="chord">-</span></p> | |
<p><span class="chorus">-</span></p> | |
<p><span class="repeat">-</span></p> | |
<p><span class="variation">-</span></p> | |
<div id="add_sentence"></div> | |
</section> | |
</div></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
曲のデータが色々とれます、Songle神です。