Precedence of gradient, gradientLeft and gradientRight in setOptions()

[hvianna]

Precedence of gradient, gradientLeft and gradientRight in setOptions()

[Staijn1]

Hi!

Good shout, I will check that out. Sometimes you are so focused on the problem you can't see the simple fixes anymore.. Thanks haha

About spotify:
The integration with Spotify was quite easy. Spotify provides multiple API's, one of which is the Playback SDK. With this SDK you can create a spotify player in your browser. It will then show up as a device in the spotify app.

A working version of my app can be found at https://demo.phos.steinjonker.nl/ on the visualizer page. Open the settings panel by clicking the left button in the top toolbar and select the spotify tab.
After logging in you are redirected to the home page, so go back to the visualizer. I'm working on redirecting you to the visualizer page automatically.

Then select the device from the Spotify app and there it goes!

I completed a PR within my own repo yesterday that completed the work on this, it can be found here. But for easier viewing, I'd recommend to just look at the source files. The files that are changes are the only pieces of code that are involved with this functionality.

[Staijn1]

Suggested fix of not using gradient at all works, closing this issue.

Thanks!

[Staijn1]

Update: My fix was not actually sufficient.
Setting gradientLeft and gradientRight to undefined results in an error about the gradient not being found, which is interesting.

Instead, I now delete the gradientLeft and gradientRight attributes using the delete keyword:

// Register gradient here obviously
this.visualizerOptions.gradient = "spotify";
delete this.visualizerOptions.gradientLeft;
delete this.visualizerOptions.gradientRight;
// Dispatch the redux store change here, which will trigger a call to audiomotion.setOptions(options) somewhere

ps, Absolutely love this library, it is truly amazing and I use it daily. I'll buy you some coffee.

[hvianna]

Hello @Staijn1!

Maybe I'm missing something here, but have you tried setting only gradientLeft and gradientRight in your options object? You don't need to define a value for gradient, unless you want to use the same gradient on both channels.

ps, Absolutely love this library, it is truly amazing and I use it daily. I'll buy you some coffee.

Thanks a lot! I really really appreciate the support and feedback! ❤️🙏

Also, how do you integrate with Spotify? 👀 Is your application a browser extension?

[hvianna]

Cool, thanks for the info! Angulon is looking awesome!

[jeadys]

Hi!

Good shout, I will check that out. Sometimes you are so focused on the problem you can't see the simple fixes anymore.. Thanks haha

About spotify: The integration with Spotify was quite easy. Spotify provides multiple API's, one of which is the Playback SDK. With this SDK you can create a spotify player in your browser. It will then show up as a device in the spotify app.

A working version of my app can be found at https://demo.phos.steinjonker.nl/ on the visualizer page. Open the settings panel by clicking the left button in the top toolbar and select the spotify tab. After logging in you are redirected to the home page, so go back to the visualizer. I'm working on redirecting you to the visualizer page automatically.

Then select the device from the Spotify app and there it goes!

I completed a PR within my own repo yesterday that completed the work on this, it can be found here. But for easier viewing, I'd recommend to just look at the source files. The files that are changes are the only pieces of code that are involved with this functionality.

Hey, I see you ask for microphone permission in order to setup the audio stream from Spotify to motion analyzer, why is this? (probably project specific). Do you happen to know how I could stream my currently played spotify song to motion analyzer without asking for extra permissions? I tried setting connectSpeakres to true to visualize whatever audio is playing on my computer, but it doesn't seem to work. (btw I try to visualize stuff in the browser).

I also tried messing around with the source attribute but this won't work with the track uri I get back from the Spotify API. Only thing that seems to work is using the preview_url from a track to get a 30 second mp3 file.