Closed rad027 closed 2 years ago
Hello, Thanks for the feedback. Please, give me your template code of your audio and component elements so that I can reproduce it.
For CORS, please check "cors-anonym" property in documentation.
I used
<audio` ref="player" autoplay="true" preload="auto" :src="stream_url + '/stream'"> <av-line :line-width="2" line-color="lime" ref-link="player"
It will show the error on console log that .load() cant be called because the this.$parent.$refs[this.refLink]
is returning as undefined.
Do you have audio element with reference defined like this?
<audio ref="player" src="music.mp3"></audio>
Which browser?
I updated my recent comment i had a typo.
Im using google chrome latest version.
And also, the src i am using is a shoutcast v2 stream link.
This code works for me in Chrome:
<template>
<div>
<audio ref="player" controls autoplay="true" preload="auto" :src="path + '.mp3'" >
</audio>
<av-line
:line-width="2"
line-color="lime"
ref-link="player"
cors-anonym
></av-line>
</div>
</template>
<script>
export default {
name: 'av-line-demo',
data () {
return {
path: 'file_example_MP3_1MG'
}
}
}
</script>
<style scoped>
</style>
Also, please note, that prop "cors-anonym" works only with components that generate their audio elements. When you use "refs" it means that audio element is created elsewhere in parent context and setting "crossOrigin" parameter has to be done with external audio element as any other.
What vue js version are you using ?
I tried that cors-anonym
before modifying the AvBase.js
but im still getting the same error.
here's my recent code that has an error
component :
<audio ref="player autoplay="true" preload="auto" :src="stream_url + '/stream'"> <av-line :line-width="2" line-color="lime" ref-link="player" cors-anonym
here's the error :
vue version 2.6.11. I do not think it really matters.
cors-anonym
is useless when using ref audio element.
Do you actually close your audio element?
looks like you are missing closing parentheses between player and autoplay:
<audio ref="player autoplay="true"
heres the actual code
It still works for me. Try to use another (local) mp3 file to see if the problem is which audio source.
I am going to close this ticket. Feel free to re-open if you have updates. Have a good day
This code works for me in Chrome:
<template> <div> <audio ref="player" controls autoplay="true" preload="auto" :src="path + '.mp3'" > </audio> <av-line :line-width="2" line-color="lime" ref-link="player" cors-anonym ></av-line> </div> </template> <script> export default { name: 'av-line-demo', data () { return { path: 'file_example_MP3_1MG' } } } </script> <style scoped> </style>
I replaced the src with a valid url which works in av-bars standalone and still get the client.js?06a0:97 TypeError: Cannot read property 'load' of undefined
anyway, using chrome/safari does not matter to me.
@staskobzar any idea why it impacts both of us? and could you rerun the sample code with the latest version and let me know if it still work on your side?
@happyshows Can you provide the code that does not work, please? Also, do you have something in Network tab of the console? is you url is loaded fine?
I can reproduce it when the src URL and the site URL are different. For example audio src is https://1.1.1.1:8080 and the site where plugin runs is https://5.5.5.5:9090 Then I have error in console:
MediaElementAudioSource outputs zeroes due to CORS access restrictions for
If you have the same problem, then try to add to your audio element attribute crossorigin="anonymous"
.
The server that supplies audio also need to be configured send well-formed Access-Control-Allow-Origin
header with audio response.
As i review the code. I saw that this code no longer working on vuejs2
if (this.refLink) { audio = this.$parent.$refs[this.refLink] }
I changed it to something static likeif (this.refLink) { audio = document.getElementById('audioPlayer') }
and I addedid
attribute on my audio tag to catch and call the player to play it. and I also addedaudio.crossOrigin = "anonymous"
to bypass the CORS errori hope this bug would be fixed on next update. im using my own fixed on modifying the AvBase.js