冲浪者标签 (<wavesurfer>) 不起作用

Question

我想使用wavesurfer.js并使用<wavesurfer>标签，但我不知道如何以及无论我做什么，声音不加载。

<wavesurfer
data-url="http://127.0.0.1:8000/media/post/audio/4095c5f534c74f10951da8259772b549.mp3"
data-plugins="minimap,timeline"
data-minimap-height="30"
data-minimap-wave-color="#ddd"
data-minimap-progress-color="#999"
data-timeline-font-size="13px"
data-timeline-container="#timeline"
></wavesurfer>
<div id="timeline"></div>

问题在哪里?

Answer 1

如果你正在使用react，那么你必须使用

来安装'wavesurfer-react'的依赖项。

npm install wavesurfer-react

您可以使用

将它导入到jsx文件中

import {WaveForm, WaveSurfer} from "wavesurfer-react";

现在WaveSurfer标签将在您的代码中访问。希望这对你有帮助!