Wavesurfer.js funktioniert gut, aber react-wavesurfer hat Probleme

Question

Ich habe in einem Straßensperre in meinem Web-Projekt, das Wavesurfer verwendet. Ich habe wavesurfer.js und react-wavesurfer als Knotenmodule in meinem Projekt installiert. Wavesurfer.js scheint gut zu funktionieren, aber react-wavesurfer scheint auf Probleme zu stoßen, die ich schwer zu debuggen finde. Der folgende Code:

Erzeugt nur die erste Wellenform aus dem Aufruf von this.makeWave(). Beim Versuch, die React-Signalform zu erstellen, wird ein Fehler zurückgegeben: Uncaught TypeError: this._wavesurfer.init is not a function. Ich verwende browserify, um meine Javascript-Abhängigkeiten zu bündeln.

Jede Hilfe wäre sehr willkommen!

Answer 1

Wenn Sie immer noch Probleme damit haben, können Sie Ihre eigene Waveform-Komponente erstellen, die im Wesentlichen die gleiche Last verarbeitet. Hier ist ein einfaches Beispiel, das für mich gearbeitet

1. installieren wavesurfer.js manuell:

# taken from here: https://wavesurfer-js.org/ 
npm install --save wavesurfer.js@2.0.0-beta01 

2. Erstellen Sie eine benutzerdefinierte Kurven Komponente:

// components/waveform.js 
import React from 'react' 
import ReactDOM from 'react-dom' 
import WaveSurfer from 'wavesurfer.js' 

export default class Waveform extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 

    } 
    } 
    componentDidMount() { 
    this.$el = ReactDOM.findDOMNode(this) 
    this.$waveform = this.$el.querySelector('.wave') 
    this.wavesurfer = WaveSurfer.create({ 
     container: this.$waveform, 
     waveColor: 'violet', 
     progressColor: 'purple' 
    }) 
    this.wavesurfer.load(this.props.src) 
    } 
    componentWillUnmount() { 

    } 
    render() { 
    return (
     <div className='waveform'> 
     <div className='wave'></div> 
     </div> 
    ) 
    } 
} 

Waveform.defaultProps = { 
    src: "" 
} 

3. und dann in der Stammkomponente:

// components/my-parent-component.js 
import Waveform from 'path/to/components/Waveform' 
... 
render() { 
    return <div clasName='parent-component'><Waveform src={'/path/to/audio/src.mp3'} /></div> 
} 

Answer 2

React-Wavesurfer behandelt die Erstellung der Wavesurfer-Instanz selbst. So können Sie den makeWave Teil weglassen.

import React, { Component } from 'react'; 
import WaveSurfer from 'react-wavesurfer'; 

export default class WaveComponent extends Component { 
    render() { 
    return (
     <WaveSurfer audioFile="/path/to/audio.mp3" /> 
    ); 
    } 
} 

Dieser Code funktioniert für mich. Wenn dies nicht funktioniert, posten Sie bitte die genauen Versionen von wavesurfer.js und react-wavesurfer, die Sie verwenden.

Beachten Sie bitte auch, dass Sie die Datei wavesurfer.js als globale Variable verwenden müssen, wenn Sie einen Modulbündler verwenden. (Dies wird hoffentlich in naher Zukunft nicht mehr notwendig sein) - für genauere Anweisungen siehe bitte https://github.com/mspae/react-wavesurfer#prerequisites-and-common-pitfalls)