Next.js 从 url 为客户端的 wavesurfer 加载音频

Question

我希望能够使用 wavesurfer.js 收听和渲染音频峰值，但是当我从外部源加载 url 时，波形加载为一条扁平线。我通过下载相同的音频文件并将其保存在我的 public/static 资产文件夹中进行了测试，所以我知道 wavesurfer 能够渲染峰值，无论是对于这个文件还是在我的应用程序中，只要 url 正在利用 next.js 静态资产服务。

我认为这可能是一个 xhr 问题，但即使仔细研究了 wavesurfer 和 nextjs 文档，我仍然感到很迷茫。

我认为这可能是 xhr 问题的原因是我在使用外部 url 时无法渲染任何音频，除非我在 wavesurfer 中指定 MediaElement 的后端初始化选项。

从 public/assets 文件夹中获取的文件渲染波形的选项：

 waveform.current = WaveSurfer.create({
  container: "#waveform",

  waveColor: "#8D86C9",
  progressColor: "#242038",

  normalize: true,
  hideScrollbar: true,

});

when it works

以及我必须添加的内容才能从外部加载扁平线 url

waveform.current = WaveSurfer.create({
  container: "#waveform",
  backend: 'MediaElement',
  waveColor: "#8D86C9",
  progressColor: "#242038",
  normalize: true,
  hideScrollbar: true,

});

那看起来像什么……:/ enter image description here

Wavesurfer.js 是一个客户端库，因此要使其正常工作，next/dynamic.

会动态加载波形组件

const Waveform = dynamic(() => import('./Waveform'), {ssr: false})

我的目标是从外部 url 渲染波形，我从外部 api 获得，因此将文件下载到 public 文件夹不是真的不是一个选择。

编辑---

只是想补充一点，基本的 html 元素能够从 url 加载和播放来自

的 cors 阻止 wavesurfer 的音频

-- 谢谢@juliomalves，提供 mwe/reprex

的建议

~~stack blitz here~~ thts broken i guess...codeSandbox
https://codesandbox.io/s/holy-firefly-i6pyzw?file=/src/components/Songs.tsx

或者，如果您更喜欢在本地复制，git 在这里回购 -
https://github.com/heresy0-0y/wavesurfer-nextjs/tree/main/client

Answer 1

我最终使用 cors-anywhere 来代理 wavesurfers 请求

https://github.com/Rob--W/cors-anywhere

Next.js 从 url 为客户端的 wavesurfer 加载音频

Next.js load audio from url for wavesurfer on the client side

xmlhttprequest

reactjs

web-audio-api

wavesurfer.js

next.js