Not rendering on iOS or macOS Safari

[szokeptr]

I am attaching the circle visualizer to an existing player that has a streaming mp3 as its source.
The visualization is appearing perfectly on Google Chrome and Firefox (both on macOS), but it fails to render on desktop (Version 13.0.3 (15608.3.10.1.4)) or iOS (13.3) Safari and there are no error messages logged.

Please let me know if there is any other info I can provide.

Code sample:

<av-circle
    ref-link="player"
    :canv-width="500"
    :canv-height="500"
    :line-width="0.5"
    :radius="125"
    :rotate-graph="true"
    :progress="false"
    :bar-color="['#f7ac46', '#f7c532']"
    :bar-width="4"
    v-show="isPlaying"
/>

[staskobzar]

Hello,
It also may depend on the <audio\> element. What attributes of the audio element do you use?
Also, does it works without v-show condition?

[szokeptr]

My audio tag looks like this:

<audio 
    ref="player" 
    :src="audioSource" 
    :title="radio.now_playing.song.title" 
    crossorigin="anonymous"
></audio>

audioSource is a streaming mp3 file, title is a plain string with the song title.

Also, it's not working without the v-show condition either (I removed the directive entirely).

[szokeptr]

Quick note: I tried pulling the canvas contents with the toDataURL method and it appears to be a static un-styled blue circle all the time.

[staskobzar]

I can not find the way to fix it for safari. Spent whole day playing with different parameters and re-writing code trying to fix it.
I am sorry but I have to leave it like this until I find any other way to fix it or may be Apple will do something with Safari. May be someone will contribute a fix.

[andreasvirkus]

Would you mind replacing the wontfix label with help wanted?
(I think that) the wontfix label sends a signal that you have no intention of fixing this and it works as expected, whereas help wanted shows you're willing to have this fixed, but don't have the resources for it yourself atm.

[staskobzar]

Would you mind replacing the wontfix label with help wanted?
(I think that) the wontfix label sends a signal that you have no intention of fixing this and it works as expected, whereas help wanted shows you're willing to have this fixed, but don't have the resources for it yourself atm.

good point. changed. thanks

[andreipopovici]

For macOS Safari at least, the AudioContext needs to be created on "user interaction" i.e. inside the context of a click event. This would require some significant refactoring. Both the audio element that gets created and the one attached via refLink need an onclick listener, and setAnalyser needs to be called inside that listener, not in mount().

I'll play around and see if I can fix this and open a PR.

[staskobzar]

@andreipopovici thank you. Your patch works great with my tests (macOS/Safari 13.1). Just merged. Will be released in ver 2.0.1