wavesufer.js获取文件流

Wavesurfer.js是一个用于可视化音频波形的强大JavaScript库，常用于音乐播放、音频分析等场景。若你想使用Wavesurfer.js从文件流加载音频数据，你可以按照以下步骤操作：

1. 首先，你需要创建一个`WaveSurfer`实例，并配置一些基础选项，如容器ID、插件列表等：

import WaveSurfer from 'wavesurfer.js';

const waveSurfer = WaveSurfer.create({
  container: '#waveform', // 容器元素ID
  audioUrl: 'path/to/audio/file', // 或者是一个可以读取流的数据URL
  // 其他配置项...
});

2. 如果你有一个HTTP响应或者Blob对象代表文件流，你可以直接设置`audioUrl`属性为这个流，而不是文件路径：

fetch('http://example.com/audio.mp3')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => new Blob([arrayBuffer], { type: 'audio/mpeg' }))
  .then(blob => waveSurfer.load(blob))
  .catch(error => console.error('Error loading audio:', error));

这里我们使用了`fetch`获取文件流，然后转换成ArrayBuffer，再构建Blob对象。