Turn audio into a shareable video. forked from nypublicradio/audiogram

index.js 6.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. var d3 = require("d3"),
  2. $ = require("jquery"),
  3. preview = require("./preview.js"),
  4. video = require("./video.js"),
  5. audio = require("./audio.js");
  6. d3.json("/settings/themes.json", function(err, themes){
  7. if (err) {
  8. throw err;
  9. }
  10. for (var key in themes) {
  11. themes[key] = $.extend({}, themes.default, themes[key]);
  12. }
  13. preloadImages(themes);
  14. });
  15. function submitted() {
  16. d3.event.preventDefault();
  17. var theme = preview.theme(),
  18. caption = preview.caption(),
  19. selection = preview.selection(),
  20. file = preview.file();
  21. if (!file) {
  22. d3.select("#row-audio").classed("error", true);
  23. return setClass("error", "No audio file selected.");
  24. }
  25. if (theme.maxDuration && selection.duration > theme.maxDuration) {
  26. return setClass("error", "Your Audiogram must be under " + theme.maxDuration + " seconds.");
  27. }
  28. if (!theme || !theme.width || !theme.height) {
  29. return setClass("error", "No valid theme detected.");
  30. }
  31. video.kill();
  32. audio.pause();
  33. var formData = new FormData();
  34. formData.append("audio", file);
  35. if (selection.start || selection.end) {
  36. formData.append("start", selection.start);
  37. formData.append("end", selection.end);
  38. }
  39. formData.append("theme", JSON.stringify($.extend({}, theme, { backgroundImageFile: null })));
  40. formData.append("caption", caption);
  41. setClass("loading");
  42. d3.select("#loading-message").text("Uploading audio...");
  43. $.ajax({
  44. url: "/submit/",
  45. type: "POST",
  46. data: formData,
  47. contentType: false,
  48. dataType: "json",
  49. cache: false,
  50. processData: false,
  51. success: function(data){
  52. poll(data.id, 0);
  53. },
  54. error: error
  55. });
  56. }
  57. function poll(id) {
  58. setTimeout(function(){
  59. $.ajax({
  60. url: "/status/" + id + "/",
  61. error: error,
  62. dataType: "json",
  63. success: function(result){
  64. if (result && result.status && result.status === "ready" && result.url) {
  65. video.update(result.url, preview.theme().name);
  66. setClass("rendered");
  67. } else if (result.status === "error") {
  68. error(result.error);
  69. } else {
  70. d3.select("#loading-message").text(statusMessage(result));
  71. poll(id);
  72. }
  73. }
  74. });
  75. }, 2500);
  76. }
  77. function error(msg) {
  78. if (msg.responseText) {
  79. msg = msg.responseText;
  80. }
  81. if (typeof msg !== "string") {
  82. msg = JSON.stringify(msg);
  83. }
  84. if (!msg) {
  85. msg = "Unknown error";
  86. }
  87. d3.select("#loading-message").text("Loading...");
  88. setClass("error", msg);
  89. }
  90. // Once images are downloaded, set up listeners
  91. function initialize(err, themesWithImages) {
  92. // Populate dropdown menu
  93. d3.select("#input-theme")
  94. .on("change", updateTheme)
  95. .selectAll("option")
  96. .data(themesWithImages)
  97. .enter()
  98. .append("option")
  99. .text(function(d){
  100. return d.name;
  101. });
  102. // Get initial theme
  103. d3.select("#input-theme").each(updateTheme);
  104. // Get initial caption (e.g. back button)
  105. d3.select("#input-caption").on("change keyup", updateCaption).each(updateCaption);
  106. // Space bar listener for audio play/pause
  107. d3.select(document).on("keypress", function(){
  108. if (!d3.select("body").classed("rendered") && d3.event.key === " " && !d3.matcher("input, textarea, button, select").call(d3.event.target)) {
  109. audio.toggle();
  110. }
  111. });
  112. // Button listeners
  113. d3.selectAll("#play, #pause").on("click", function(){
  114. d3.event.preventDefault();
  115. audio.toggle();
  116. });
  117. d3.select("#restart").on("click", function(){
  118. d3.event.preventDefault();
  119. audio.restart();
  120. });
  121. // If there's an initial piece of audio (e.g. back button) load it
  122. d3.select("#input-audio").on("change", updateAudioFile).each(updateAudioFile);
  123. d3.select("#return").on("click", function(){
  124. d3.event.preventDefault();
  125. video.kill();
  126. setClass(null);
  127. });
  128. d3.select("#submit").on("click", submitted);
  129. }
  130. function updateAudioFile() {
  131. d3.select("#row-audio").classed("error", false);
  132. audio.pause();
  133. video.kill();
  134. // Skip if empty
  135. if (!this.files || !this.files[0]) {
  136. d3.select("#minimap").classed("hidden", true);
  137. preview.file(null);
  138. setClass(null);
  139. return true;
  140. }
  141. d3.select("#loading-message").text("Analyzing...");
  142. setClass("loading");
  143. preview.loadAudio(this.files[0], function(err){
  144. if (err) {
  145. d3.select("#row-audio").classed("error", true);
  146. setClass("error", "Error decoding audio file");
  147. } else {
  148. setClass(null);
  149. }
  150. d3.selectAll("#minimap, #submit").classed("hidden", !!err);
  151. });
  152. }
  153. function updateCaption() {
  154. preview.caption(this.value);
  155. }
  156. function updateTheme() {
  157. preview.theme(d3.select(this.options[this.selectedIndex]).datum());
  158. }
  159. function preloadImages(themes) {
  160. // preload images
  161. var imageQueue = d3.queue();
  162. d3.entries(themes).forEach(function(theme){
  163. if (!theme.value.name) {
  164. theme.value.name = theme.key;
  165. }
  166. if (theme.key !== "default") {
  167. imageQueue.defer(getImage, theme.value);
  168. }
  169. });
  170. imageQueue.awaitAll(initialize);
  171. function getImage(theme, cb) {
  172. if (!theme.backgroundImage) {
  173. return cb(null, theme);
  174. }
  175. theme.backgroundImageFile = new Image();
  176. theme.backgroundImageFile.onload = function(){
  177. return cb(null, theme);
  178. };
  179. theme.backgroundImageFile.onerror = function(e){
  180. console.warn(e);
  181. return cb(null, theme);
  182. };
  183. theme.backgroundImageFile.src = "/settings/backgrounds/" + theme.backgroundImage;
  184. }
  185. }
  186. function setClass(cl, msg) {
  187. d3.select("body").attr("class", cl || null);
  188. d3.select("#error").text(msg || "");
  189. }
  190. function statusMessage(result) {
  191. switch (result.status) {
  192. case "queued":
  193. return "Waiting for other jobs to finish, #" + (result.position + 1) + " in queue";
  194. case "audio-download":
  195. return "Downloading audio for processing";
  196. case "trim":
  197. return "Trimming audio";
  198. case "probing":
  199. return "Probing audio file";
  200. case "waveform":
  201. return "Analyzing waveform";
  202. case "renderer":
  203. return "Initializing renderer";
  204. case "frames":
  205. var msg = "Generating frames";
  206. if (result.numFrames) {
  207. msg += ", " + Math.round(100 * (result.framesComplete || 0) / result.numFrames) + "% complete";
  208. }
  209. return msg;
  210. case "combine":
  211. return "Combining frames with audio";
  212. case "ready":
  213. return "Cleaning up";
  214. default:
  215. return JSON.stringify(result);
  216. }
  217. }