Google-play-music-desktop-player-unofficial-: FFT display

[chrfwow]

Hi!
When listening to a song, you can click the cover image, the it is displayed fullscreen. Could you please add a FFT (Fourier Transformation) animation (where you see the frequencies used in the song).

Something which looks like this

[MarshallOfSound]

I mean, this would look super cool and I've actually seen HTML5 implementation of this before. The issue is it requires a working AudioContext to pipe through the frequencies currently being played. Unfortunately when in the visualizer / album art view Google claim the AudioContext and we can't do anything about it 😆

I'll leave this open and explore it at the weekend but I don't think it is possible.

[chrfwow]

At least on the official Google Play Music website, you can choose between a fullscreen display of the cover art or a frequency/loudness based animation of some particles. Maybe this could be a point to start from.

[MarshallOfSound]

@chrfwow I'm not sure you understand the potential issue.

Because Google have that particle animation based on the audio waveform we can't also inspect the waveform. An AudioElement can only ever have one AudioContext

[MarshallOfSound]

My initial conclusion appears to be correct. We can't gain an AudioContext in that situation.

If someone figures our how to do this a PR is welcome, but I can't see it being possible without Audio API changes inside Chromium.

[jostrander]

_Very Crude_ but here is a working FFT that seems to work in chrome:

const HEIGHT = 880;
const WIDTH = 1920;

const audioEl = document.getElementsByTagName('Audio')[1]
const canvas = document.createElement('canvas');
canvas.height = HEIGHT;
canvas.width = WIDTH;
canvas.style.position = 'absolute';
document.body.insertBefore(canvas, audioEl);
const canvasCtx = canvas.getContext('2d');
const audioContext = new AudioContext();
const analyser = audioContext.createAnalyser();

const source = audioContext.createMediaElementSource(audioEl);
source.connect(analyser);
source.connect(audioContext.destination);

analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
let dataArray = new Uint8Array(bufferLength);

let draw = () => {
  drawVisual = requestAnimationFrame(draw);
  analyser.getByteFrequencyData(dataArray);
  canvasCtx.fillStyle = 'rgb(200,200,200)';
  canvasCtx.fillRect(0,0,WIDTH,HEIGHT);
  var barWidth = (WIDTH / bufferLength);
  var x = 0;
  var barHeight;

  for(var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];
    canvasCtx.fillStyle = `rgb(${Math.max(Math.max(((barHeight+100)/2, 255)), 0)},50,50)`;
    canvasCtx.fillRect(x, HEIGHT-barHeight,barWidth,barHeight);
    x+= barWidth + 1;
  }
}
draw();

[MarshallOfSound]

@jostrander But does that work after opening / closing / using the particle effect visualizer?

[jostrander]

For what it's worth, I don't have the particle effect visualizer available, as in, not showing.

[MarshallOfSound]

I just tested on my local machine and as I thought

listen.js:657 Uncaught CustomError: Error in protected function: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.

^^ When you try to launch the particle visualizer with that code you posted running. Their might be some tricks to release the context just before google request it but I would have to look into that and at the moment my efforts are split across like 3 open source orgs, personal repos and work 😆

greatfun

[jostrander]

I wonder what causes the particle visualizer to become available, because I don't even have the option to open it. The only available option I have, over multiple accounts, new UI and old UI is the album art. I haven't tried other computers or browsers however.

[iansan5653]

Perhaps now that the visualizers (both the full screen album art visualizer and the particle visualizer) have been removed altogether (as far as I can tell), we can reconsider this feature? Google seems to have no reason to take the context anymore.

[SolarLiner]

That's right! It seems to have disappeared here too.

[MarshallOfSound]

Google seems to have no reason to take the context anymore.

Fair point, I'll take a look (or someone else can) and see if we can maintain access to the audio context 👍

[Rone777]

Google seems to have no reason to take the context anymore.

Fair point, I'll take a look (or someone else can) and see if we can maintain access to the audio context 👍

I was just wondering about it, would love this feature as well. just bumping incase it got lost in your busy schedule