![]() Wavesurfer play button update#This approach lets us rely on React’s diffing and rerendering to update the DOM outside of the Wavesurfer instance, in the case of the play/pause button. There is a downside with this implementation: we must duplicate Wavesurfer’s own isPlaying() state into React with toggleIsPlaying(()), creating potentially two sources of truth with React’s state and Wavesurfer’s state. If you save and refresh the page, you will see the waveform has been rendered on the page.Import React, export default Waveform This is temporary and in the final version I would pass this file as a prop to the Waveform component. ![]() I’ve also added a url variable inside the render method with the file I wish to be played and passed it as a prop to the audio element. Once this is done, we load the element into the waveform after finding it in the DOM and assigning it to the track variable, where the audio file will be accessed. As I mentioned above, the container key states which DOM element the waveform will be appended to, whilst the backend describes which browser media API that Wavesurfer.js uses. These primarily consist of styling options but also some important configuration settings such as container and backend. create() method takes an options argument, which is an object that can be inputed with a range of different key:value pairs. Once this is done, we can create our waveform in our componentDidMount method, which initialises the waveform using the Wavesurfer.create() method and appends it to our React class as this.waveform. ![]() Wavesurfer play button how to#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. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |