var beat = document.querySelector('.beat'); var chord = document.querySelector('.chord'); var time = document.querySelector('.time'); var position = document.querySelector('.beat .position'); var numberOfBeatsPerBar = document.querySelector('.beat .number-of-beats-per-bar'); // Songle Widget の準備が完了すると window.onSongleWidgetReady が実行される window.onSongleWidgetAPIReady = function(SongleWidget) { // 音楽プレーヤーを初期化する var player = new SongleWidget.Player({ accessToken: '0000000a-zHFdDSW' // アクセストークン }); // 使用する plugin を追加する player.addPlugin(new SongleWidget.Plugin.SongleSync()); player.addPlugin(new SongleWidget.Plugin.Beat()); player.addPlugin(new SongleWidget.Plugin.Chord()); player.addPlugin(new SongleWidget.Plugin.Chorus()); // ビートに合わせてスタイルを変更する player.on("beatPlay", function(event) { setText(position, event.data.beat.position); setText(numberOfBeatsPerBar, event.data.beat.count); beat.setAttribute('class', 'beat beat-' + event.data.beat.position); }); // 再生時刻を定期的に更新する setInterval(function () { if (player.isPlaying) { setText(time, msToTimeString(player.position)); } }, 100); // コード名を表示 player.on("chordEnter", function(event) { setText(chord, event.data.chord.name); }); // サビに入ったらスタイルを変更する player.on("chorusSectionEnter", function() { document.body.classList.add('chorus'); }); // サビを出たらスタイルを戻す player.on("chorusSectionLeave", function() { document.body.classList.remove('chorus'); }); } 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); }
<script src="http://api.songle.jp/v2/api.js"></script> <header> <h1>slave</h1> <p class="time">-</p> </header> <main> <section class="beat"> <span class="position">-</span> / <span class="number-of-beats-per-bar">-</span> </section> <section class="info"> <p class="chord">-</p> </section> </main>