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 "" element attribute "crossorigin".
When you use high level interface functions like "AVLine(...)" this attribute is not enabled. You can use composable function to build and access your "" element.

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