/flash/echo-nest-flash-api/examples/javascript/index.html

http://echo-nest-remix.googlecode.com/ · HTML · 156 lines · 134 code · 22 blank · 0 comment · 0 complexity · b196c6e2c17446a6939e3be5763f02fd MD5 · raw file 

    

  1. <html>
    2. 

  2. <head>
    3. 

  3. <title>remix</title>
    4. 

  4. <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" type="text/javascript"></script>
    5. 

  5. <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>
    6. 

  6. <style type="text/css">
    7. 

  7. body {
    8. 

  8.   font-family: helvetica, arial, sans-serif;
    9. 

  9.   font-size: 14px;
    10. 

  10.   margin: 20px 40px 0 40px;
    11. 

  11. }
    12. 

  12. 

  13. #progress-wrapper {
    14. 

  14.   position: absolute;
    15. 

  15.   top: 0px;
    16. 

  16.   left: 0px;
    17. 

  17.   width: 100%;
    18. 

  18.   height: 20px;
    19. 

  19.   background-color: #222222;
    20. 

  20. }
    21. 

  21. 

  22. #progress {
    23. 

  23.   height: 100%;
    24. 

  24.   background-color: #00aeef;
    25. 

  25.   width: 50%;
    26. 

  26. }
    27. 

  27. 

  28. h1 {
    29. 

  29.   position: relative;
    30. 

  30.   font-size: 110px;
    31. 

  31.   margin-top: 40px;
    32. 

  32.   margin-bottom: 40px;
    33. 

  33. }
    34. 

  34. 

  35. #left {
    36. 

  36.   width: 400px;
    37. 

  37.   float: left;
    38. 

  38.   margin-right: 20px;
    39. 

  39. }
    40. 

  40. 

  41. img {
    42. 

  42.   border: none;
    43. 

  43. }
    44. 

  44. 

  45. a {
    46. 

  46.   color: #000000;
    47. 

  47. }
    48. 

  48. 

  49. a:hover {
    50. 

  50.   background-color: #222222;
    51. 

  51.   color: #ffffff;
    52. 

  52. }
    53. 

  53. 

  54. textarea {
    55. 

  55.   border: 8px solid #eeeeee;
    56. 

  56.   padding: 6px;
    57. 

  57.   font-family: monospace;
    58. 

  58.   font-size: 14px;
    59. 

  59.   outline: none;
    60. 

  60. }
    61. 

  61. </style>
    62. 

  62. <script type="text/javascript">
    63. 

  63. var Remix = {
    64. 

  64.   __init: function() {
    65. 

  65.     this._swf = document.getElementById('swf');
    66. 

  66.   },
    67. 

  67. 

  68.   __setAnalysis: function(analysis) {
    69. 

  69.     this.analysis = analysis;
    70. 

  70.   },
    71. 

  71. 

  72.   __remix: function() {
    73. 

  73.     try {
    74. 

  74.       eval($('remixJs').value);
    75. 

  75.     }
    76. 

  76.     catch(e) {
    77. 

  77.       alert(e);
    78. 

  78.       return;
    79. 

  79.     }
    80. 

  80.     if (remix == null) {
    81. 

  81.       alert('remix function not found!');
    82. 

  82.       return;
    83. 

  83.     }
    84. 

  84.     try {
    85. 

  85.       var sampleRanges = remix(this.analysis);
    86. 

  86.       this._swf.setRemixJson(Object.toJSON(sampleRanges))
    87. 

  87.     }
    88. 

  88.     catch (e) {
    89. 

  89.       alert(e);
    90. 

  90.     }
    91. 

  91.   },
    92. 

  92. 

  93.   __setProgress: function(progress) {
    94. 

  94.     $('progress').style.width = 100 * progress + '%';
    95. 

  95.   },
    96. 

  96. 

  97.   _scriptLoaded: function() {
    98. 

  98.     if (remix) {
    99. 

  99.       $('remixJs').value = remix;
    100. 

  100.     }
    101. 

  101.     else {
    102. 

  102.       alert('Remix function not found in script.');
    103. 

  103.     }
    104. 

  104.   },
    105. 

  105. 

  106.   _loadScript: function() {
    107. 

  107.     remix = null;
    108. 

  108.     document.write('<script src="' + location.hash.substring(1) + '" onload="Remix._scriptLoaded();"><' + '/script>');
    109. 

  109.   }
    110. 

  110. };
    111. 

  111. </script>
    112. 

  112. </head>
    113. 

  113. <body>
    114. 

  114. 

  115. <div id="progress-wrapper"><div id="progress" style="width: 0%;"></div></div>
    116. 

  116. <h1>Remix</h1>
    117. 

  117. 

  118. <div id="left">
    119. 

  119. <div id="swf"></div>
    120. 

  120. <p>Edit songs with JavaScript and <a href="http://echonest.com">The Echo Nest</a>.</p>
    121. 

  121. 

  122. <p>Created by <a href="http://ryanberdeen.com">Ryan Berdeen</a>.</p>
    123. 

  123. <p>Bugs, feedback, etc: <a href="mailto:remix@ryanberdeen.com">remix@ryanberdeen.com</a></p>
    124. 

  124. 

  125. <div id="credit"><a href="http://echonest.com"><img src="http://the.echonest.com/media/images/logos/140x50_lt.gif" alt="Powered By The Echo Nest"></a></div>
    126. 

  126. </div>
    127. 

  127. 

  128. <textarea id="remixJs" rows="20" cols="60">function remix (analysis) {
    129. 

  129.   var bars = analysis.bars;
    130. 

  130.   var beats = analysis.beats;
    131. 

  131.   var beatIndex = 0;
    132. 

  132.   var samples = [];
    133. 

  133. 

  134.   for (var i = 0; i < bars.length; i++) {
    135. 

  135.     while (beatIndex < beats.length - 1 &&
    136. 

  136.            beats[beatIndex].value != bars[i].value) {
    137. 

  137.       beatIndex++;
    138. 

  138.     }
    139. 

  139. 

  140.     samples.push(
    141. 

  141.       beats[beatIndex].value,
    142. 

  142.       beats[beatIndex + 1].value
    143. 

  143.     );
    144. 

  144.   }
    145. 

  145. 

  146.   return samples;
    147. 

  147. }</textarea>
    148. 

  148. 

  149. <script type="text/javascript">
    150. 

  150. swfobject.embedSWF('player.swf', 'swf', '400', '120', '9.0.0');
    151. 

  151. if (location.hash) {
    152. 

  152.   Remix._loadScript();
    153. 

  153. }
    154. 

  154. </script>
    155. 

  155. </body>
    156. 

  156. </html>
    157.