Songle Embedded Player

Demonstration of Music-Synchronized Animation

Let's push the play button below!

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. Songle then started supporting video sharing services, Niconico and YouTube, on August 27th, 2013 and this function is also upgraded accordingly.

Examples of web pages demonstrating the Songle Embedded Player:

How to embed the Songle Embedded Player:

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 data-song-start-at="STARTTIME" is added after data-url="", the initial playback position can be changed. The STARTTIME could be a numerical value in second, chorus (for the beginning of the first chorus section), or repeat (for the beginning of the first repeated section).

<div data-url="http://songle.jp/songs/www.youtube.com%2Fwatch%3Fv=PqJNc9KVIZE" id="songle-embedded-player"></div><script src="http://assets.songle.jp/assets/embedded_v2.js" type="text/javascript"></script>

If you would like to show animation synchronized with music, please copy the embed HTML code below instead of the above code.

<div data-api="songle-visualizer-type1" data-url="http://songle.jp/songs/www.youtube.com%2Fwatch%3Fv=PqJNc9KVIZE" id="songle-embedded-player"></div><script src="http://assets.songle.jp/assets/embedded_v2.js" type="text/javascript"></script><script src="http://assets.songle.jp/assets/songle_api_v2.js" type="text/javascript"></script><script src="http://assets.songle.jp/javascripts/embed_player_v2/songle/api_example.js" type="text/javascript"></script>

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.

Related pages:

Masataka GOTO <songle-ml [at] aist.go.jp>