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

index.js 6.2KB

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