A web based video player for files with multichannel audio where the user can adjust the volume levels.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

110 lines
3.4KB

  1. <!--
  2. Copyright 2021, Nils Hilbricht, Germany ( https://www.hilbricht.net )
  3. This template for the multichannel video audio mixer, or the html page generated from it,
  4. is part of a free software project.
  5. While generator, javascript etc. are release under AGPLv3+ this document is
  6. distributed under https://creativecommons.org/publicdomain/zero/1.0/ "Public Domain"
  7. -->
  8. <!-- https://www.blindtextgenerator.de/snippets -->
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <meta charset="utf-8">
  12. <head>
  13. <link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC"> <!-- Deactivate favicon -->
  14. <link rel="stylesheet" type="text/css" href="css/sanitize/sanitize.css" />
  15. <link rel="stylesheet" type="text/css" href="css/sanitize/forms.css" />
  16. <link rel="stylesheet" type="text/css" href="css/sanitize/typography.css" />
  17. <link rel="stylesheet" type="text/css" href="css/design.css"/>
  18. <meta name="viewport" content="width=device-width, initial-scale=1">
  19. </head>
  20. <body>
  21. <!-- Filled in by the generator -->
  22. <header>
  23. <h1>$$$TITLE$$$</h1>
  24. <div class="subtitle"><small><b>$$$HUMAN$$$</b> - $$$DATE$$$, $$$LICENSE$$$</small></div>
  25. </header>
  26. <script>
  27. var tracknames = [
  28. $$$TRACKNAMES$$$
  29. ];
  30. <!-- Initial / Default volume. Same order as tracks.-->
  31. var volumeMap = [
  32. $$$VOLUMEMAP$$$
  33. ];
  34. var videoAudioSampleRate = $$$SAMPLERATE$$$ ;
  35. </script>
  36. <p>
  37. <video controls>
  38. <source id="videofilename" src="$$$VIDEOFILE$$$" type="video/mp4">
  39. </video>
  40. </p>
  41. <p>
  42. <div id="mixerstrips" align="center">
  43. <!-- filled in by javascript -->
  44. </div>
  45. </p>
  46. <!-- Buttons for all tracks volume control -->
  47. <p align="center">
  48. <button onclick="setAllVolumeToZero()">[S] Silence All</button> <!-- All to zero. Not Mute like a DAW. -->
  49. <button onclick="resetAllVolumeToDefault()">[R] Reset to Default</button> <!-- All to initial volumeMap (see above) -->
  50. <button onclick="setAllVolumeToOne()">[H] Hear All</button> <!-- All to original video volume -->
  51. <br> Use a <b>[number]</b> key to toggle tracks directly.
  52. <br> <b>[Shift]</b> + <b>[number]</b> to set track to half volume.
  53. </p>
  54. <!-- Work in Progress. Does not yet work. Maybe in a later version
  55. <hr>
  56. <p align="center">
  57. <button onclick="renderOfflineAndDownload()">Download Your Mix</button>
  58. </p>
  59. -->
  60. <hr>
  61. <p align="center">
  62. <button onclick="playPause()">[Space] Play/Pause</button> <!-- Even if video is not in focus. -->
  63. <button onclick="seek(5)">[➡] +5 sec</button> <!-- Even if video is not in focus. -->
  64. <button onclick="seek(-5)">[⬅] -5 sec</button> <!-- Even if video is not in focus. -->
  65. <button onclick="seek(30)">[⬆] +30 sec</button> <!-- Even if video is not in focus. -->
  66. <button onclick="seek(-30)">[⬇] -30 sec</button> <!-- Even if video is not in focus. -->
  67. </p>
  68. <p align="center">
  69. <button onclick="fasterPlaybackSpeed()">[D] Faster</button>
  70. <button onclick="slowerPlaybackSpeed()">[A] Slower</button>
  71. <button onclick="normalPlaybackSpeed()">[W] Normal Speed</button>
  72. <br>Speed: &times;<span id="playbackSpeed">1.0</span>
  73. </p>
  74. <hr>
  75. <p>
  76. $$$DESCRIPTION$$$
  77. </p>
  78. </body>
  79. </html>
  80. <!-- load video player file last. Uses data from this file in <script> above -->
  81. <!-- <script type="text/javascript" src="js/wavyjs/wavyjs.js"></script> -->
  82. <script type="text/javascript" src="js/videomixer.js"></script>