Customized audio display in vue project, basic use of wavesurfer.js

Rendering:

wavesurfer is a customizable audio waveform visualization built on top of the Audio API and HTML5 Canvas.
Basic usage:

<body>
    <script src="//i2.wp.com/unpkg.com/wavesurfer.js"></script>
    <div id="waveform"></div>
    <script>
        var wavesurfer = WaveSurfer.create({
            container: '#waveform',
            waveColor: 'violet',
            progressColor: 'purple'
        });
        //Receive incoming audio
        wavesurfer.load('./test.mp3');
        
        // event
        wavesurfer.on('ready', function () {
            wavesurfer.play();
        });
    </script>
</body>

Commonly used parameters of wavesurfer:

  • container: required, can be a unique css3 selector or a DOM element
  • scrollParent: true/false, to make the waveform scroll.
  • audioRate: The speed at which audio is played. The lower the number, the slower it is.
  • backgroundColor: Change the background color of the wave container.
  • barGap: Optional spacing between wavy bars (if not provided) will be calculated in the old format.
  • barHeight: The height of the wavy bar. Numbers greater than 1 will increase the height of the squiggle bar.
  • barMinHeight: The minimum height for drawing wavy bars. The default behavior is not to draw the bar graph during silence.
  • barRadius: The radius that makes the bar rounded.
  • barWidth: width of each line of the wave
  • cursorColor: Cursor fill color indicating the position of the playhead.
  • cursorWidth: the indicated width
  • forceDecode: Use network audio to force decode audio for more detailed waveforms when zooming.
  • height: the height of the waveform. In pixels.
  • hideScrollbar: Whether to hide the horizontal scroll bar when displayed normally.
  • hideCursor: Hides the mouse cursor when hovering over the waveform. Displayed by default.
  • interact: Whether to enable mouse interaction during initialization. You can toggle this parameter at any time later.
  • loopSelection: (used with the Region plugin) Enables looping of the selected region.
  • maxCanvasWidth: Maximum width of a single canvas in pixels, excluding small overlaps (2 * pixelRatio, rounded to the next even integer). If the waveform is longer than this value, an additional canvas will be used to render the waveform, which is useful for very large waveforms that the browser cannot draw on a single canvas. This parameter only applies to MultiCanvas renderers.
  • mediaControls: This enables native controls for media elements.
  • mediaType: audio’ or video’.
  • minPxPerSec: Minimum number of pixels per second of audio.
  • partialRender: Use PeakCache to improve rendering speed of large waveforms.
  • progressColor: The fill color of the waveform part behind the cursor. When progressColor and waveColor are the same, the progress wave is not rendered at all
  • waveColor: the fill color of the waveform behind the cursor
  • responsive: If set to true resize the waveform when resizing the window. By default this is debounced using a 100ms timeout. If this parameter is a number, it represents the timeout.

Common methods of wavesurfer:

Called after creating a playback instance

  • cancelAjax() – Cancels the audio file loading process.
  • destroy() – Deletes events, elements and disconnects web audio nodes.
  • empty() – clears the waveform as if zero-length audio was loaded.
  • getActivePlugins() – Returns the currently initialized plugin name map.
  • getBackgroundColor() – Returns the background color of the wave container.
  • getCurrentTime() – Returns the current progress in seconds.
  • getCursorColor() – Returns the fill color of the cursor indicating the position of the playhead.
  • getDuration() – Returns the duration of the audio clip in seconds.
  • getPlaybackRate() – Returns the playback speed of the audio clip.
  • getProgressColor() – Returns the fill color of the waveform behind the cursor.
  • getVolume() – Returns the volume of the current audio clip.
  • getMute() – Returns the current mute status.
  • getFilters() – Returns an array of currently set filters.
  • getWaveColor() – Returns the fill color of the waveform behind the cursor.
  • exportPCM(length, accuracy, noWindow, start)– Export PCM data as a JSON array. Optional parameters length [number] – default: 1024, accuracy [number] – default: 10000, noWindow [true|false] – default: false, start [number] – default: 0
  • exportImage(format, quality, type) – Returns a waveform image as a data URI or Blob.
  • isPlaying()–true if currently playing, false otherwise.
  • load(url, peaks, preload) – URL loads audio via XHR. Optional array of peaks. Optional preload parameter [none|metadata|auto], passed to the Audio element if using the backend MediaElement .
  • loadBlob(url) – Load audio from a Blob or File object.
  • on(eventName, callback) – Subscribe to events. For a list of all events, see WaveSurfer Events.
  • un(eventName, callback) – Unsubscribe from an event.
  • unAll() – Unsubscribe from all events.
  • pause() – Stop playing.
  • play([start[, end]]) – Start playing from the current position. Optional start and end measured in seconds can be used to set the audio range to be played.
  • playPause() – Play when paused, pause when playing.
  • seekAndCenter(progress) – Seek progress and center view [0…1] (0 = start, 1 = end).
  • seekTo(progress) – seek progress [0…1] (0 = start, 1 = end).
  • setBackgroundColor(color) – Sets the background color of the wave container.
  • setCursorColor(color) – Sets the fill color of the cursor indicating the position of the playhead.
  • setHeight(height) – Sets the height of the waveform.
  • setFilter(filters) – Used to insert your own WebAudio nodes into the graph. See connection filters below.
  • setPlaybackRate(rate) – Set the playback speed (0.5 half speed, 1 normal speed, 2 double speed, etc.).
  • setPlayEnd(position) – Sets the playback stop point in seconds.
  • setVolume(newVolume) – Sets the playback volume to a new value [0…1] (0 = mute, 1 = maximum).
  • setMute(mute) – Mute the current sound. A Boolean value that can be true to mute or false to unmute
  • setProgressColor(color) – Sets the fill color of the waveform behind the cursor.
  • setWaveColor(color) – Sets the fill color of the waveform behind the cursor.
  • skip(offset) – Skip a few seconds from the current position (use negative values to move backward).
  • skipBackward() – Rewind skipLength seconds.
  • skipForward() – skip skipLength seconds.
  • setSinkId(deviceId) – Sets the sink ID to change the audio output device.
  • stop() – Stop and go to the beginning.
  • toggleMute() – Turns the volume on and off.
  • toggleInteraction() – Toggle mouse interaction.
  • toggleScroll() – Toggle scrollParent.
  • zoom(pxPerSec) – Zooms in and out of the waveform horizontally. This parameter is the number of horizontal pixels of audio per second. It also changes the parameter minPxPerSec and enables the scrollParent option.

Wavesurfer common events:

Use the on() and un() methods to subscribe and unsubscribe to various player events

  • audioprocess – Fires continuously while audio is playing. Also looking for getting angry.
  • dblclick – when an instance is double-clicked.
  • destroy – when the instance is destroyed.
  • error – An error occurred. The callback will receive the (string) error message.
  • finish – when it has finished playing.
  • interaction – when interacting with the waveform.
  • loading – Fires continuously when loading using fetch or drag’n’drop. The callback will receive (integer) loading progress as a percentage [0…100].
  • mute – Mute changes. The callback will receive (boolean) the new muted state.
  • pause – when the audio is paused.
  • play – When playback begins.
  • ready – When audio is loaded, decoded and waveforms drawn. When using a MediaElement, this is triggered before the waveform is drawn, see waveform-ready.
  • scroll – when the scroll bar moves. The callback will receive a ScrollEvent object.
  • seek – seeking. The callback will receive (float) progress[0…1].
  • volume – Regarding volume changes. The callback will receive (integer) new volume.
  • waveform-ready – Fires after drawing a waveform using the MediaElement backend. If you are using the WebAudio backend, you can use ready.
  • zoom – About zooming. The callback will receive (integer) minPxPerSec.

Reference: wavesurfer.js | audio waveform player JavaScript library