Import Wavesurfer from 'react-wavesurfer' Ĭlass M圜omponent extends React. In my bundle config this is setup to export to window.WaveSurfer require( 'wavesurfer.js') You can also easily extend the core functionality by hooking into the wavesurfer.js callbacks (by defining callback props). FALSE, If set to true resize the waveform, when the window is resized. The options passed in such as height and waveColor can be customised using the wavesurfer.js documentation. The WaveSurfer.create () method comes from the external wavesurfer.js file. Basic Usageįor more advanced examples check the example directory. First of all, you need to insert the wavesurfer.js library into your HTML page. We can start by defining a function, which returns a new Wavesurfer instance. Note to contributors: The development workflow has changed, please refer to the Developing & contributing section below for more info. Note: This version does not work for the version 2 (beta) of wavesurfer.js – A version of react-wavesurfer that will work with the new version is in the making. after that you can load a MP3 as an example. Read more about Prerequisites and common pitfalls at the bottom of this document. Step 2 : JS configs First of all we are going to define the WaveSurfer player and add the Elan plugin to its config. Wavesurfer plugins need to be attached to this global variable for the react component to work. Note: This component expects wavesurfer.js to be available as a global variable ( WaveSurfer). You need to explicitely import the correct files before using the react component! Note: Since v0.8.6 react-wavesurfer no longer comes bundled with the wavesurfer files. Includes support for the timeline, minimap and regions plugins.
0 Comments
Leave a Reply. |