You can find instructions on how to import it on their website I am using yarn to add my packages to my app with yarn add wavesurfer.js. Now it is time to import Wavesurfer.js and initialise it in out components. Along with the WaveContainer, the Wave component is a styled component thats is composed of a. You may be wondering why we have imported the Wave component this is the element we will append Wavesurfer.js to and as you will see later, is the reason why we have ids added to bother Wave component and audio element. I’ve gone for the very basic Waveform, but you can call it whatever you wish: 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. 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.
0 Comments
Leave a Reply. |