Help me!!! Why can firefox display normally but chrome cannot?

[KunCheng-He]

I am using this project component in a vue project, here is my code.

<script lang="ts" setup>
import { ref } from "vue"
import { useAVLine } from "vue-audio-visual"

const player = ref(null)
const canvas = ref(null)

useAVLine(player, canvas, {
  src: "http://127.0.0.1:13331/get-audio/?path=/upload_files/2024/02/05/test2_unzip/z1.mp3",
  canvWidth: 600,
  canvHeight: 120,
  lineColor: ["#FFF", "rgb(0,255,127)", "#00f"]
})
</script>

<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-divider content-position="left">原始音频</el-divider>
      <audio
        class="audio-player"
        ref="player"
        crossorigin="anonymous"
        src="http://127.0.0.1:13331/get-audio/?path=/upload_files/2024/02/05/test2_unzip/z1.mp3"
        controls
      />
      <div class="audio-canvas-layout"><canvas class="audio-canvas" ref="canvas" /></div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.audio-player {
  width: 100%;
  height: 100%;
}
</style>

I use Firefox and Chrome browser versions as shown in the figure below.

The above code displays normally in Firefox, but in Chrome, the audio component cannot be displayed normally.

I am not familiar with vue and front-end related knowledge, I did not search for the answer to this question, I hope you can help me find the problem, thank you very much.

[staskobzar]

Hello Try to check web-developer javascript console and see if there any errors or warnings. Sometimes it is CORS problem when audio source has different host or port then the page with the plugin.

[KunCheng-He]

@staskobzar Thank you very much But I don't think it's a CORS issue, because in Chrome, the network shows that the audio requests are responding normally and not being intercepted.

In addition, when loading the page, I did not find any abnormal output in Chrome's console.

[staskobzar]

it is hard to say then what is wrong. However, you are using source in <audio> element. You should use it only in useAVLine function.

Also, try to use different source and see if it makes any difference. Just to make sure the problem is not audio source

[staskobzar]

@KunCheng-He oups, sorry I mean, you shoud use ref is source of audio element like it is done here: https://github.com/staskobzar/vue-audio-visual/blob/master/src/components/AVLine.vue

[KunCheng-He]

I have taken your advice and tried to change the audio link, but the result is still the same. It works fine in Firefox, but still not working properly in Chrome.

I find this question quite strange, and I currently don't have any idea about it. Thank you for your help.

[staskobzar]

try with a different source and if it works try to compare the traffic with console networking tab. Maybe there are some headers or content type or something else