search

staskobzar / vue-audio-visual

VueJS audio visualization components
MIT License
693 stars 111 forks source link

Safari solution #49

Closed pasloc closed 3 years ago

pasloc commented 3 years ago

I think I got a solution for the safari bug from here https://github.com/otalk/hark/issues/38

The problem is in AvBase and AvMedia. Safari works if you only create one instance of AudioContext and analyser like this:

    this.audioCtx = this.audioCtx || new AudioContext()
    this.analyser = this.analyser || this.audioCtx.createAnalyser()

But I don't know if this will cause other problems. Somehow you can't create a new instance of an AudioContext in safari in some cases. The behavior seems random to me :/

staskobzar commented 3 years ago

Hello, The problem was supposed to be fixed already. Please, see https://github.com/staskobzar/vue-audio-visual/issues/25

Do you still have issued with Safari? There is a demo that works in my case for Safari: https://staskobzar.github.io/vue-audio-visual/

Please, let me know if the problem still there in your case. Thanks

pasloc commented 3 years ago

This demo works just fine, but I'm doing different things with the AvBars component. In my case I want to visualize the microphone input to the user. So I have no MediaStream if the user mutes his microphone or just entered the site. I'm binding the stream via :media="stream".

I've created a demo for you: https://rockschule-workshops.dev.mediadesq.com/avbars-demo

If you active your mic you will see that it works at first. Even multiple times. But if you keep activating and deactivating your mic you will get "TypeError: null is not an object (evaluating 'this.audioCtx.createAnalyser')" after some tries (needed number seems random to me).

Interestingly you cannot instantiate a new AudioContext after this error was thrown. If I'm trying to create a new AudioContext object in the console I'm getting null.

As I'm writing this I've noticed that you get the same problem after typing three times "a = new AudioContext(); a.createAnalyser();" into the dev console.

staskobzar commented 3 years ago

Thanks pasloc, I will try this as soon as I can. If you have tested it and you see that your patch fixes the issue, please, feel free to create a pull request.

Have a good day!

pasloc commented 3 years ago

I've created the pull request, but please keep in mind, that this is my first pull request ever on github. So do not expect best quality :P https://github.com/staskobzar/vue-audio-visual/pull/52

staskobzar commented 3 years ago

PR is merged. Thank you for the contribution. Just released v2.1.1