AVMedia frequ type displays different colors based on broswer

[lqmorais]

Hello, thanks for this amazing plugin for Vue! It is exactly what I need for my project <3

I have one problem and would like to check if it might be a configuration issue.

On Firefox/Safari, the bars have solid colors

On Google Chrome, on the same implementation the colors appears more opaque.

Here is the configuration of my AVMedia:

<AVMedia
  :media="audioStream"
  type="frequ"
  frequ-direction="mo"
  :line-width="0.5"
  :frequ-lnum="50"
  :canv-width="250"
  :canv-height="50"
  :line-color="isPaused ? '#009CB1' : '#F43F5E'"
/>

[staskobzar]

Hello @lqmorais
Thanks for using the plugin and for the feedback.
I tried with your color value #F43F5E and on my Linux it is the same for Chrome and Firefox
But on my MacBook Chrome, indeed, displays this color in more opaque way. (I did not try this on Windows though)

Other colors, like on my demo page, looks more or less the same.

Plugin is using the canvas element under the hood and I do not know if I can do anything about it.

Doing some google search about it shows that this is a known issue and there some tricks with browser settings can be done but I do not beleive this is a good solution for a website.

You can try darker colors or try to use a variable and tune a color depending on the used platform/browser.

Let me know if you have any other ideas where I can do it with the plugin source code