Not rendering on iOS or macOS Safari

szokeptr commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

andreipopovici commented 4 years ago

After spending way too many hours, I realized why the fix in https://github.com/staskobzar/vue-audio-visual/pull/33 was not working on mobile Safari. It's a bug that has ben acknowledged but not fixed yet: https://bugs.webkit.org/show_bug.cgi?id=203435

Nothing more to do here 🤷‍♂️

staskobzar commented 4 years ago

Good, thank you @andreasvirkus This one took me many hours too but I could not find it. I do appreciate your contribution.

I'm closing this ticket. Have a good week-end!

andreipopovici commented 3 years ago

It looks like that bug was fixed via https://bugs.webkit.org/show_bug.cgi?id=211394 in iOS 13.6 upward, but I didn't have a chance to test and see if it's fixed this particular issue. Hopefully it did!

staskobzar commented 3 years ago

Good! hopefully it does. Thank you

staskobzar / vue-audio-visual

Not rendering on iOS or macOS Safari #25