Next.js 從 url 為客戶端的 wavesurfer 加載音頻

Question

我希望能夠使用 wavesurfer.js 收聽和渲染音頻峰值，但是當我從外部源加載 url 時，波形加載為一條扁平線。 我通過下載相同的音頻文件並將其保存在我的公共/靜態資產文件夾中進行了測試，所以我知道 wavesurfer 能夠渲染峰值，無論是對於這個文件還是在我的應用程序中，只要 url 正在利用next.js static 資產服務。

我認為這可能是一個 xhr 問題，但即使在仔細研究了 wavesurfer 和 nextjs 文檔之后我仍然感到很迷茫。

我認為這可能是一個 xhr 問題的原因是，除非我在 wavesurfer 初始化選項中指定 MediaElement 的后端，否則在使用外部 url 時我無法渲染任何音頻。

從 public/assets 文件夾中獲取的文件渲染波形的選項：

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

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

  normalize: true,
  hideScrollbar: true,

});

什么時候工作

以及我必須添加的內容才能從外部 url 獲得扁平線加載

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

});

以及它的樣子……：/在這里輸入圖片描述

Wavesurfer.js 是一個客戶端庫，因此要使其中任何一個正常工作，波形組件將由 next/dynamic 動態加載。

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

我的目標功能是從外部 api 獲得的外部 url 渲染波形，因此將文件下載到公共文件夾並不是一個真正的選擇。

編輯 - -

只是想補充一點，基本的 html 元素能夠從 wavesurfer 被 cors 阻止的同一個 url 加載和播放音頻

-- 感謝@juliomalves，關於提供mwe/reprex的建議

stack blitz 在這里thts 壞了我猜... codeSandbox
https://codesandbox.io/s/holy-firefly-i6pyzw?file=/src/components/Songs.tsx

或者如果你更喜歡在本地復制，git repo here -
https://github.com/heresy0-0y/wavesurfer-nextjs/tree/main/client

Answer 1

我最終使用 cors-anywhere 來代理 wavesurfers 請求

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