self.onSongleAPIReady = function(Songle) { var player = new Songle.SyncPlayer({ accessToken: "YOUR-ACCESS-TOKEN-HERE", // Please edit your access token secretToken: "YOUR-SECRET-TOKEN-HERE", // Please edit your secret token mediaElement: "#songle" }); player.addPlugin(new Songle.Plugin.Beat()); player.addPlugin(new Songle.Plugin.Chord()); player.addPlugin(new Songle.Plugin.Chorus()); player.useMedia("https://www.youtube.com/watch?v=zweVJrnE1uY"); player.on("beatPlay", function(ev) { var beatElement = document.querySelector(".beat"); var beatInfo1Element = document.querySelector(".beat .info1"); var beatInfo2Element = document.querySelector(".beat .info2"); beatElement.className = "beat beat-" + ev.data.beat.position; beatInfo1Element.textContent = ev.data.beat.position; beatInfo2Element.textContent = ev.data.beat.count; }); player.on("chordEnter", function(ev) { var chordNameElement = document.querySelector(".chord .name"); chordNameElement.textContent = ev.data.chord.name; }); player.on("chorusSectionEnter", function(ev) { document.body.style.backgroundColor = "#000000"; document.body.style.color = "#f3f5f6"; }); player.on("chorusSectionLeave", function(ev) { document.body.style.backgroundColor = "#f3f5f6"; document.body.style.color = "#000000"; }); var playButton = document.querySelector("button.play"); var stopButton = document.querySelector("button.stop"); playButton.addEventListener("click", function() { player.play(); }); stopButton.addEventListener("click", function() { player.stop(); }); setInterval( function() { if(player.isPlaying) { var timeElement = document.querySelector(".time"); var second = parseInt(player.position / 1000 % 60); var minute = parseInt(player.position / 1000 / 60); timeElement.textContent = minute + ":" + (second < 10 ? ("0" + second) : second); } }, 1000); }
<div class="media"> <div> <span class="time"> 0:00 </span> <button class="play"> Play </button> <button class="stop"> Stop </button> </div> <div id="songle"> </div> </div> <div> <section class="beat"> <span class="info1"> - </span> <span> / </span> <span class="info2"> - </span> </section> <section class="chord"> <span class="name"> - </span> </section> </div> <script src="https://api.songle.jp/v2/api.js"></script>
body { background-color: #f3f5f6; font-family: sans-serif; transition: 0.1s 0.1s all ease; } section { text-align: center; } .beat { font-size: 4em; } .beat .info1 { font-size: 2em; } .beat .info2 { font-size: 1em; } .media { position: fixed; left: 5px; bottom: 0px; } @keyframes beat-anime-1 { 0% { transform: scale(1.20); } 25% { transform: scale(0.85); } 50% { transform: scale(1.00); } } @keyframes beat-anime-2 { 0% { transform: scale(1.10); } 25% { transform: scale(0.95); } 50% { transform: scale(1.00); } } @keyframes beat-anime-3 { 0% { transform: scale(1.10); } 25% { transform: scale(0.95); } 50% { transform: scale(1.00); } } @keyframes beat-anime-4 { 0% { transform: scale(1.10); } 25% { transform: scale(0.95); } 50% { transform: scale(1.00); } } .beat-1 { animation: beat-anime-1 0.5s; } .beat-2 { animation: beat-anime-2 0.5s; } .beat-3 { animation: beat-anime-3 0.5s; } .beat-4 { animation: beat-anime-4 0.5s; }