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

preview.js 2.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. var d3 = require("d3"),
  2. audio = require("./audio.js"),
  3. video = require("./video.js"),
  4. minimap = require("./minimap.js"),
  5. sampleWave = require("./sample-wave.js"),
  6. getRenderer = require("../renderer/"),
  7. getWaveform = require("./waveform.js");
  8. var context = d3.select("canvas").node().getContext("2d");
  9. var theme,
  10. caption,
  11. file,
  12. selection;
  13. function _file(_) {
  14. return arguments.length ? (file = _) : file;
  15. }
  16. function _theme(_) {
  17. return arguments.length ? (theme = _, redraw()) : theme;
  18. }
  19. function _caption(_) {
  20. return arguments.length ? (caption = _, redraw()) : caption;
  21. }
  22. function _selection(_) {
  23. return arguments.length ? (selection = _) : selection;
  24. }
  25. minimap.onBrush(function(extent){
  26. var duration = audio.duration();
  27. selection = {
  28. duration: duration * (extent[1] - extent[0]),
  29. start: extent[0] ? extent[0] * duration : null,
  30. end: extent[1] < 1 ? extent[1] * duration : null
  31. };
  32. d3.select("#duration strong").text(Math.round(10 * selection.duration) / 10)
  33. .classed("red", theme && theme.maxDuration && theme.maxDuration < selection.duration);
  34. });
  35. // Resize video and preview canvas to maintain aspect ratio
  36. function resize(width, height) {
  37. var containerWidth = document.querySelector('#preview').clientWidth,
  38. aspectRatio = height/width;
  39. containerWidth = containerWidth > 0 ? containerWidth : 640;
  40. var widthFactor = containerWidth / width,
  41. heightFactor = containerWidth * aspectRatio / height,
  42. factor = Math.min(widthFactor, heightFactor);
  43. d3.select("canvas")
  44. .attr("width", factor * width)
  45. .attr("height", factor * height);
  46. d3.select("#canvas")
  47. .style("width", (factor * width) + "px");
  48. d3.select("video")
  49. .attr("height", widthFactor * height);
  50. d3.select("#video")
  51. .attr("height", (widthFactor * height) + "px");
  52. context.setTransform(factor, 0, 0, factor, 0, 0);
  53. }
  54. function redraw() {
  55. resize(theme.width, theme.height);
  56. video.kill();
  57. var renderer = getRenderer(theme);
  58. renderer.backgroundImage(theme.backgroundImageFile || null);
  59. renderer.drawFrame(context, {
  60. caption: caption,
  61. waveform: sampleWave,
  62. frame: 0
  63. });
  64. }
  65. function loadAudio(f, cb) {
  66. d3.queue()
  67. .defer(getWaveform, f)
  68. .defer(audio.src, f)
  69. .await(function(err, data){
  70. if (err) {
  71. return cb(err);
  72. }
  73. file = f;
  74. minimap.redraw(data.peaks);
  75. cb(err);
  76. });
  77. }
  78. module.exports = {
  79. caption: _caption,
  80. theme: _theme,
  81. file: _file,
  82. selection: _selection,
  83. loadAudio: loadAudio,
  84. redraw: redraw
  85. };