如何将mp3文件从Java后台发送到前端，并在Vue.js前端播放

@GetMapping("/audio")
public ResponseEntity<byte[]> getAudio() throws IOException {
    // 读取mp3文件为字节数组
    File file = new File("path/to/mp3/file.mp3");
    byte[] audioBytes = Files.readAllBytes(file.toPath());

    // 设置响应头，告诉浏览器返回的是音频文件
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
    headers.setContentDispositionFormData("attachment", "file.mp3");

    // 返回字节数组作为响应
    return new ResponseEntity<>(audioBytes, headers, HttpStatus.OK);
}

<template>
  <div>
    <audio ref="audioPlayer" controls></audio>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在组件加载完成后，获取音频文件并播放
    this.loadAudio();
  },
  methods: {
    loadAudio() {
      // 后台接口返回的mp3文件URL
      const audioUrl = "/api/audio";

      // 获取audio标签的DOM元素
      const audioElement = this.$refs.audioPlayer;

      // 设置audio标签的src属性为mp3文件URL
      audioElement.src = audioUrl;

      // 播放音频
      audioElement.play();
    },
  },
};
</script>