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

index.html 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Audiogram</title>
  5. <meta charset="utf-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  8. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600" rel="stylesheet" type="text/css">
  9. <link href="/css/base.css" rel="stylesheet" type="text/css">
  10. <link href="/css/editor.css" rel="stylesheet" type="text/css">
  11. <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
  12. </head>
  13. <body class="loading">
  14. <div class="container">
  15. <h1>Audiogram</h1>
  16. <div id="loading">
  17. <div id="loading-bars">
  18. <div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div>
  19. </div>
  20. <div id="loading-message">Loading...</div>
  21. </div><!-- #loading -->
  22. <div id="loaded">
  23. <div id="error"></div>
  24. <div class="row form-row" id="row-audio">
  25. <label for="input-audio">Audio</label>
  26. <input id="input-audio" name="audio" type="file" />
  27. </div>
  28. <div class="row form-row" id="row-subtitle">
  29. <label for="input-subtitle">Subtitles</label>
  30. <input id="input-subtitle" name="subtitle" type="file" />
  31. </div>
  32. <div class="row form-row" id="row-theme">
  33. <label for="input-theme">Theme</label>
  34. <select id="input-theme" name="theme"></select>
  35. </div>
  36. <div class="row form-row" id="row-caption">
  37. <label for="input-caption">
  38. Caption
  39. <div class="note">Add two spaces in a row to force a line break.</div>
  40. </label>
  41. <input id="input-caption" name="caption" type="text" autocomplete="off" placeholder="Add a caption" />
  42. </div>
  43. <!--div class="row form-row">
  44. <hr>
  45. </div>
  46. <div class="row form-row" id="row-new-theme">
  47. <label for="input-new-theme">New theme</label>
  48. <input id="input-new-theme" name="new-theme" type="file" />
  49. </div>
  50. <div class="row form-row" id="row-caption">
  51. <label for="input-caption">
  52. Name
  53. </label>
  54. <input id="input-new-caption" name="new-caption" type="text" autocomplete="off" placeholder="Add a new theme name" />
  55. </div>
  56. <div class="row form-row">
  57. <button class="btn btn-outline-primary" name="btn-new-theme" id="btn-new-theme">Add</button>
  58. </div>
  59. <div class="row form-row">
  60. <hr>
  61. </div-->
  62. <div id="preview">
  63. <div style="background-color: black;">
  64. <div id="canvas">
  65. <canvas width="640" height="360"></canvas>
  66. <div id="preview-label">Preview</div>
  67. </div>
  68. </div>
  69. <div id="minimap" class="hidden">
  70. <svg width="640" height="80" xmlns="http://www.w3.org/2000/svg">
  71. <defs>
  72. <clipPath id="clip">
  73. <rect height="80" width="640" x="0" y="0"></rect>
  74. </clipPath>
  75. </defs>
  76. <g class="waveform background">
  77. <line x1="0" x2="640" y1="40" y2="40"></line>
  78. <path></path>
  79. </g>
  80. <g class="waveform foreground" clip-path="url(#clip)">
  81. <line x1="0" x2="640" y1="40" y2="40"></line>
  82. <path></path>
  83. </g>
  84. <g class="brush"></g>
  85. <g class="time">
  86. <line x1="0" x2="0" y1="0" y2="80"></line>
  87. </g>
  88. </svg>
  89. <div id="controls">
  90. <span id="tip">Click and drag over the waveform to clip audio<br />Use space bar to play/pause</span>
  91. <span id="duration"><strong></strong> seconds selected</span>
  92. <button id="play"><i class="fa fa-play"></i>Play</button>
  93. <button id="pause" class="hidden"><i class="fa fa-pause"></i>Pause</button>
  94. <button id="restart"><i class="fa fa-step-backward"></i>Restart</button>
  95. </div>
  96. </div>
  97. </div>
  98. <div id="audio">
  99. <audio controls>
  100. <source />
  101. </audio>
  102. </div>
  103. <div id="video">
  104. <video width="640" height="360" controls>
  105. <source type="video/mp4" />
  106. </video>
  107. </div>
  108. <div class="row" id="row-submit">
  109. <button type="button" id="return" class="left"><i class="fa fa-edit"></i>Return to editor</button>
  110. <button type="button" id="submit" class="right hidden"><i class="fa fa-cloud-upload"></i>Generate</button>
  111. <a id="download" class="button right" href="#" target="_blank"><i class="fa fa-download"></i>Download</a>
  112. <div class="clear"></div>
  113. </div>
  114. </div><!-- #loaded -->
  115. </div><!-- .container -->
  116. <script src="/js/bundle.js"></script>
  117. <!-- Force load custom fonts -->
  118. <script src="/fonts/fonts.js"></script>
  119. </body>
  120. </html>