5/17/2023 0 Comments Wavesurfer vue![]() ![]() ![]() If you name your own renderer, then you can use the renderer by specifying the renderer parameter as 'MyDrawer'. 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. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. Import WaveSurfer from "wavesurfer.js" Parameters You can apply CSS to your Pen from any stylesheet on the web. 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. |