I have an Issue where my Audioplayer i created is working in Mozilla but not in Chrome it causes that error
app.js:24303 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
setAnalyzer @ app.js:24303
app.js:24303 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
setAnalyzer @ app.js:24303
app.js:10456 [Vue warn]: Unhandled error during execution of mounted hook
at <LineAnimation line-color="#fed700" can-width=350 can-height=150 ... >
at <TrackCenter>
at <RouterView>
at <Tracks onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy > >
at <RouterView>
at <Seasons>
at <App>
warn @ app.js:10456
app.js:24305 Uncaught (in promise) DOMException: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.
at Proxy.setAnalyzer (https://URL/js/app.js:24305:29)
at Proxy.mounted (https://URL/js/app.js:24473:10)
at callWithErrorHandling (https://URL/js/app.js:10573:22)
at callWithAsyncErrorHandling (https://URL/js/app.js:10582:21)
at Array.hook.__weh.hook.__weh (https://URL/js/app.js:13082:29)
at flushPostFlushCbs (https://URL/js/app.js:10771:47)
at flushJobs (https://URL/js/app.js:10816:9)
i already tryed to use the diffeent webkits for the AudioContext but nothing is goind to work or maybe i need to patch that in some other way in my App?
i wrote something like this
const Plugin = {}
Plugin.install = function (Vue) {
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame
Vue.component(LineAnimation.name, LineAnimation)
}
and instaled it like this to my App.
const app = createApp({
components: {
Seasons,
Player,
Plugin,
routes,
},
})
app.use(Plugin)
app.use(router)
app.mount("#app")
Where i parse in the AudiContext is in here.
setAnalyzer: function () {
this.audioCtx = this.audioCtx || new AudioContext()
this.analyzer = this.analyzer || this.audioCtx.createAnalyser()
const src = this.audioCtx.createMediaElementSource(this.audio)
src.connect(this.analyzer)
this.analyzer.fftSize = this.fftSize
this.analyzer.connect(this.audioCtx.destination)
},
If somebody has an Idea how to solve this i would be really glad. If you need more of the code to get more information just ask!