staskobzar / vue-audio-visual

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

ref-link error .load() on AvBase.js #32

Closed rad027 closed 2 years ago

rad027 commented 4 years ago

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 like if (this.refLink) { audio = document.getElementById('audioPlayer') } and I added id attribute on my audio tag to catch and call the player to play it. and I also added audio.crossOrigin = "anonymous" to bypass the CORS error

i hope this bug would be fixed on next update. im using my own fixed on modifying the AvBase.js

staskobzar commented 4 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.

rad027 commented 4 years ago

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.

staskobzar commented 4 years ago

Do you have audio element with reference defined like this?

<audio ref="player" src="music.mp3"></audio>

Which browser?

rad027 commented 4 years ago

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.

staskobzar commented 4 years ago

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

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.

rad027 commented 4 years ago

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 : image

staskobzar commented 4 years ago

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?

staskobzar commented 4 years ago

looks like you are missing closing parentheses between player and autoplay:

<audio ref="player autoplay="true"
rad027 commented 4 years ago

heres the actual code

image

staskobzar commented 4 years ago

It still works for me. Try to use another (local) mp3 file to see if the problem is which audio source.

staskobzar commented 4 years ago

I am going to close this ticket. Feel free to re-open if you have updates. Have a good day

happyshows commented 3 years ago

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.

happyshows commented 3 years ago

@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?

staskobzar commented 3 years ago

@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?

staskobzar commented 3 years ago

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.