import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.js
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //导入时间轴插件
drawPlay=()=>{
        this.wavesurfer = WaveSurfer.create({
            container: '#audioChart',//容器
            waveColor: '#1DE3FA',//波形图颜色
            progressColor: '#159faf',//进度条颜色
            backend: 'MediaElement',
            mediaControls: false,
            audioRate: '1',//播放音频的速度
            plugins: [
                //时间轴插件
                // Timeline.create({
                //     container: '#wave-timeline'
                // }),
                // 光标插件
                // CursorPlugin.create({
                //     showTime: true,
                //     opacity: 1,
                //     customShowTimeStyle: {
                //         backgroundColor: '#000',
                //         color: '#fff',
                //         padding: '2px',
                //         fontSize: '10px'
                //     }
                // }),
        });
        // 特别提醒：此处需要使用require(相对路径)，否则会报错
        this.wavesurfer.load(require('../../static/testAudio/Last_Stop.mp3'));
这里要加require，否则波形图不显示或者会报错！！！！
 
this.wavesurfer.load(require('../../static/testAudio/Last_Stop.mp3'));
                    一、效果二、使用1、npm 安装npm install wavesurfer.js --save2、引入import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.jsimport Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' //导入时间轴插件3、绘制drawPlay=()=>{        this.wavesurfer = WaveSurf
				
本文使用React利用Html 的audio组件 制作一个简单的音乐播放器；
本文代码参考博文：https://blog.csdn.net/sinat_39626276/article/details/81034385有兴趣的可以去这个博主那里看代码；
贴代码 先是 jsx部分：
import React, { useState, useEffect, useRef } from 'react';
import styles from './Index.module.scss';
import...
  <meta charset="UTF-8">
  <title>可视化音频</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
　　1.1 引
　　 人生中第一份工作公司有语音识别业务，需要做一个web网页来整合语音引擎的标注结果和错误率等参数，并提供人工比对的语音标注功能（功能类似于TranscriberAG等），（博主有点话痨。。。适应适应，原谅我）
　　可以直接读第二行，简单来说，我用wavesurfer.js绘制波形，并提供语音标注的文本框进行音频标注，简易页面如下：
　　1.2...
				
前言：vue框架嵌入使用WaveSurfer.js的方法，详见此文章：https://blog.csdn.net/zrcj0706/article/details/104635357
1、WaveSurfer.create时的参数配置如下代码中的注释
  this.wavesurfer = WaveSurfer.create({
        // 应该在其中绘制波形的CSS选择器或HTM...
 React组件包装器
该组件最初基于 （及其他）在所做的工作。 在Wavesurfer-js发布了版本2之后，对react-wavesurfer的预测变得不再维护，我决定启动自己可以更好控制的版本会更安全。
版本4.x
 为了使该组件更好地与基本项目保持一致，我决定跳过版本2并直接转到版本3。现在，wavesurfer在版本4中，我们进行了必要的更新，并且还在v4上。
请报告您遇到的任何，我们将尽力解决。
 这是一个基本的演示，此回购中包含示例代码：
麦克风插件示例
区域插件示例
时间轴示例
大文件示例
生成PCM数据示例
频谱图示例
这是我正在使用此代码的个人项目的示例：
 Casts.co （以前称为Clipps）
 Clipps Player（演示）
npm install @dschoon/react-waves
				
Wavesurfer React
 一个简单的包装，包裹着一个很棒的库，名为 。
 该软件包的目的是提供基于waveurfer.js API的抽象，并使其尽可能类似于其维护者提供的React方式。
 // Plugins prop format
// now you have to pass always an array of objects, where each can contain three properties,
// only one of them is required - plugin;
// plugin property is a plugin class, imported from wavesurfer.js
// example:
import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.
				
前言：vue中嵌入使用wavesurfer.js的教程详见：https://blog.csdn.net/zrcj0706/article/details/104635357
1、在使用wavesurfer.js插件时，可以设置各种监听事件，比如播放完毕触发什么方法，设置静音时触发什么方法等等，该插件官网有自定义好的各大事件的识别，只需要使用on方法设置监听即可，如下代码：
//音频暂停时的监...
  <div class="mixin-components-container">
    <el-row>
      <el-card class="box-card" style="text-align: left">
        <div slot="header" class="clearfix title">
          <span>Vue框架中嵌入使用wavesurfer.
				
要在 React 中展示波形图，可以使用第三方的 JavaScript 库，例如 WaveSurfer.js 或者 Waves.js。这些库提供了一个简单的 API，可以让你在 React 组件中轻松地实现波形图的展示和交互。
以下是一个使用 WaveSurfer.js 在 React 中展示波形图的示例代码：
1. 安装 WaveSurfer.js：
npm install wavesurfer.js
2. 创建一个 WaveSurfer 实例：
```javascript
import WaveSurfer from 'wavesurfer.js';
const waveform = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'red',
  progressColor: 'purple',
  height: 200,
  barWidth: 3,
  barRadius: 3,
3. 在 React 组件中使用 WaveSurfer：
```javascript
import React, { useEffect, useRef } from 'react';
function Waveform() {
  const waveformRef = useRef(null); // 用于保存 WaveSurfer 实例
  const audioRef = useRef(null); // 用于保存 audio 元素
  useEffect(() => {
    const waveform = waveformRef.current;
    waveform.on('ready', () => {
      waveform.play();
    waveform.load(audioRef.current); // 加载音频文件
    return () => {
      waveform.destroy(); // 卸载 WaveSurfer 实例
  }, []);
  return (
      <div id="waveform" ref={waveformRef}></div>
      <audio src="audio-file.mp3" ref={audioRef}></audio>
在这个示例中，我们创建了一个 WaveSurfer 实例，并在 React 组件中使用它来展示音频波形图。我们通过 `container` 属性指定了波形图的容器元素，通过 `waveColor` 和 `progressColor` 属性指定了波形图的颜色，通过 `height` 属性指定了波形图的高度，通过 `barWidth` 和 `barRadius` 属性指定了波形图中每个音频帧的宽度和圆角半径。
在 React 组件中，我们使用了 `useRef` 钩子来保存 WaveSurfer 实例和 audio 元素的引用。在 `useEffect` 钩子中，我们监听了 WaveSurfer 实例的 `ready` 事件，并在事件回调函数中播放了音频文件。我们还调用了 `waveform.load(audioRef.current)` 方法来加载音频文件，同时在组件卸载时调用了 `waveform.destroy()` 方法来卸载 WaveSurfer 实例。
注意，在使用 WaveSurfer.js 展示波形图时，你需要将音频文件加载到一个 `<audio>` 元素中，并将该元素的引用传递给 WaveSurfer 实例的 `load` 方法。