├── extras ├── src │ ├── sw-extra-stats.js │ ├── sw-extra-helloworld.js │ ├── sw-extra-visualizer.js │ ├── sw-extra-chorus-player.js │ ├── sw-extra-helloworld.coffee │ ├── shared-module.coffee │ ├── sw-extra-chorus-player.coffee │ ├── sw-extra-stats.coffee │ └── sw-extra-visualizer.coffee ├── .gitignore ├── bin │ ├── LICENSE │ └── make.sh ├── sw-extra-helloworld.js ├── sw-extra-chorus-player.html ├── sw-extra-stats.html ├── sw-extra-visualizer.html ├── sw-extra-helloworld.html ├── sw-extra-chorus-player.js ├── sw-extra-stats.js └── sw-extra-visualizer.js ├── README.md ├── LICENSE ├── 1-1-1.html ├── 1-1-3.html ├── 1-1-2.html └── 1-1-4.html /extras/src/sw-extra-stats.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /extras/.gitignore: -------------------------------------------------------------------------------- 1 | *.tmp.js 2 | -------------------------------------------------------------------------------- /extras/src/sw-extra-helloworld.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /extras/src/sw-extra-visualizer.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /extras/src/sw-extra-chorus-player.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /extras/bin/LICENSE: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Takahiro INOUE 3 | * @license Songle Widget API Examples 4 | * 5 | * Visit http://songle.jp/info/Credit.html OR http://widget.songle.jp/docs/v1 for documentation. 6 | * Copyright (c) 2015 National Institute of Advanced Industrial Science and Technology (AIST) 7 | * 8 | * Distributed under the terms of the MIT license only for non-commercial purposes. 9 | * http://www.opensource.org/licenses/mit-license.html 10 | * 11 | * This notice shall be included in all copies or substantial portions of this Songle Widget API Examples. 12 | * If you are interested in commercial use of Songle Widget API, please contact "songle-ml@aist.go.jp". 13 | */ 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Songle Widget API Examples 2 | 3 | ## About Songle Widget 4 | 5 | [Songle Widget][widget] is an externally embedded player dedicated to the "[Songle][songle]" web service for active music listening. You can embed a [Songle Widget][widget] in your webpage or blog. If you are a programmer, you will be able to develop a music-synchronized application with the [Songle Widget][widget]. 6 | 7 | これは、[能動的音楽鑑賞サービスSongle（ソングル）][songle]をあなたのウェブページで簡単に利用することができる[Songle外部埋め込みプレーヤ][widget]です。あなたにプログラミングの知識があれば、音楽理解技術により解析された音楽地図を利用した、アプリケーションを開発することもできます。 8 | 9 | ## Documents 10 | 11 | * English 12 | * https://widget.songle.jp/docs/v1?lang=en 13 | * 日本語 14 | * https://widget.songle.jp/docs/v1?lang=ja 15 | 16 | [songle]:https://songle.jp 17 | [widget]:https://widget.songle.jp 18 | -------------------------------------------------------------------------------- /extras/src/sw-extra-helloworld.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | @author Takahiro INOUE 3 | @license Songle Widget API Examples 4 | 5 | Visit http://songle.jp/info/Credit.html OR http://widget.songle.jp/docs/v1 for documentation. 6 | Copyright (c) 2015 National Institute of Advanced Industrial Science and Technology (AIST) 7 | 8 | Distributed under the terms of the MIT license only for non-commercial purposes. 9 | http://www.opensource.org/licenses/mit-license.html 10 | 11 | This notice shall be included in all copies or substantial portions of this Songle Widget API Examples. 12 | If you are interested in commercial use of Songle Widget API, please contact "songle-ml@aist.go.jp". 13 | ### 14 | __swExtra__.initializeAllModule 15 | onReady: 16 | (songleWidget) -> 17 | alert("Hello,Songle Widget!!") 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 National Institute of Advanced Industrial Science and Technology (AIST) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /extras/bin/make.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | coffee -c -p ./src/shared-module.coffee > shared-module1.tmp.js 3 | coffee -c -p ./src/sw-extra-chorus-player.coffee > sw-extra-chorus-player1.tmp.js 4 | coffee -c -p ./src/sw-extra-helloworld.coffee > sw-extra-helloworld1.tmp.js 5 | coffee -c -p ./src/sw-extra-stats.coffee > sw-extra-stats1.tmp.js 6 | coffee -c -p ./src/sw-extra-visualizer.coffee > sw-extra-visualizer1.tmp.js 7 | cat shared-module1.tmp.js sw-extra-chorus-player1.tmp.js > sw-extra-chorus-player2.tmp.js 8 | cat shared-module1.tmp.js sw-extra-helloworld1.tmp.js > sw-extra-helloworld2.tmp.js 9 | cat shared-module1.tmp.js sw-extra-stats1.tmp.js > sw-extra-stats2.tmp.js 10 | cat shared-module1.tmp.js sw-extra-visualizer1.tmp.js > sw-extra-visualizer2.tmp.js 11 | yuicompressor sw-extra-chorus-player2.tmp.js > sw-extra-chorus-player3.tmp.js 12 | yuicompressor sw-extra-helloworld2.tmp.js > sw-extra-helloworld3.tmp.js 13 | yuicompressor sw-extra-stats2.tmp.js > sw-extra-stats3.tmp.js 14 | yuicompressor sw-extra-visualizer2.tmp.js > sw-extra-visualizer3.tmp.js 15 | cat ./bin/LICENSE sw-extra-chorus-player3.tmp.js > sw-extra-chorus-player.js 16 | cat ./bin/LICENSE sw-extra-helloworld3.tmp.js > sw-extra-helloworld.js 17 | cat ./bin/LICENSE sw-extra-stats3.tmp.js > sw-extra-stats.js 18 | cat ./bin/LICENSE sw-extra-visualizer3.tmp.js > sw-extra-visualizer.js 19 | rm *.tmp.js 20 | -------------------------------------------------------------------------------- /extras/sw-extra-helloworld.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Takahiro INOUE 3 | * @license Songle Widget API Examples 4 | * 5 | * Visit http://songle.jp/info/Credit.html OR http://widget.songle.jp/docs/v1 for documentation. 6 | * Copyright (c) 2015 National Institute of Advanced Industrial Science and Technology (AIST) 7 | * 8 | * Distributed under the terms of the MIT license only for non-commercial purposes. 9 | * http://www.opensource.org/licenses/mit-license.html 10 | * 11 | * This notice shall be included in all copies or substantial portions of this Songle Widget API Examples. 12 | * If you are interested in commercial use of Songle Widget API, please contact "songle-ml@aist.go.jp". 13 | */ 14 | (function(){if(window.__swExtra__==null){window.__swExtra__={}}__swExtra__.initializeAllModule=function(a){if(__swExtra__.modules==null){__swExtra__.modules=[]}__swExtra__.modules.push(a);window.onSongleWidgetCreate=function(c,b){return __swExtra__.initializeCreateModule(b)};window.onSongleWidgetError=function(c,b){return __swExtra__.initializeErrorModule(b)};return window.onSongleWidgetReady=function(c,b){return __swExtra__.initializeReadyModule(b)}};__swExtra__.initializeCreateModule=function(b,c){var f,a,e,g,d;if(c==null){c={}}if(c.force==null){c.force=false}g=__swExtra__.modules;d=[];for(f=0,a=g.length;f 3 | @license Songle Widget API Examples 4 | 5 | Visit http://songle.jp/info/Credit.html OR http://widget.songle.jp/docs/v1 for documentation. 6 | Copyright (c) 2015 National Institute of Advanced Industrial Science and Technology (AIST) 7 | 8 | Distributed under the terms of the MIT license only for non-commercial purposes. 9 | http://www.opensource.org/licenses/mit-license.html 10 | 11 | This notice shall be included in all copies or substantial portions of this Songle Widget API Examples. 12 | If you are interested in commercial use of Songle Widget API, please contact "songle-ml@aist.go.jp". 13 | ### 14 | window.__swExtra__ ?= {} 15 | 16 | ### 17 | @function 18 | ### 19 | __swExtra__.initializeAllModule = 20 | (module) -> 21 | __swExtra__.modules ?= [] 22 | __swExtra__.modules.push(module) 23 | 24 | window.onSongleWidgetCreate = 25 | (apiKey, songleWidget) -> 26 | __swExtra__.initializeCreateModule(songleWidget) 27 | 28 | window.onSongleWidgetError = 29 | (apiKey, songleWidget) -> 30 | __swExtra__.initializeErrorModule(songleWidget) 31 | 32 | window.onSongleWidgetReady = 33 | (apiKey, songleWidget) -> 34 | __swExtra__.initializeReadyModule(songleWidget) 35 | 36 | ### 37 | @function 38 | ### 39 | __swExtra__.initializeCreateModule = 40 | (songleWidget, options = {}) -> 41 | options.force ?= false 42 | 43 | for module in __swExtra__.modules 44 | if !module.__wasCreated__ || options.force 45 | module.onCreate && 46 | module.onCreate(songleWidget) 47 | 48 | module.__wasCreated__ = true 49 | 50 | ### 51 | @function 52 | ### 53 | __swExtra__.initializeErrorModule = 54 | (songleWidget, options = {}) -> 55 | options.force ?= false 56 | 57 | for module in __swExtra__.modules 58 | if !module.__wasErrored__ || options.force 59 | module.onError && 60 | module.onError(songleWidget) 61 | 62 | module.__wasErrored__ = true 63 | 64 | ### 65 | @function 66 | ### 67 | __swExtra__.initializeReadyModule = 68 | (songleWidget, options = {}) -> 69 | options.force ?= false 70 | 71 | for module in __swExtra__.modules 72 | if !module.__wasReadied__ || options.force 73 | module.onReady && 74 | module.onReady(songleWidget) 75 | 76 | module.__wasReadied__ = true 77 | 78 | ### 79 | @function 80 | ### 81 | __swExtra__.random = 82 | (min, max) -> 83 | min ?= 0x00000000 84 | max ?= 0x7fffffff 85 | 86 | return Math.floor(Math.random() * ((max - min) + 1) + min) 87 | -------------------------------------------------------------------------------- /1-1-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Songle Widget API Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 36 |
37 |
38 |
39 | 40 | 53 |
54 | 55 | 56 |
57 |
58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /1-1-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Songle Widget API Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 36 |
37 |
38 |
39 | 40 | 53 |
54 | 55 | 62 | 63 |
64 |
65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /extras/sw-extra-chorus-player.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Songle Widget API Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 34 |
35 |
36 |
37 | 38 | 51 | 52 | 53 | 54 | 55 | 56 | 70 | 71 |
72 |
73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /extras/sw-extra-stats.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Songle Widget API Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 34 |
35 |
36 |
37 | 38 | 51 | 52 | 53 | 54 | 69 | 70 |
71 |
72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /extras/sw-extra-visualizer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Songle Widget API Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 34 |
35 |
36 |
37 | 38 | 51 | 52 | 53 | 54 | 69 |
70 |
71 |
72 | 73 | 74 | -------------------------------------------------------------------------------- /extras/sw-extra-helloworld.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Songle Widget API Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 34 |
35 |
36 |
37 | 38 | 51 | 52 | 53 | 54 | 69 | 70 |
71 |
72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /1-1-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Songle Widget API Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 36 |
37 |
38 |
39 | 40 | 53 | 54 | 69 | 70 |
71 |
72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /1-1-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Songle Widget API Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 36 |
37 |
38 |
39 | 40 | 53 |
54 | 55 | 89 | 90 |
91 |
92 |
93 | 94 | 95 | -------------------------------------------------------------------------------- /extras/sw-extra-chorus-player.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Takahiro INOUE 3 | * @license Songle Widget API Examples 4 | * 5 | * Visit http://songle.jp/info/Credit.html OR http://widget.songle.jp/docs/v1 for documentation. 6 | * Copyright (c) 2015 National Institute of Advanced Industrial Science and Technology (AIST) 7 | * 8 | * Distributed under the terms of the MIT license only for non-commercial purposes. 9 | * http://www.opensource.org/licenses/mit-license.html 10 | * 11 | * This notice shall be included in all copies or substantial portions of this Songle Widget API Examples. 12 | * If you are interested in commercial use of Songle Widget API, please contact "songle-ml@aist.go.jp". 13 | */ 14 | (function(){if(window.__swExtra__==null){window.__swExtra__={}}__swExtra__.initializeAllModule=function(a){if(__swExtra__.modules==null){__swExtra__.modules=[]}__swExtra__.modules.push(a);window.onSongleWidgetCreate=function(c,b){return __swExtra__.initializeCreateModule(b)};window.onSongleWidgetError=function(c,b){return __swExtra__.initializeErrorModule(b)};return window.onSongleWidgetReady=function(c,b){return __swExtra__.initializeReadyModule(b)}};__swExtra__.initializeCreateModule=function(b,c){var f,a,e,g,d;if(c==null){c={}}if(c.force==null){c.force=false}g=__swExtra__.modules;d=[];for(f=0,a=g.length;f 3 | @license Songle Widget API Examples 4 | 5 | Visit http://songle.jp/info/Credit.html OR http://widget.songle.jp/docs/v1 for documentation. 6 | Copyright (c) 2015 National Institute of Advanced Industrial Science and Technology (AIST) 7 | 8 | Distributed under the terms of the MIT license only for non-commercial purposes. 9 | http://www.opensource.org/licenses/mit-license.html 10 | 11 | This notice shall be included in all copies or substantial portions of this Songle Widget API Examples. 12 | If you are interested in commercial use of Songle Widget API, please contact "songle-ml@aist.go.jp". 13 | ### 14 | window.__swExtra__ ?= {} 15 | 16 | ### 17 | @function 18 | @see https://developers.google.com/youtube/v3/docs/search/list 19 | ### 20 | __swExtra__.searchYouTube = 21 | (options = {}) -> 22 | options.key ?= "AIzaSyBA9OMeI6z4ByZZf8v4H3xFxXJ893BAkiE" 23 | options.maxResults ?= "50" 24 | options.pageToken ?= "" 25 | options.part ?= "id" 26 | options.q ?= "AIST VocaListener" 27 | options.regionCode ?= "JP" 28 | options.type ?= "video" 29 | options.videoCategoryId ?= "10" 30 | options.videoDuration ?= "short" 31 | options.videoEmbeddable ?= "true" 32 | 33 | xhrRequest = 34 | $.getJSON "https://www.googleapis.com/youtube/v3/search?" + 35 | "key" + "=" + encodeURIComponent(options.key) + "&" + 36 | "maxResults" + "=" + encodeURIComponent(options.maxResults) + "&" + 37 | "pageToken" + "=" + encodeURIComponent(options.pageToken) + "&" + 38 | "part" + "=" + encodeURIComponent(options.part) + "&" + 39 | "q" + "=" + encodeURIComponent(options.q) + "&" + 40 | "regionCode" + "=" + encodeURIComponent(options.regionCode) + "&" + 41 | "type" + "=" + encodeURIComponent(options.type) + "&" + 42 | "videoCategoryId" + "=" + encodeURIComponent(options.videoCategoryId) + "&" + 43 | "videoDuration" + "=" + encodeURIComponent(options.videoDuration) + "&" + 44 | "videoEmbeddable" + "=" + encodeURIComponent(options.videoEmbeddable) 45 | 46 | xhrRequest.done (result) -> 47 | options.pageToken = result.prevPageToken 48 | options.pageToken = result.nextPageToken 49 | 50 | for item in result.items 51 | options.__urls__ ?= [] 52 | options.__urls__.push("https://www.youtube.com/watch?v=#{ item.id.videoId }") 53 | 54 | if(options.pageToken) 55 | __swExtra__.searchYouTube(options) 56 | else 57 | options.onComplete && 58 | options.onComplete(options.__urls__) 59 | 60 | ### 61 | @function 62 | ### 63 | __swExtra__.startPlaylistFromRepeatSegment = 64 | (urls) -> 65 | url = urls.shift() 66 | 67 | songleWidgetElement = 68 | SongleWidgetAPI.createSongleWidgetElement 69 | api: "songle-widget-api-example#{ __swExtra__.random() }" 70 | url: url 71 | songAutoPlay: true 72 | songAutoLoop: true 73 | songStartAt: "chorus" 74 | onReady: 75 | (songleWidget) -> 76 | __swExtra__.initializeReadyModule songleWidget, 77 | force: true 78 | 79 | chorusSegment = songleWidget.song.scene.repeatSegments[ 0 ] || { duration: SongleWidgetAPI.secondsToMilliseconds(30) } 80 | repeatSegment = songleWidget.song.scene.repeatSegments[ 1 ] || { duration: SongleWidgetAPI.secondsToMilliseconds(30) } 81 | 82 | if chorusSegment.duration < repeatSegment.duration 83 | setTimeout -> 84 | songleWidget.remove() 85 | , chorusSegment.duration 86 | else 87 | setTimeout -> 88 | songleWidget.remove() 89 | , repeatSegment.duration 90 | 91 | songleWidget.on "remove", 92 | -> 93 | __swExtra__.startPlaylistFromRepeatSegment(urls) 94 | 95 | songleWidget.on "finish", 96 | -> 97 | songleWidget.remove() 98 | 99 | document.body.appendChild(songleWidgetElement) 100 | -------------------------------------------------------------------------------- /extras/sw-extra-stats.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Takahiro INOUE 3 | * @license Songle Widget API Examples 4 | * 5 | * Visit http://songle.jp/info/Credit.html OR http://widget.songle.jp/docs/v1 for documentation. 6 | * Copyright (c) 2015 National Institute of Advanced Industrial Science and Technology (AIST) 7 | * 8 | * Distributed under the terms of the MIT license only for non-commercial purposes. 9 | * http://www.opensource.org/licenses/mit-license.html 10 | * 11 | * This notice shall be included in all copies or substantial portions of this Songle Widget API Examples. 12 | * If you are interested in commercial use of Songle Widget API, please contact "songle-ml@aist.go.jp". 13 | */ 14 | (function(){if(window.__swExtra__==null){window.__swExtra__={}}__swExtra__.initializeAllModule=function(a){if(__swExtra__.modules==null){__swExtra__.modules=[]}__swExtra__.modules.push(a);window.onSongleWidgetCreate=function(c,b){return __swExtra__.initializeCreateModule(b)};window.onSongleWidgetError=function(c,b){return __swExtra__.initializeErrorModule(b)};return window.onSongleWidgetReady=function(c,b){return __swExtra__.initializeReadyModule(b)}};__swExtra__.initializeCreateModule=function(b,c){var f,a,e,g,d;if(c==null){c={}}if(c.force==null){c.force=false}g=__swExtra__.modules;d=[];for(f=0,a=g.length;f 3 | * @license Songle Widget API Examples 4 | * 5 | * Visit http://songle.jp/info/Credit.html OR http://widget.songle.jp/docs/v1 for documentation. 6 | * Copyright (c) 2015 National Institute of Advanced Industrial Science and Technology (AIST) 7 | * 8 | * Distributed under the terms of the MIT license only for non-commercial purposes. 9 | * http://www.opensource.org/licenses/mit-license.html 10 | * 11 | * This notice shall be included in all copies or substantial portions of this Songle Widget API Examples. 12 | * If you are interested in commercial use of Songle Widget API, please contact "songle-ml@aist.go.jp". 13 | */ 14 | (function(){if(window.__swExtra__==null){window.__swExtra__={}}__swExtra__.initializeAllModule=function(a){if(__swExtra__.modules==null){__swExtra__.modules=[]}__swExtra__.modules.push(a);window.onSongleWidgetCreate=function(c,b){return __swExtra__.initializeCreateModule(b)};window.onSongleWidgetError=function(c,b){return __swExtra__.initializeErrorModule(b)};return window.onSongleWidgetReady=function(c,b){return __swExtra__.initializeReadyModule(b)}};__swExtra__.initializeCreateModule=function(b,c){var f,a,e,g,d;if(c==null){c={}}if(c.force==null){c.force=false}g=__swExtra__.modules;d=[];for(f=0,a=g.length;f=2){return a(c)}},false);document.body.appendChild(e);b=document.createElement("script");b.async=false;b.defer=false;b.src="https://code.createjs.com/tweenjs-0.6.1.min.js";b.type="text/javascript";b.addEventListener("load",function(){++d;if(d>=2){return a(c)}},false);return document.body.appendChild(b)}else{return a(c)}}});a=function(j){var e,q,p,k,i,n,b,m,h,g,f,r,l,s,d,o,c;c=document.querySelector("[class*=sw-extra-visualizer");setTimeout(function(){var t,u;u=document.createElement("canvas");u.className="sw-extra-visualizer";u.width=m();u.height=b();u.style.position="absolute";u.style.left=0+"px";u.style.top=0+"px";u.style.zIndex=-1;if(!c){document.body.appendChild(u)}else{c.appendChild(u)}addEventListener("scroll",function(){if(!c){u.style.top=window.scrollY+"px"}u.width=m();return u.height=b()},false);addEventListener("resize",function(){if(!c){u.style.top=window.scrollY+"px"}u.width=m();return u.height=b()},false);t=new createjs.Stage(u);createjs.Ticker.addEventListener("tick",function(v){return t.update(v)});createjs.Ticker.setFPS(60);j.on("beatPlay",function(v){if(v.beat.position===1){switch(__swExtra__.random(q,e)){case 1:return s(t);case 2:return l(t);case 3:return h(t);case 4:return g(t);case 5:return f(t)}}});j.on("chordPlay",function(A){var x,y,C,v,B,w,z;B=A.chord.prev;y=A.chord;if(B){x=B.name.match(/^([A-G#]{1,2})/)||[];z=x[1]||"N"}else{z="N"}w=p[z];if(y){x=y.name.match(/^([A-G#]{1,2})/)||[];v=x[1]||"N"}else{v="N"}C=p[v];return createjs.Tween.get(w).to(C,250).addEventListener("change",function(E){var D;D=E.target.target;D.r=Math.floor(D.r);D.g=Math.floor(D.g);D.b=Math.floor(D.b);return u.style.backgroundColor="rgb("+D.r+","+D.g+","+D.b+")"})});j.on("chorusSegmentEnter",function(v){return d(t,{color:k,direction:"L"})});j.on("repeatSegmentEnter",function(v){return d(t,{color:i,direction:"R"})});j.on("play",function(){return o(t)});j.on("seek",function(){return o(t)});return j.on("finish",function(){return o(t)})},0);q=1;e=5;n="#e17";p={A:{r:204,g:204,b:238},"A#":{r:204,g:204,b:255},B:{r:204,g:238,b:204},C:{r:204,g:238,b:238},"C#":{r:204,g:255,b:255},D:{r:238,g:204,b:204},"D#":{r:255,g:204,b:204},E:{r:238,g:204,b:238},F:{r:238,g:238,b:204},"F#":{r:255,g:255,b:204},G:{r:238,g:238,b:238},"G#":{r:255,g:255,b:255},N:{r:255,g:255,b:255}};k="#f84";i="#48f";m=function(){if(c){return c.clientWidth}else{return window.innerWidth}};b=function(){if(c){return c.clientHeight}else{return window.innerHeight}};r=function(u,t){var v;if(t==null){t={}}if(t.r==null){t.r=0}if(t.vertexCount==null){t.vertexCount=0}v=new createjs.Shape;v.graphics.beginStroke(n).drawPolyStar(0,0,20,t.vertexCount,t.r,__swExtra__.random(0,360));v.x=__swExtra__.random(0,m());v.y=__swExtra__.random(0,b());createjs.Tween.get(v).to({alpha:0,scaleX:20,scaleY:20},2000);return u.addChild(v)};s=function(t){return r(t,{vertexCount:3})};l=function(t){return r(t,{vertexCount:4})};h=function(t){return r(t,{r:0.2,vertexCount:5})};g=function(t){return r(t,{r:0.2,vertexCount:7})};f=function(t){return r(t,{vertexCount:100})};d=function(v,u){var x,t,w;if(u==null){u={}}if(u.color==null){u.color=n}if(u.direction==null){u.direction="L"}w=[];for(t=x=0;x<10;t=++x){w.push((function(y){var z;z=new createjs.Shape;z.graphics.beginStroke(u.color).drawCircle(0,0,20);switch(u.direction){case"L":z.x=m()/10*y;z.y=b()/2;break;case"R":z.x=m()/10*(10-y);z.y=b()/2}return setTimeout(function(){createjs.Tween.get(z).to({alpha:0,scaleX:20,scaleY:20},2000);return v.addChild(z)},200*y)})(t))}return w};return o=function(t){return t.removeAllChildren()}}}).call(this); -------------------------------------------------------------------------------- /extras/src/sw-extra-stats.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | @author Takahiro INOUE 3 | @license Songle Widget API Examples 4 | 5 | Visit http://songle.jp/info/Credit.html OR http://widget.songle.jp/docs/v1 for documentation. 6 | Copyright (c) 2015 National Institute of Advanced Industrial Science and Technology (AIST) 7 | 8 | Distributed under the terms of the MIT license only for non-commercial purposes. 9 | http://www.opensource.org/licenses/mit-license.html 10 | 11 | This notice shall be included in all copies or substantial portions of this Songle Widget API Examples. 12 | If you are interested in commercial use of Songle Widget API, please contact "songle-ml@aist.go.jp". 13 | ### 14 | __swExtra__.initializeAllModule 15 | onCreate: 16 | (songleWidget) -> 17 | setTimeout -> 18 | rootElement = document.createElement("div") 19 | rootElement.className = "sw-extra-stats" 20 | 21 | rootElement.style.position = "fixed" 22 | rootElement.style.color = "rgb(64, 64, 64)" 23 | rootElement.style.fontFamily = "'consolas', 'Courier New', 'Courier', 'Monaco', 'monospace'" 24 | rootElement.style.fontSize = 11.5 + "px" 25 | rootElement.style.left = 10 + "px" 26 | rootElement.style.bottom = 10 + "px" 27 | 28 | rootElement.appendChild( 29 | createStatElement "playing-time", "Playing time", 30 | (rootElement) -> 31 | childElement = document.createElement("span") 32 | childElement.className = "position" 33 | childElement.textContent = "00:00" 34 | 35 | rootElement.appendChild(childElement) 36 | 37 | childElement = document.createElement("span") 38 | childElement.textContent = "/" 39 | 40 | rootElement.appendChild(childElement) 41 | 42 | childElement = document.createElement("span") 43 | childElement.className = "duration" 44 | childElement.textContent = "00:00" 45 | 46 | rootElement.appendChild(childElement) 47 | ) 48 | 49 | rootElement.appendChild( 50 | createStatElement "beat", "Beat", 51 | (rootElement) -> 52 | rootElement.appendChild(document.createTextNode("-")) 53 | ) 54 | 55 | rootElement.appendChild( 56 | createStatElement "chord", "Chord", 57 | (rootElement) -> 58 | rootElement.appendChild(document.createTextNode("-")) 59 | ) 60 | 61 | rootElement.appendChild( 62 | createStatElement "note", "Note", 63 | (rootElement) -> 64 | rootElement.appendChild(document.createTextNode("-")) 65 | ) 66 | 67 | rootElement.appendChild( 68 | createStatElement "chorus", "Chorus segment", 69 | (rootElement) -> 70 | rootElement.appendChild(document.createTextNode("-")) 71 | ) 72 | 73 | rootElement.appendChild( 74 | createStatElement "repeat", "Repeat segment", 75 | (rootElement) -> 76 | rootElement.appendChild(document.createTextNode("-")) 77 | ) 78 | 79 | document.body.appendChild(rootElement) 80 | , 0 # [ms] 81 | 82 | ### 83 | @function 84 | @private 85 | ### 86 | createStatElement = 87 | (className, statTitle, onCreate) -> 88 | rootElement = document.createElement("div") 89 | 90 | childElement = document.createElement("div") 91 | childElement.appendChild(document.createTextNode(statTitle)) 92 | 93 | childElement.style.padding = "0px 4px" 94 | childElement.style.borderLeft = "2px solid #e17" 95 | 96 | rootElement.appendChild(childElement) 97 | 98 | childElement = document.createElement("div") 99 | childElement.className = className 100 | 101 | childElement.style.padding = "0px 4px" 102 | childElement.style.borderLeft = "0px solid #e17" 103 | 104 | rootElement.appendChild(childElement) 105 | 106 | onCreate && 107 | onCreate(childElement) 108 | 109 | return rootElement 110 | onReady: 111 | (songleWidget) -> 112 | songleWidget.on "beatPlay", 113 | (e) -> 114 | rootElement = document.querySelector(".sw-extra-stats .beat") 115 | 116 | switch(e.beat.position) 117 | when 1 118 | rootElement.textContent = "x - - - (bpm:" + Math.floor(e.beat.bpm) + ")" 119 | when 2 120 | rootElement.textContent = "- x - - (bpm:" + Math.floor(e.beat.bpm) + ")" 121 | when 3 122 | rootElement.textContent = "- - x - (bpm:" + Math.floor(e.beat.bpm) + ")" 123 | when 4 124 | rootElement.textContent = "- - - x (bpm:" + Math.floor(e.beat.bpm) + ")" 125 | 126 | songleWidget.on "chordEnter", 127 | (e) -> 128 | rootElement = document.querySelector(".sw-extra-stats .chord") 129 | 130 | rootElement.textContent = e.chord.name 131 | 132 | songleWidget.on "noteEnter", 133 | (e) -> 134 | rootElement = document.querySelector(".sw-extra-stats .note") 135 | 136 | rootElement.textContent = "#{ e.note.pitch } Hz" 137 | 138 | songleWidget.on "chorusSegmentEnter", 139 | (e) -> 140 | rootElement = document.querySelector(".sw-extra-stats .chorus") 141 | 142 | rootElement.textContent = "o" 143 | 144 | songleWidget.on "chorusSegmentLeave", 145 | (e) -> 146 | rootElement = document.querySelector(".sw-extra-stats .chorus") 147 | 148 | rootElement.textContent = "-" 149 | 150 | songleWidget.on "repeatSegmentEnter", 151 | (e) -> 152 | rootElement = document.querySelector(".sw-extra-stats .repeat") 153 | 154 | rootElement.textContent = "o" 155 | 156 | songleWidget.on "repeatSegmentLeave", 157 | (e) -> 158 | rootElement = document.querySelector(".sw-extra-stats .repeat") 159 | 160 | rootElement.textContent = "-" 161 | 162 | songleWidget.on "playingProgress", 163 | (e) -> 164 | rootElement = document.querySelector(".sw-extra-stats .playing-time") 165 | 166 | childElementElement = rootElement.querySelector(".duration") 167 | childElementElement.textContent = createPlayingTimeText(songleWidget.duration) 168 | 169 | songleWidget.on "playingProgress", 170 | (e) -> 171 | rootElement = document.querySelector(".sw-extra-stats .playing-time") 172 | 173 | childElementElement = rootElement.querySelector(".position") 174 | childElementElement.textContent = createPlayingTimeText(songleWidget.position) 175 | 176 | ### 177 | @function 178 | @private 179 | ### 180 | createPlayingTimeText = 181 | (songleWidgetPlayingTime) -> 182 | minutes = "00" + Math.floor(songleWidgetPlayingTime.minutes) % 60 183 | seconds = "00" + Math.floor(songleWidgetPlayingTime.seconds) % 60 184 | 185 | return minutes.substr(minutes.length - 2) + ":" + seconds.substr(seconds.length - 2) 186 | -------------------------------------------------------------------------------- /extras/src/sw-extra-visualizer.coffee: -------------------------------------------------------------------------------- 1 | ### 2 | @author Takahiro INOUE 3 | @license Songle Widget API Examples 4 | 5 | Visit http://songle.jp/info/Credit.html OR http://widget.songle.jp/docs/v1 for documentation. 6 | Copyright (c) 2015 National Institute of Advanced Industrial Science and Technology (AIST) 7 | 8 | Distributed under the terms of the MIT license only for non-commercial purposes. 9 | http://www.opensource.org/licenses/mit-license.html 10 | 11 | This notice shall be included in all copies or substantial portions of this Songle Widget API Examples. 12 | If you are interested in commercial use of Songle Widget API, please contact "songle-ml@aist.go.jp". 13 | ### 14 | __swExtra__.initializeAllModule 15 | onReady: 16 | (songleWidget) -> 17 | if !window.createjs 18 | progress = 0 19 | 20 | # Require thread party library. Please see "https://code.createjs.com/easeljs". 21 | easelElement = document.createElement("script") 22 | easelElement.async = false 23 | easelElement.defer = false 24 | easelElement.src = "https://code.createjs.com/easeljs-0.8.1.min.js" 25 | easelElement.type = "text/javascript" 26 | 27 | easelElement.addEventListener "load", 28 | -> 29 | ++ progress 30 | 31 | if progress >= 2 32 | readySongleWidget(songleWidget) 33 | , false 34 | 35 | document.body.appendChild(easelElement) 36 | 37 | # Require thread party library. Please see "https://code.createjs.com/tweenjs". 38 | tweenElement = document.createElement("script") 39 | tweenElement.async = false 40 | tweenElement.defer = false 41 | tweenElement.src = "https://code.createjs.com/tweenjs-0.6.1.min.js" 42 | tweenElement.type = "text/javascript" 43 | 44 | tweenElement.addEventListener "load", 45 | -> 46 | ++ progress 47 | 48 | if progress >= 2 49 | readySongleWidget(songleWidget) 50 | , false 51 | 52 | document.body.appendChild(tweenElement) 53 | else 54 | readySongleWidget(songleWidget) 55 | 56 | ### 57 | @function 58 | @private 59 | ### 60 | readySongleWidget = 61 | (songleWidget) -> 62 | rootElement = document.querySelector("[class*=sw-extra-visualizer") 63 | 64 | setTimeout -> 65 | # ---- Intiailize EaselJs and TweenJs. 66 | stageElement = document.createElement("canvas") 67 | stageElement.className = "sw-extra-visualizer" 68 | stageElement.width = getScreenSizeW() 69 | stageElement.height = getScreenSizeH() 70 | 71 | stageElement.style.position = "absolute" 72 | stageElement.style.left = 0 + "px" 73 | stageElement.style.top = 0 + "px" 74 | stageElement.style.zIndex = -1 75 | 76 | if !rootElement then document.body.appendChild(stageElement) else rootElement.appendChild(stageElement) 77 | 78 | addEventListener "scroll", 79 | -> 80 | if !rootElement 81 | stageElement.style.top = window.scrollY + "px" 82 | 83 | stageElement.width = getScreenSizeW() 84 | stageElement.height = getScreenSizeH() 85 | , false 86 | 87 | addEventListener "resize", 88 | -> 89 | if !rootElement 90 | stageElement.style.top = window.scrollY + "px" 91 | 92 | stageElement.width = getScreenSizeW() 93 | stageElement.height = getScreenSizeH() 94 | , false 95 | 96 | stage = new createjs.Stage(stageElement) 97 | 98 | createjs.Ticker.addEventListener "tick", 99 | (e) -> 100 | stage.update(e) 101 | 102 | createjs.Ticker.setFPS(60) 103 | # ---- 104 | 105 | # ---- If you comment out, you can disable visualizer for beat. 106 | songleWidget.on "beatPlay", 107 | (e) -> 108 | if e.beat.position == 1 109 | switch __swExtra__.random(MIN_TRAP_ID, MAX_TRAP_ID) 110 | when 1 111 | invokeTriangleTrap(stage) 112 | when 2 113 | invokeSquareTrap(stage) 114 | when 3 115 | invoke5StarTrap(stage) 116 | when 4 117 | invoke7StarTrap(stage) 118 | when 5 119 | invokeCircleTrap(stage) 120 | # ---- 121 | 122 | # ---- If you comment out, you can disable visualizer for chord. 123 | songleWidget.on "chordPlay", 124 | (e) -> 125 | prevChord = e.chord.prev 126 | nextChord = e.chord 127 | 128 | if prevChord 129 | matchedChordName = prevChord.name.match(/^([A-G#]{1,2})/) || [] 130 | prevChordName = matchedChordName[ 1 ] || "N" 131 | else 132 | prevChordName = "N" 133 | 134 | prevChordColor = SONGLE_CHORD_COLOR_LIST[ prevChordName ] 135 | 136 | if nextChord 137 | matchedChordName = nextChord.name.match(/^([A-G#]{1,2})/) || [] 138 | nextChordName = matchedChordName[ 1 ] || "N" 139 | else 140 | nextChordName = "N" 141 | 142 | nextChordColor = SONGLE_CHORD_COLOR_LIST[ nextChordName ] 143 | 144 | createjs.Tween.get(prevChordColor) 145 | .to(nextChordColor, 250) 146 | .addEventListener "change", 147 | (e) -> 148 | backgroundColor = e.target.target 149 | backgroundColor.r = Math.floor(backgroundColor.r) 150 | backgroundColor.g = Math.floor(backgroundColor.g) 151 | backgroundColor.b = Math.floor(backgroundColor.b) 152 | 153 | stageElement.style.backgroundColor = 154 | "rgb(" + 155 | backgroundColor.r + "," + 156 | backgroundColor.g + "," + 157 | backgroundColor.b + 158 | ")" 159 | # ---- 160 | 161 | # ---- If you comment out, you can disable visualizer for chorus. 162 | songleWidget.on "chorusSegmentEnter", 163 | (e) -> 164 | invokeWaveTrap stage, 165 | color: SONGLE_CHORUS_SEGMENT_COLOR 166 | direction: "L" 167 | # ---- 168 | 169 | # ---- If you comment out, you can disable visualizer for repeat. 170 | songleWidget.on "repeatSegmentEnter", 171 | (e) -> 172 | invokeWaveTrap stage, 173 | color: SONGLE_REPEAT_SEGMENT_COLOR 174 | direction: "R" 175 | # ---- 176 | 177 | songleWidget.on "play", 178 | -> 179 | resetState(stage) 180 | 181 | songleWidget.on "seek", 182 | -> 183 | resetState(stage) 184 | 185 | songleWidget.on "finish", 186 | -> 187 | resetState(stage) 188 | , 0 # [ms] 189 | 190 | ### 191 | @constant 192 | @private 193 | ### 194 | MIN_TRAP_ID = 1 195 | 196 | ### 197 | @constant 198 | @private 199 | ### 200 | MAX_TRAP_ID = 5 201 | 202 | ### 203 | @constant 204 | @private 205 | ### 206 | SONGLE_THEME_COLOR = "#e17" 207 | 208 | ### 209 | @constant 210 | @private 211 | ### 212 | SONGLE_CHORD_COLOR_LIST = 213 | "A": 214 | r: 0xcc 215 | g: 0xcc 216 | b: 0xee 217 | "A#": 218 | r: 0xcc 219 | g: 0xcc 220 | b: 0xff 221 | "B": 222 | r: 0xcc 223 | g: 0xee 224 | b: 0xcc 225 | "C": 226 | r: 0xcc 227 | g: 0xee 228 | b: 0xee 229 | "C#": 230 | r: 0xcc 231 | g: 0xff 232 | b: 0xff 233 | "D": 234 | r: 0xee 235 | g: 0xcc 236 | b: 0xcc 237 | "D#": 238 | r: 0xff 239 | g: 0xcc 240 | b: 0xcc 241 | "E": 242 | r: 0xee 243 | g: 0xcc 244 | b: 0xee 245 | "F": 246 | r: 0xee 247 | g: 0xee 248 | b: 0xcc 249 | "F#": 250 | r: 0xff 251 | g: 0xff 252 | b: 0xcc 253 | "G": 254 | r: 0xee 255 | g: 0xee 256 | b: 0xee 257 | "G#": 258 | r: 0xff 259 | g: 0xff 260 | b: 0xff 261 | "N": 262 | r: 0xff 263 | g: 0xff 264 | b: 0xff 265 | 266 | ### 267 | @constant 268 | @private 269 | ### 270 | SONGLE_CHORUS_SEGMENT_COLOR = "#f84" 271 | 272 | ### 273 | @constant 274 | @private 275 | ### 276 | SONGLE_REPEAT_SEGMENT_COLOR = "#48f" 277 | 278 | ### 279 | @function 280 | @private 281 | ### 282 | getScreenSizeW = 283 | -> 284 | return if rootElement then rootElement.clientWidth else window.innerWidth 285 | 286 | 287 | ### 288 | @function 289 | @private 290 | ### 291 | getScreenSizeH = 292 | -> 293 | return if rootElement then rootElement.clientHeight else window.innerHeight 294 | 295 | ### 296 | @function 297 | @private 298 | ### 299 | invokeGeometryTrap = 300 | (stage, options = {}) -> 301 | options.r ?= 0 302 | options.vertexCount ?= 0 303 | 304 | geometry = new createjs.Shape 305 | geometry.graphics.beginStroke(SONGLE_THEME_COLOR).drawPolyStar(0, 0, 20, options.vertexCount, options.r, __swExtra__.random(0, 360)) 306 | 307 | geometry.x = __swExtra__.random(0, getScreenSizeW()) 308 | geometry.y = __swExtra__.random(0, getScreenSizeH()) 309 | 310 | createjs.Tween.get(geometry) 311 | .to 312 | alpha: 0 313 | scaleX: 20 314 | scaleY: 20 315 | , 2000 316 | 317 | stage.addChild(geometry) 318 | 319 | ### 320 | @function 321 | @private 322 | ### 323 | invokeTriangleTrap = 324 | (stage) -> 325 | invokeGeometryTrap stage, 326 | vertexCount: 3 327 | 328 | ### 329 | @function 330 | @private 331 | ### 332 | invokeSquareTrap = 333 | (stage) -> 334 | invokeGeometryTrap stage, 335 | vertexCount: 4 336 | 337 | ### 338 | @function 339 | @private 340 | ### 341 | invoke5StarTrap = 342 | (stage) -> 343 | invokeGeometryTrap stage, 344 | r: 0.20 345 | vertexCount: 5 346 | 347 | ### 348 | @function 349 | @private 350 | ### 351 | invoke7StarTrap = 352 | (stage) -> 353 | invokeGeometryTrap stage, 354 | r: 0.20 355 | vertexCount: 7 356 | 357 | ### 358 | @function 359 | @private 360 | ### 361 | invokeCircleTrap = 362 | (stage) -> 363 | invokeGeometryTrap stage, 364 | vertexCount: 100 365 | 366 | ### 367 | @function 368 | @private 369 | ### 370 | invokeWaveTrap = 371 | (stage, options = {}) -> 372 | options.color ?= SONGLE_THEME_COLOR 373 | options.direction ?= "L" 374 | 375 | for index in [0...10] 376 | ((index) -> 377 | circle = new createjs.Shape 378 | circle.graphics.beginStroke(options.color).drawCircle(0, 0, 20) 379 | 380 | switch options.direction 381 | when "L" 382 | circle.x = getScreenSizeW() / 10 * index 383 | circle.y = getScreenSizeH() / 2 384 | when "R" 385 | circle.x = getScreenSizeW() / 10 * (10 - index) 386 | circle.y = getScreenSizeH() / 2 387 | 388 | setTimeout -> 389 | createjs.Tween.get(circle) 390 | .to 391 | alpha: 0 392 | scaleX: 20 393 | scaleY: 20 394 | , 2000 395 | 396 | stage.addChild(circle) 397 | , 200 * index # [ms] 398 | )(index) 399 | 400 | ### 401 | @function 402 | @private 403 | ### 404 | resetState = 405 | (stage) -> 406 | stage.removeAllChildren() 407 | --------------------------------------------------------------------------------