A web service for active music listening "Songle" (http://songle.jp) enables you to embed the Songle Embedded Player in your homepage or blog.
The music structure of a song is shown in the center of the player. If you push an orange region or a right orange button, you can immediately listen to the chorus.
In addition, you can show music-synchronized animation in the background of your web page. This page is intended to demonstrate this function.
Note that the music-synchronized animation cannot be shown on Internet Explorer 8 or below because HTML5 is not supported. Chrome browser is recommended.
This function became available after AIST's press release on August 29th, 2012.
Please click the title in the player to jump to Songle's page for its song, then click the link named "Embedded Player" for details.
For example, we simply copy and paste the embed HTML code below for this web page.
If you would like to show animation synchronized with music, please copy the embed HTML code below and paste it into <head></head> of your web page. If it is difficult to paste it into <head>, you could simply paste it into the main text. If you would also like to change the background color according to chord progression, please inspect <head> of this demonstration page.
Let's use this new player in your web page!
Note: If the music-synchronized animation is not shown behind the main text or is not shown at all, it is necessary to modify a block element (like "div") behind the main text so that it looks like <div id="BACKGROUND" data-songle-visualizer-target="true"> or <div id="BACKGROUND" data-songle-visualizer-target="true" style="position:relative; z-index:1;"> , for example. In some cases, it would also be necessary to adjust the value of "z-index" in other elements. When data-songle-visualizer-target="true" is written, the animation is shown on its block element. Otherwise, the animation is shown on the background.