Visualizer not visualizing audio with a url

[roseaneesha]

The audio plays, but the visualizer doesn't seem to show the waves. This only happens if the source audio is a url (eg:https://www.soundjay.com/human/sounds/heartbeat-01a.mp3) Works perfectly if the audio is added as a file in the local system

[staskobzar]

It is blocked by CORS policy. I will work on the patch. Thanks for the reports

[staskobzar]

@roseaneesha I have made some improvements in the module to make sure CORS is enabled during fetch. But the main problem you have is that you source is not returning "Access-Control-Allow-Origin" header, thus restricting access to the source from ajax requests

[clemenceroumy]

👋🏻 Hello @staskobzar, I still have trouble using the component with a spotify url source audio (ex: https://p.scdn.co/mp3-preview/805bbe52bc7f8412e9027579787251375e6b847d?cid=11381bbca5f3479f9462199118c15ad9), having an error MediaElementAudioSource outputs zeroes due to CORS access restrictions for https://p.scdn.co/mp3-preview... in the console Is there any way to make this work ?

[staskobzar]

Hello @clemenceroumy CORS access controll can be set with "

To make your link work with AVLine you would do something like that:

<script setup lang="ts">
import { ref } from 'vue'
import { makeLineProps } from '@/composables/useProps'
import { useAVLine } from '@/composables/useAVLine'

const props = defineProps(makeLineProps())
const player = ref(null)
const canvas = ref(null)

const spotifyURL = ref('https://p.scdn.co/mp3-preview/805bbe52bc7f8412e9027579787251375e6b847d?cid=11381bbca5f3479f9462199118c15ad9')

useAVLine(player, canvas, props)
</script>

<template>
  <audio ref="player"
    crossorigin="anonymous"
    :controls="true"
    :src="spotifyURL" />
  <canvas ref="canvas" />
</template>

Note crossorigin value in audio element:

Basically, all high level functions use compable function to build plugin. You can check "src/components" folder to see how it works for all the components.

[clemenceroumy]

@staskobzar Oh yeah, that works well ! Sorry for the inconveniance and thank you for your quick reply and work :)

[drewjgray]

@staskobzar do you have a patch for v2.5.0 for use with Vue 2? I am also blocked by CORS using a url. Response headers have CORS enabled but the request is set to no-cors.

[staskobzar]

@drewjgray v2 has is

https://github.com/staskobzar/vue-audio-visual/tree/v2#common-props