self.onSongleAPIReady = function(Songle) { var player = new Songle.Player({ mediaElement: "#songle-yt" }); player.addPlugin(new Songle.Plugin.Beat()); player.addPlugin(new Songle.Plugin.Chord()); player.addPlugin(new Songle.Plugin.Chorus()); player.addPlugin(new Songle.Plugin.SongleWidget({ element: "#songle-sw" })); 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"; document.querySelectorAll("[class*=songle-api-plugin] a").forEach((e) => { e.style.color = "#eee"; }) }); player.on("chorusSectionLeave", function(ev) { document.body.style.backgroundColor = "#f3f5f6"; document.body.style.color = "#000000"; document.querySelectorAll("[class*=songle-api-plugin] a").forEach((e) => { e.style.color = "#e17"; }) }); }
<div class="media" style="position:fixed; left:5px; bottom:5px;"> <div id="songle-yt"> </div> <div id="songle-sw"> </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; } a { color: #e17; text-decoration: none; } 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; }