main.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. 'use strict';
  2. // Create an instance
  3. var wavesurfer;
  4. // Init & load audio file
  5. document.addEventListener('DOMContentLoaded', function () {
  6. // Init
  7. wavesurfer = WaveSurfer.create({
  8. container: document.querySelector('#waveform'),
  9. waveColor: '#A8DBA8',
  10. progressColor: '#3B8686'
  11. });
  12. // Load audio from URL
  13. wavesurfer.load('../media/demo.wav');
  14. // Equalizer
  15. wavesurfer.on('ready', function () {
  16. var EQ = [
  17. {
  18. f: 32,
  19. type: 'lowshelf'
  20. }, {
  21. f: 64,
  22. type: 'peaking'
  23. }, {
  24. f: 125,
  25. type: 'peaking'
  26. }, {
  27. f: 250,
  28. type: 'peaking'
  29. }, {
  30. f: 500,
  31. type: 'peaking'
  32. }, {
  33. f: 1000,
  34. type: 'peaking'
  35. }, {
  36. f: 2000,
  37. type: 'peaking'
  38. }, {
  39. f: 4000,
  40. type: 'peaking'
  41. }, {
  42. f: 8000,
  43. type: 'peaking'
  44. }, {
  45. f: 16000,
  46. type: 'highshelf'
  47. }
  48. ];
  49. // Create filters
  50. var filters = EQ.map(function (band) {
  51. var filter = wavesurfer.backend.ac.createBiquadFilter();
  52. filter.type = band.type;
  53. filter.gain.value = 0;
  54. filter.Q.value = 1;
  55. filter.frequency.value = band.f;
  56. return filter;
  57. });
  58. // Connect filters to wavesurfer
  59. wavesurfer.backend.setFilters(filters);
  60. // Bind filters to vertical range sliders
  61. var container = document.querySelector('#equalizer');
  62. filters.forEach(function (filter) {
  63. var input = document.createElement('input');
  64. wavesurfer.util.extend(input, {
  65. type: 'range',
  66. min: -40,
  67. max: 40,
  68. value: 0,
  69. title: filter.frequency.value
  70. });
  71. input.style.display = 'inline-block';
  72. input.setAttribute('orient', 'vertical');
  73. wavesurfer.util.style(input, {
  74. 'webkitAppearance': 'slider-vertical',
  75. width: '50px',
  76. height: '150px'
  77. });
  78. container.appendChild(input);
  79. var onChange = function (e) {
  80. filter.gain.value = ~~e.target.value;
  81. };
  82. input.addEventListener('input', onChange);
  83. input.addEventListener('change', onChange);
  84. });
  85. // For debugging
  86. wavesurfer.filters = filters;
  87. });
  88. // Log errors
  89. wavesurfer.on('error', function (msg) {
  90. console.log(msg);
  91. });
  92. // Bind play/pause button
  93. document.querySelector(
  94. '[data-action="play"]'
  95. ).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
  96. // Progress bar
  97. (function () {
  98. var progressDiv = document.querySelector('#progress-bar');
  99. var progressBar = progressDiv.querySelector('.progress-bar');
  100. var showProgress = function (percent) {
  101. progressDiv.style.display = 'block';
  102. progressBar.style.width = percent + '%';
  103. };
  104. var hideProgress = function () {
  105. progressDiv.style.display = 'none';
  106. };
  107. wavesurfer.on('loading', showProgress);
  108. wavesurfer.on('ready', hideProgress);
  109. wavesurfer.on('destroy', hideProgress);
  110. wavesurfer.on('error', hideProgress);
  111. }());
  112. });