☰

Visible Audio

Realtime Audio Visualizations for moe.fm

当前为 2015-01-07 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Visible Audio
  3. // @version      0.1
  4. // @description  Realtime Audio Visualizations for moe.fm
  5. // @author       woozy
  6. // @homepage     http://woozy.im/
  7. // @match        http://moe.fm/listen/h5*
  8. // @grant        none
  9. // @namespace https://greasyfork.org/users/8206
  10. // ==/UserScript==
  11.  
  12. var raf;
  13. var canvas = document.createElement('canvas');
  14. var cctx = canvas.getContext('2d');
  15. canvas.width = 720;
  16. canvas.height = 96;
  17. var pls = document.getElementById('promotion_ls');
  18. pls.style.textAlign = 'center';
  19. pls.innerHTML = '';
  20. pls.appendChild(canvas);
  21.  
  22. var actx = new AudioContext();
  23. var analyser = actx.createAnalyser();
  24. var bufferLength = analyser.frequencyBinCount;
  25. var dataArray = new Uint8Array(bufferLength);
  26. analyser.connect(actx.destination);
  27. analyser.getByteFrequencyData(dataArray);
  28.  
  29. var prev = undefined;
  30. function check() {
  31.   requestAnimationFrame(check);
  32.   if (prev != sm2sound._a) {
  33.     prev = sm2sound._a;
  34.     window.cancelAnimationFrame(raf);
  35.     begin();
  36.   }
  37. }
  38. check();
  39.  
  40. function begin() {
  41.   var audio = sm2sound._a;
  42.   var source = actx.createMediaElementSource(audio);
  43.   source.connect(analyser);
  44.   function draw() {
  45.     raf = requestAnimationFrame(draw);
  46.     analyser.getByteFrequencyData(dataArray);
  47.     cctx.clearRect(0, 0, canvas.width, canvas.height);
  48.     cctx.lineWidth = 2;
  49.     cctx.strokeStyle = 'rgb(0, 0, 0)';
  50.     cctx.beginPath();
  51.     var sliceWidth = canvas.width * 1.0 / bufferLength;
  52.     for(var x = 0, i = 0; i < bufferLength; i++) {
  53.       var y = (1 - dataArray[i] / 256.0) * canvas.height;
  54.       (i === 0) ?  cctx.moveTo(x, y) : cctx.lineTo(x, y);
  55.       x += sliceWidth;
  56.     }
  57.     cctx.stroke();
  58.     cctx.closePath();
  59.   }
  60.   draw();
  61. }