index.html | searchcode

/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<head>
  3<title>remix</title>
  4<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" type="text/javascript"></script>
  5<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>
  6<style type="text/css">
  7body {
  8  font-family: helvetica, arial, sans-serif;
  9  font-size: 14px;
 10  margin: 20px 40px 0 40px;
 11}
 12
 13#progress-wrapper {
 14  position: absolute;
 15  top: 0px;
 16  left: 0px;
 17  width: 100%;
 18  height: 20px;
 19  background-color: #222222;
 20}
 21
 22#progress {
 23  height: 100%;
 24  background-color: #00aeef;
 25  width: 50%;
 26}
 27
 28h1 {
 29  position: relative;
 30  font-size: 110px;
 31  margin-top: 40px;
 32  margin-bottom: 40px;
 33}
 34
 35#left {
 36  width: 400px;
 37  float: left;
 38  margin-right: 20px;
 39}
 40
 41img {
 42  border: none;
 43}
 44
 45a {
 46  color: #000000;
 47}
 48
 49a:hover {
 50  background-color: #222222;
 51  color: #ffffff;
 52}
 53
 54textarea {
 55  border: 8px solid #eeeeee;
 56  padding: 6px;
 57  font-family: monospace;
 58  font-size: 14px;
 59  outline: none;
 60}
 61</style>
 62<script type="text/javascript">
 63var Remix = {
 64  __init: function() {
 65    this._swf = document.getElementById('swf');
 66  },
 67
 68  __setAnalysis: function(analysis) {
 69    this.analysis = analysis;
 70  },
 71
 72  __remix: function() {
 73    try {
 74      eval($('remixJs').value);
 75    }
 76    catch(e) {
 77      alert(e);
 78      return;
 79    }
 80    if (remix == null) {
 81      alert('remix function not found!');
 82      return;
 83    }
 84    try {
 85      var sampleRanges = remix(this.analysis);
 86      this._swf.setRemixJson(Object.toJSON(sampleRanges))
 87    }
 88    catch (e) {
 89      alert(e);
 90    }
 91  },
 92
 93  __setProgress: function(progress) {
 94    $('progress').style.width = 100 * progress + '%';
 95  },
 96
 97  _scriptLoaded: function() {
 98    if (remix) {
 99      $('remixJs').value = remix;
100    }
101    else {
102      alert('Remix function not found in script.');
103    }
104  },
105
106  _loadScript: function() {
107    remix = null;
108    document.write('<script src="' + location.hash.substring(1) + '" onload="Remix._scriptLoaded();"><' + '/script>');
109  }
110};
111</script>
112</head>
113<body>
114
115<div id="progress-wrapper"><div id="progress" style="width: 0%;"></div></div>
116<h1>Remix</h1>
117
118<div id="left">
119<div id="swf"></div>
120<p>Edit songs with JavaScript and <a href="http://echonest.com">The Echo Nest</a>.</p>
121
122<p>Created by <a href="http://ryanberdeen.com">Ryan Berdeen</a>.</p>
123<p>Bugs, feedback, etc: <a href="mailto:remix@ryanberdeen.com">remix@ryanberdeen.com</a></p>
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</div>
127
128<textarea id="remixJs" rows="20" cols="60">function remix (analysis) {
129  var bars = analysis.bars;
130  var beats = analysis.beats;
131  var beatIndex = 0;
132  var samples = [];
133
134  for (var i = 0; i < bars.length; i++) {
135    while (beatIndex < beats.length - 1 &&
136           beats[beatIndex].value != bars[i].value) {
137      beatIndex++;
138    }
139
140    samples.push(
141      beats[beatIndex].value,
142      beats[beatIndex + 1].value
143    );
144  }
145
146  return samples;
147}</textarea>
148
149<script type="text/javascript">
150swfobject.embedSWF('player.swf', 'swf', '400', '120', '9.0.0');
151if (location.hash) {
152  Remix._loadScript();
153}
154</script>
155</body>
156</html>