Note that custom renderer objects don't have to be added to the wavesurfer.js repository, but you're welcome to raise a pull request if you think others will find your renderer useful. You can create your own renderer object (for example, by copying the Canvas or MultiCanvas renderer code into your own file and changing as necessary). The provided Canvas and MultiCanvas renderers should support the vast majority of use cases, but wavesurfer.js allows custom renderers to be Take a look at the list of all available methods. You can also trigger various actions on the player, such as wavesurfer.pause(), wavesurfer.skipForward(), wavesurfer.toggleMute() etc. The ready event, mentioned above, can be used like this: Wavesurfer.js has a number of useful events you can subscribe to. When it's done, it will fire the ready event. Wavesurfer.js will load the file, decode it and display a nice waveform image. Or from another server, if it supports CORS headers. You can load files either from the same domain: For example, to make the waveform scrollable, pass the the scrollParent option:Īfter creating an instance, you may want to load an audio track and draw its waveform. However, you can also pass any number of options. It can be either a unique CSS3 selector, or a DOM element. The only required parameter is container. Import WaveSurfer from "wavesurfer.js" Parameters Var WaveSurfer = require("wavesurfer.js") To use the library, you will need to include it from your code using CommonJS: If you are using Webpack or another bundler, you can install wavesurfer.js with NPM: Next, in your JavaScript code, create an instance of the global WaveSurfer object. You can grab the latest version from .Ĭreate a container where you want the waveform to appear: First of all, you need to insert the wavesurfer.js library into your HTML page.
0 Comments
Leave a Reply. |