![]() ![]() In this example, I am using Class-based composition, as the Wavesurfer.js library works best when being bound to a JavaScript class and we have access to the this keyword - if you want to find out more about this you can read one of these two great articles here and here. They work in a very similar way to CSS, so you should be able to translate the minimal styling I use into CSS very easily. If you are unfamiliar with these, you can find out more here. I’m assuming you have a pretty good understanding of React, and for this example I will be using Styled Components. Well, look no further! Below I will outline how you can get this Wavesurfer.js up and running in your React app in a few short steps, as well as some help understanding some key elements of the API. You will then likely discover that the very useful react-wavesurfer module that uses the main library is no longer maintained on Github and then begin wondering where to turn next. However, after a bit of time exploring their website, you will struggle to find any decent examples with React and likely turn to Google to search for “ React wavesurfer.js” like I did. ![]() the Regions component needs etc.One of the solutions is to use a package called Wavesurfer.js a library built using the Web Audio API and HTML5 Canvas to bring you super customisable audio visualisation. The plugin components require window.WaveSurfer to have all the respective plugin properties set. They augment the wavesurfer.js object, this is the reason why the root wavesurfer.js component does not include the wavesurfer.js code. The (optional) plugin components do include the specific plugin code of wavesurfer.js. You need to include it in your project yourself. This library does not include wavesurfer.js itself. npm run build – Lint and build distributable files.npm start – Start development server (webpack-dev-server) at localhost:8080.git/hooks/pre-commit once in the root directory of this project before commiting. To set it up run chmod +x pre-commit.sh & ln -s. Please apply the precommit hook before commiting, it will lint and format your code before it is saved in version control. Please install it globally with npm install yarn -global if you haven't already done so. This project uses yarn as package manager. ![]() Please read the information below to find out how to start. Thank you for contributing to this project! Your help is very welcome. In my bundle config this is setup to export to window.WaveSurfer require ( 'wavesurfer.js' ) import React from 'react' import ReactDOM from 'react-dom' import Wavesurfer from 'react-wavesurfer' class M圜omponent extends React. You can also easily extend the core functionality by hooking into the wavesurfer.js callbacks (by defining callback props). Basic Usageįor more advanced examples check the example directory. 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. Read more about Prerequisites and common pitfalls at the bottom of this document. 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. I recommend using wavesurfer.js version 2 as it makes it much easier to use with React. Please note I'm not maintaining this project anymore. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |