1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <title>Touch Pianist - Tap in Rhythm and Perform Your Favourite Music</title> 6 <meta name="description" content="Touch Pianist is a musical toy / instrument that allows the user to perform hard-to-play classical piano music favorites (from composers like Beethoven, Mozart, Bach, Satie, Debussy to name a few) just by tapping the rhythm of the piece's particular sound events on a computer keyboard or a touch screen." /> 7 <meta name="author" content="Batuhan Bozkurt" /> 8 9 <link rel="image_src" href="/icon.jpg" /> 10 <meta property="og:title" content="Touch Pianist - Magical Piano App"> 11 <meta property="og:type" content="website"> 12 <meta property="og:url" content="http://touchpianist.com"> 13 <meta property="og:image" content="http://touchpianist.com/icon.jpg"> 14 <meta property="og:site_name" content="TouchPianist"> 15 <meta property="og:description" content="Touch Pianist is a musical toy / instrument that allows the user to perform hard-to-play classical piano music favorites (from composers like Beethoven, Mozart, Bach, Satie, Debussy to name a few) just by tapping the rhythm of the piece's particular sound events on a computer keyboard or a touch screen."> 16 17 <link rel="shortcut icon" href="/favicon.42ll.949f0768e72612ce.ico" type="image/x-icon"> 18 <link rel="icon" href="/favicon.42ll.949f0768e72612ce.ico" type="image/x-icon"> 19 20 <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Tangerine" rel='stylesheet' type='text/css'> 21 <link rel="stylesheet" href="css/stylelib.min.42ll.b93379f70e5eb011.css"> 22 23 <link rel="stylesheet" href="css/style.min.42ll.3c2b17ffaaf2506d.css"> 24 25 26 <!--[if IE]> 27
27<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
27 28 <![endif]--> 29</head> 30 31<body> 32 33 <div id="fb-root"></div> 34 35 <div id="text-overlay"> 36 37 </div> 38 39 <div id="non-canvas"> 40 <div class="pre-preload-container"> 41 <!-- <span class="glyphicon glyphicon-refresh gly-spin" id="pre-preload-spin"></span> --> 42 <span class="preload-text">Loading Touch Pianist...</span> 43 <span id="browser-notice">Chrome highly recommended.</span> 44 <div class="progress" id="init-progress-wrapper"> 45 <div id="init-progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> 46 </div> 47 </div> 48 </div> 49 </div> 50 51 <div id="site-overlay"> 52 <div id="social-badges"> 53 <div id="reddit-div"></div> 54 <div id="stumble-div"></div> 55 <div id="fb-div"></div> 56 <div id="tweetfollow-div"></div> 57 <div id="tweet-div"></div> 58 </div> 59 60 <div id="overlay-mainmenu-holder"> 61 <button type="button" class="btn btn-default center-block" onclick="rootApp.gui.switchToWindow('mainMenu');">Choose Different Piece</button> 62 </div> 63 64 <div id="overlay-bottom-ctl"> 65 <span class="fake-anchor" onclick="rootApp.gui.switchToWindow('about');">What is this?</span><span> / </span><span class="fake-anchor" onclick="rootApp.gui.switchToWindow('credits');">Who made it?</span><span> / </span><span class="fake-anchor" onclick="rootApp.gui.switchToWindow('troubleshooting');">Doesn't work well?</span><span> / </span><span class="fake-anchor"><a href="/presskit/index.html" target="_blank">Press Kit</a></span> 66 </div> 67 68 <div id="call-to-action"> 69 <p>More pieces.</p> 70 <p>Touch expression.</p> 71 <p>Free on Android and iOS.</p> 72 <p><span class="glyphicon glyphicon-arrow-down"></span></p> 73 </div> 74 <div id="googleplay-badge"> 75 <a href="https://play.google.com/store/apps/details?id=com.earslap.touchpianistapp"> 76 <img alt="Android app on Google Play" 77 src="https://developer.android.com/images/brand/en_app_rgb_wo_60.png" /> 78 </a> 79 </div> 80 <div id="appstore-badge"> 81 <a target="_blank" href="https://itunes.apple.com/us/app/touch-pianist-tap-in-rhythm/id958676734?ls=1&mt=8"><img id="appstore-badge-svg" src="res/appstore.42ll.d0558d9106303823.svg" alt="Download on the AppStore"></a> 82 </div> 83 </div> 84 85
85<script id='ra_windows_template' type='text/ractive'> 86 {{#if currentWindow == "preload"}} 87 {{>ra_loading_init_template}} 88 {{/if}} 89 90 91 <div class="main-centered-window" {{#unless currentWindow == "mainMenu"}}style="display: none;"{{/unless}}> 92 {{>ra_main_menu_template}} 93 </div> 94 95 {{#if currentWindow == "loadingPiece"}} 96 {{>ra_loading_piece_template}} 97 {{/if}} 98 99 {{#if currentWindow == "gameOverlay"}} 100 <button type="button" class="btn btn-default center-block" id="bb-game-menu-button" on-tap="gamePause">Menu (More Pieces!)</button> 101 {{/if}} 102 103 {{#if currentWindow == "gamePause"}} 104 <div class="centered-windows"> 105 {{>ra_pause_menu_template}} 106 </div> 107 {{/if}} 108 109 {{#if currentWindow == "ghostSpook"}} 110 <div class="centered-windows"> 111 {{>ra_ghost_spook_template}} 112 </div> 113 {{/if}} 114 115 {{#if currentWindow == "gameEnd"}} 116 <div class="centered-windows"> 117 {{>ra_end_menu_template}} 118 </div> 119 {{/if}} 120 121 {{#if currentWindow == "about"}} 122 <div class="centered-windows"> 123 {{>ra_about_template}} 124 </div> 125 {{/if}} 126 127 {{#if currentWindow == "credits"}} 128 <div class="centered-windows"> 129 {{>ra_credits_template}} 130 </div> 131 {{/if}} 132 133 {{#if currentWindow == "troubleshooting"}} 134 <div class="centered-windows"> 135 {{>ra_troubleshooting_template}} 136 </div> 137 {{/if}} 138 139 {{#if currentWindow == "youtubeOverlay"}} 140 <div class="centered-windows"> 141 {{>ra_youtube_template}} 142 </div> 143 {{/if}} 144 </script>
144 145 146
146<script id='ra_loading_init_template' type='text/ractive'> 147 <div class="preload-container"> 148 <span class="preload-text">Loading Touch Pianist...</span> 149 </div> 150 </script>
150 151 152
152<script id='ra_main_menu_template' type='text/ractive'> 153 <div class="panel panel-default bb-window" id="bb-window-main"> 154 <div class="panel-heading clearfix"> 155 <a class="btn pull-right btn-info bb-main-menu-header-button" href="https://www.youtube.com/watch?v=ZtrG4893f74&list=PLwaOLMmRvioTsT1-Hz_KzUoU17lBLgipd&index=5" target="_blank" role="button">Watch Performance Videos</a> 156 <span class="bb-window-title">Touch Pianist</span> 157 </div> 158 <div id="bb-products-wrap"> 159 {{#each productData}} 160 {{#if mobilePack}} 161 {{>ra_mobile_product_card_template}} 162 {{else}} 163 {{>ra_product_card_template}} 164 {{/if}} 165 {{/each}} 166 </div> 167 </div> 168 </script>
168 169 170
170<script id='ra_product_card_template' type='text/ractive'> 171 <div class="bb-product-panel"> 172 <div class="panel bb-additive-panel panel-expandable"> 173 <div class="panel-body" id="scrolltop_{{productID.split('.')[3]}}" style="cursor:pointer;" on-tap="scrollTo:scrolltop_{{productID.split('.')[3]}}"> 174 <span class="bb-pack-name">{{packDisplay}}</span> 175 <span class="bb-composer-name">{{composerDisplay}}</span> 176 </div> 177 <div class="collapse collapsible_product" id="collapse_{{productID.split('.')[3]}}"> 178 {{#each pieces}} 179 <div class="panel bb-additive-panel bb-movement-panel clearfix" on-tap="animateButtons:{{dataName}}"> 180 <div class="panel-body bb-piece-card" id="piececard-{{dataName}}"> 181 {{#if tags.indexOf("popular") !== -1}} 182 <span class="label label-success bb-label-popular">Popular!</span> 183 {{/if}} 184 <div class="bb-movement-data"> 185 <span class="bb-movement-name">{{displayName}}</span> 186 <span class="bb-movement-description">{{displayInfo}}</span> 187 </div> 188 <div class="bb-movement-buttons"> 189 <button type="button" class="btn btn-success bb-piece-action-button" on-tap="performAction:{{dataName}}">Perform</button> 190 <button type="button" class="btn btn-info bb-piece-action-button watch-button" on-tap="watchAction:{{dataName}}">Watch</button> 191 </div> 192 </div> 193 </div> 194 {{/each}} 195 </div> 196 </div> 197 </div> 198 </script>
198 199 200
200<script id='ra_mobile_product_card_template' type='text/ractive'> 201 <div class="bb-product-panel"> 202 <div class="panel bb-additive-panel panel-expandable" style="background-color: rgba(38, 136, 214, 0.3);"> 203 <div class="panel-body" id="scrolltop_{{productID.split('.')[3]}}" style="cursor:pointer;position:relative;" on-tap="scrollTo:scrolltop_{{productID.split('.')[3]}}"> 204 <span class="bb-pack-name">{{packDisplay}}</span> 205 <span class="bb-composer-name">{{composerDisplay}}</span> 206 <div class="panel_mobile_badges"> 207 <a href="https://itunes.apple.com/us/app/touch-pianist-tap-in-rhythm/id958676734?ls=1&mt=8" target="_blank"><img src="/res/appstore.42ll.d0558d9106303823.svg" style="height:34px;"></a> 208 <a href="https://play.google.com/store/apps/details?id=com.earslap.touchpianistapp" target="_blank"><img src="/res/androidbadge.png" style="height:34px;"></a> 209 </div> 210 </div> 211 <div class="collapse collapsible_product" id="collapse_{{productID.split('.')[3]}}"> 212 {{#each pieces}} 213 <div class="panel bb-additive-panel bb-movement-panel clearfix" on-tap="animateButtons:{{dataName}}"> 214 <div class="panel-body bb-piece-card" id="piececard-{{dataName}}"> 215 {{#if tags.indexOf("popular") !== -1}} 216 <span class="label label-success bb-label-popular">Popular!</span> 217 {{/if}} 218 <div class="bb-movement-data"> 219 <span class="bb-movement-name">{{displayName}}</span> 220 <span class="bb-movement-description">{{displayInfo}}</span> 221 </div> 222 <div class="bb-movement-buttons"> 223 <a class="btn btn-success bb-piece-action-button" target="_blank" role="button" href="https://itunes.apple.com/us/app/touch-pianist-tap-in-rhythm/id958676734?ls=1&mt=8">Get for iOS</button> 224 <a class="btn btn-success bb-piece-action-button" target="_blank" role="button" href="https://play.google.com/store/apps/details?id=com.earslap.touchpianistapp">Get for Android</button> 225 </div> 226 </div> 227 </div> 228 {{/each}} 229 </div> 230 </div> 231 </div> 232 </script>
232 233 234
234<script id='ra_ghost_spook_template' type='text/ractive'> 235 <div class="panel panel-default bb-window bb-window-small"> 236 <div class="panel-heading clearfix"> 237 <span class="bb-window-title">Sit Back and Enjoy</span> 238 </div> 239 240 <div class="panel-body"> 241 <p>You are in playback mode. In this mode, your device performs the piece for you to watch.</p> 242 <p>Should you wish to perform the piece yourself, you can go to the main menu and choose "Perform" for the piece you want.</p> 243 <button type="button" class="btn btn-info btn-block" on-tap="switchToWindow:gameOverlay">Keep Watching</button> 244 <button type="button" class="btn btn-danger btn-block" on-tap="switchToWindow:mainMenu">Go to Main Menu</button> 245 </div> 246 </div> 247 </script>
247 248 249
249<script id='ra_loading_piece_template' type='text/ractive'> 250 <div class="preload-container"> 251 <span class="preload-text">Loading Your Piece...</span> 252 </div> 253 </script>
253 254 255
255<script id='ra_pause_menu_template' type='text/ractive'> 256 <div class="panel panel-default bb-window bb-window-small"> 257 <div class="panel-heading clearfix"> 258 <span class="bb-window-title">Paused</span> 259 </div> 260 261 <div class="panel-body"> 262 <button type="button" class="btn btn-danger btn-block" on-tap="switchToWindow:mainMenu">Main Menu (More Pieces!)</button> 263 <button type="button" class="btn btn-info btn-block" on-tap="switchToWindow:gameOverlay">Resume</button> 264 <button type="button" class="btn btn-info btn-block" on-tap="restartPiece">Restart</button> 265 {{#unless isGhost}} 266 <button type="button" class="btn btn-info btn-block" on-tap="dropPin">Save This Position</button> 267 {{#if hasPin}} 268 <button type="button" class="btn btn-info btn-block" on-tap="goBackToPin">Load Last Saved Position</button> 269 {{/if}} 270 {{/unless}} 271 272 </div> 273 </div> 274 </script>
274 275 276
276<script id='ra_end_menu_template' type='text/ractive'> 277 <div class="panel panel-default bb-window bb-window-small"> 278 <div class="panel-heading clearfix"> 279 <span class="bb-window-title">Applause!</span> 280 </div> 281 282 <div class="panel-body"> 283 <button type="button" class="btn btn-info btn-block" on-tap="restartPiece">Restart</button> 284 <button type="button" class="btn btn-danger btn-block" on-tap="switchToWindow:mainMenu">Main Menu</button> 285 <div class="text-center" style="margin-top:10px;"> 286 <p>Choose one for more fun:</p> 287 <a href="https://play.google.com/store/apps/details?id=com.earslap.touchpianistapp" style="margin-right: 12px;"> 288 <img alt="Android app on Google Play" 289 src="https://developer.android.com/images/brand/en_app_rgb_wo_60.png" /> 290 </a> 291 <a target="_blank" href="https://itunes.apple.com/us/app/touch-pianist-tap-in-rhythm/id958676734?ls=1&mt=8"><img id="appstore-badge-svg" src="res/appstore.42ll.d0558d9106303823.svg" alt="Download on the AppStore"></a> 292 </div> 293 </div> 294 </div> 295 </script>
295 296 297
297<script id='ra_about_template' type='text/ractive'> 298 <div class="panel panel-default bb-window bb-window-small"> 299 <div class="panel-heading clearfix"> 300 <span class="bb-window-title">What?</span> 301 <button type="button" class="close" data-dismiss="modal" aria-label="Close" on-tap="goBack"><span aria-hidden="true">×</span></button> 302 </div> 303 304 <div class="panel-body"> 305 <p>Touch Pianist helps you experience some of the thrill of performing beautiful piano music composed by the masters, using nothing more than your computer.</p> 306 <p>Use any of the keys on your computer keyboard (or tap your screen on a touch screen) to trigger the next musical event. If you can manage to get the rhythm right, you will hear the music as you want it.</p> 307 <p>This is not much like a computer game. There is no score keeping. You are free to perform the music using your device in any way you desire.</p> 308 <p>If you want to watch how a piece might be performed, go to main menu and choose "Watch" for the piece you want</p> 309 <p>Have great fun.</p> 310 <div class="pull-right"><a href="ppol.html" target="_blank">Privacy Policy</a></div> 311 </div> 312 313 <div class="panel-footer clearfix"> 314 315 <button type="button" class="btn btn-success pull-right" on-tap="goBack">Ok</button> 316 </div> 317 </div> 318 </script>
318 319 320
320<script id='ra_credits_template' type='text/ractive'> 321 <div class="panel panel-default bb-window bb-window-small"> 322 <div class="panel-heading clearfix"> 323 <span class="bb-window-title">About</span> 324 <button type="button" class="close" data-dismiss="modal" aria-label="Close" on-tap="goBack"><span aria-hidden="true">×</span></button> 325 </div> 326 327 <div class="panel-body"> 328 <p>Touch Pianist was created by Batuhan Bozkurt.</p> 329 <p><a href="http://www.earslap.com" target="_blank">http://www.earslap.com</a></p> 330 <p>[email protected]</p> 331 <p>See my other musical web experiments:</p> 332 <p><a href="http://www.earslap.com/page/otomata.html">Otomata:</a> Fun, unpredictable music sequencer.</p> 333 <p><a href="http://www.earslap.com/page/circuli.html">Circuli:</a> Generate ambient sounds inside your browser.</p> 334 335 <div id="about-social-icons"> 336 <p> 337 <a href="http://www.facebook.com/batuhan.bozkurt" class="btn btn-social-icon btn-default"><i class="fa fa-facebook"></i></a> 338 <a href="http://www.twitter.com/earslap" class="btn btn-social-icon btn-default"><i class="fa fa-twitter"></i></a> 339 </p> 340 </div> 341 </div> 342 343 <div class="panel-footer clearfix"> 344 <button type="button" class="btn btn-success pull-right" on-tap="goBack">Cool</button> 345 </div> 346 </div> 347 </script>
347 348 349
349<script id='ra_youtube_template' type='text/ractive'> 350 <div class="panel panel-default bb-window bb-window-small"> 351 <div class="panel-heading clearfix"> 352 <span class="bb-window-title">Free on App Store</span> 353 <button type="button" class="close" data-dismiss="modal" aria-label="Close" on-tap="switchToWindow:gameOverlay"><span aria-hidden="true">×</span></button> 354 </div> 355 356 <div class="panel-body"> 357 <p>You are on a mobile device. If it happens to be an iOS device, <a target="_blank" href="https://itunes.apple.com/us/app/touch-pianist-tap-in-rhythm/id958676734?ls=1&mt=8">download Touch Pianist FREE from AppStore</a> for more fun! Android App is coming soonish.</p> 358 <iframe width="427" height="255" src="https://www.youtube.com/embed/ZtrG4893f74" frameborder="0" allowfullscreen></iframe> 359 </div> 360 361 <div class="panel-footer clearfix"> 362 <a class="btn btn-success pull-right" href="https://itunes.apple.com/us/app/touch-pianist-tap-in-rhythm/id958676734?ls=1&mt=8">Sure!</a> 363 </div> 364 </div> 365 </script>
365 366 367
367<script id='ra_troubleshooting_template' type='text/ractive'> 368 <div class="panel panel-default bb-window bb-window-small"> 369 <div class="panel-heading clearfix"> 370 <span class="bb-window-title">Make it work</span> 371 <button type="button" class="close" data-dismiss="modal" aria-label="Close" on-tap="goBack"><span aria-hidden="true">×</span></button> 372 </div> 373 374 <div class="panel-body"> 375 <p>Touch Pianist works best with <a href="http://www.google.com/chrome/" target="_blank">Google Chrome</a> So if you are not using it for this site already, please try it with Chrome.</p> 376 <p>Also works just fine with the recent versions of Firefox, but on some rare systems, the audio might go wonkers when you are deep into performing a piece. So if that happens to you, please try it with Chrome.</p> 377 <p>Internet Explorer is just out of luck because it doesn't support WebAudio.</p> 378 <p>Should work great with a recent Safari and Mobile Safari (if you have a iPhone4S or iPad2 and above, and iOS7 and above).</p> 379 <p>If you are getting low performance on your computer, please resize your browser (and reload site!) to a smaller size and performance should substantially increase.</p> 380 <p>Worst case, <a href="#nowebgl" onclick="window.location.hash='nowebgl';window.location.reload();">click here to force disable WebGL</a> on this site and see how it works for you.</p> 381 <p>WebGL enabled: {{#if isWebGL}}Yes!{{else}}Nope.{{/if}} / Sampler Format: {{samplerFormat}}</p> 382 </div> 383 384 <div class="panel-footer clearfix"> 385 <button type="button" class="btn btn-danger pull-right" on-tap="goBack">Back</button> 386 </div> 387 </div> 388 </script>
388 389 390
390<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
390 391
391<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
391 392 393
393<script src="js/tplib.min.42ll.228da62e2d1ffd2d.js"></script>
393 394 395
395<script src="js/tp.min.42ll.cdae99c66ae34d60.js"></script>
395 396 397
397<script>
vendor: 359 bytes, lines 397-403
397 398 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 399 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 400 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 401 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 402 403 ga('create', '
403UA-55735699-4
vendor: 47 bytes, lines 403-406
403', 'auto'); 404 ga('send', 'pageview'); 405 406
406</script>
406 407 408 409
409<script> 410 var app; 411 412 if (window.top !== window.self) window.top.location.replace(window.self.location.href); 413 414 window.assetVer = { 415 416 pianoMp3: 1, 417 pianoOgg: 1 418 }; 419 420 function kickIt() 421 { 422 console.log("kicking it"); 423 var AudioContext = window.AudioContext || window.webkitAudioContext; 424 window.audioCtx = new AudioContext(); 425 FastClick.attach(document.getElementById('non-canvas')); 426 427 var loader = PIXI.loader; 428 loader.add('circlef', 'res/circlef.png'); 429 loader.add('circleblurlo', 'res/circleblurlo.png'); 430 loader.add('circleblurhi', 'res/circleblurhi.png'); 431 loader.once('complete', function() { 432 var detector = new AudioDetector(window.audioCtx); 433 detector.detectSupport(function(format) { 434 console.log("detected " + format + " decoding support."); 435 app = new Bb.App(format); 436 }); 437 }.bind(window)); 438 loader.load(); 439 } 440 441 $(document).ready(kickIt); 442 443 444 445 // $(window).load(function() { 446 447 // console.log("window loaded!"); 448 449 // kickIt(); 450 // }); 451 452 </script>
452 453 454
455<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"464ebe0ee6c64ec7a4a0aed634514209","r":1,"spa":2}' crossorigin="anonymous"></script>
455 456</body> 457</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.