wavesurfer.js | Audio waveform player | Audio Utils library

by katspaugh TypeScript Version: 6.6.4 License: BSD-3-Clause

X-Ray Key Features Code Snippets Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | wavesurfer.js Summary

wavesurfer.js is a TypeScript library typically used in Telecommunications, Media, Media, Entertainment, Audio, Audio Utils applications. wavesurfer.js has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

Interactive navigable audio visualization using Web Audio and Canvas. See a tutorial and examples on wavesurfer-js.org.

Support

Quality

Security

License

Reuse

Support

wavesurfer.js has a medium active ecosystem.

It has 7027 star(s) with 1453 fork(s). There are 164 watchers for this library.

There were 4 major release(s) in the last 12 months.

There are 7 open issues and 1847 have been closed. On average issues are closed in 137 days. There are no pull requests.

It has a neutral sentiment in the developer community.

The latest version of wavesurfer.js is 6.6.4

Quality

wavesurfer.js has 0 bugs and 0 code smells.

Security

wavesurfer.js has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

wavesurfer.js code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

wavesurfer.js is licensed under the BSD-3-Clause License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

wavesurfer.js releases are available to install and integrate.

Installation instructions, examples and code snippets are available.

wavesurfer.js saves you 3055 person hours of effort in developing the same functionality from scratch.

It has 6583 lines of code, 0 functions and 123 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of wavesurfer.js

Get all kandi verified functions for this library.

wavesurfer.js Key Features

No Key Features are available at this moment for wavesurfer.js.

wavesurfer.js Examples and Code Snippets

No Code Snippets are available at this moment for wavesurfer.js.

Community Discussions

Trending Discussions on wavesurfer.js

WaveSurfer.create is not a function

unable to show remaining time in wavesurfer.js

How to get the body content of a web page returned in an API in ASP.NET Core

How to display Elan transcription in wavesurfer.js?

Pause wavesurfer when scrolled out of viewport

How to use CDN javascript in React

Audio won't play anymore on browser after recording it with MediaRecorder

Looking to Combine Tabulator & Wavesurfer.js Waveform Pictures Into Indivudual Rows

Video JS in Angular 9 - live video - 'Can't resolve videojs' problem?

Getting PCM data from wavesurfer.js backend/web audio api

QUESTION

WaveSurfer.create is not a function

Asked 2021-Jun-05 at 09:11

i'm trying to add WaveSurfer.js to Next.js app.

I imported package by next/dynamic like this

...

ANSWER

Answered 2021-Jun-05 at 09:11

Instead dynamic import wavesurfer.js i should import a component where wavesurfer.js is used.

Source https://stackoverflow.com/questions/67672061

QUESTION

unable to show remaining time in wavesurfer.js

Asked 2021-May-02 at 08:18

import React,{ useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from 'react-redux'
import { format, formWaveSurferOptions } from '../../utils/generic'
import { receiveCurrentTrack, receiveTrackRef , togglePlay} from '../../redux/action/currentTrack'
import './_playlist.scss'
import WaveSurfer from "wavesurfer.js";
import {Link} from 'react-router-dom';

const PlayList = (props) => {
  const dispatch = useDispatch()

  const { track, queue, currentTrack, index } = props
  const waveformRef = useRef(null);
  const waveRef = useSelector((state)=>state.currentTrack.waveRef)
  const wavesurfer = useRef(null);
  const currentTime = useRef(null)
  const [duration, setDuration] = useState() 

  useEffect(() => {
    
    const options = formWaveSurferOptions(waveformRef.current);
    wavesurfer.current = WaveSurfer.create(options);
    wavesurfer.current.load(track.url);
    
    wavesurfer.current.on("ready", ()=> {
      if(wavesurfer.current){
        wavesurfer.current.setVolume(0)
        setDuration(format(wavesurfer.current.getDuration()))
      }
    });
    
    return () => wavesurfer.current.destroy();
  }, [track.url]);

  useEffect(()=>{
    if(currentTrack){
      dispatch(receiveTrackRef(wavesurfer))
    } 
    return ()=> waveRef?.current.stop()

  },[currentTrack.track?.url])

  const handleClick = () => {
  
    dispatch(receiveTrackRef(wavesurfer))

    if(currentTrack){
      dispatch(togglePlay())
    } 
    else {
      waveRef?.current.stop()
      dispatch(receiveCurrentTrack(track, queue));
    }
  };

  
  
  return (
    
            # {index} :
            {track.title}
            {track.artist}
            0.00 / {duration && duration} 
            console.log('hhh')} ref={waveformRef} />
            {duration && duration}
    
  );
};

export default PlayList;

...

ANSWER

Answered 2021-May-02 at 08:18

From the Official Doc :

getCurrentTime() – Returns current progress in seconds.

There's also a audioprocess event as you mentioned that fires continuously as the audio plays.
So by combining these together, we have this:

Source https://stackoverflow.com/questions/67271773

QUESTION

How to get the body content of a web page returned in an API in ASP.NET Core

Asked 2021-Apr-15 at 17:08

The response from an API is web page with full HTML and CSS content. The only thing I want is the content in the body.

How can I extract the body content from the web page?

Below is the short version of the web page. The page is very long I can't post everything here.

The body content I want to extract is " Hi John, Doe wishes you a happy anniversary and wants all of us at FCMB to wish you same, Congratulations on your anniversary Doe"

...

ANSWER

Answered 2021-Apr-15 at 17:08

After some digging, I used HtmlAgilityPack to get the node https://html-agility-pack.net/ I installed via nuget

Source https://stackoverflow.com/questions/67109460

QUESTION

How to display Elan transcription in wavesurfer.js?

Asked 2021-Feb-23 at 14:50

I'm trying to use wavesurfer.js to create a web app, and I can't figure out how to display the transcript/caption using their Elan plugin.

...

ANSWER

Answered 2021-Feb-23 at 14:50

Here is a working example on Codepen
There is also `region plugin` in case that you want to use it.

I'm going to explain it below :

step 1 : HTML setup

Add the related CDN links to your html file.
You can just skip the second script if you don't want that region.

Source https://stackoverflow.com/questions/65961987

QUESTION

Pause wavesurfer when scrolled out of viewport

Asked 2021-Jan-19 at 03:23

I'm trying to add multiple instances of wavesurfer.js on my page. I have my HTML structure like this:

...

ANSWER

Answered 2021-Jan-19 at 03:23

I needed to store the instances in an array:

Source https://stackoverflow.com/questions/65764823

QUESTION

How to use CDN javascript in React

Asked 2021-Jan-08 at 21:37

I want to use javascript simple component in React.

for example wavesurfer.js

It is easy to use, if you don't use react.

...

ANSWER

Answered 2021-Jan-08 at 21:18

This looks like a typescript (possibly other linter error). You need to disable the no-undef rule for this line. There is no way the parser can know at design/compile-time that this will be a defined at runtime when the page renders.

Source https://stackoverflow.com/questions/65636288

QUESTION

Audio won't play anymore on browser after recording it with MediaRecorder

Asked 2021-Jan-01 at 16:39

(See https://github.com/norbjd/wavesurfer-upload-and-record for a minimal reproducible example).

I'm using wavesurfer.js to display audio uploaded by the user as a waveform, and I'm trying to add a feature for recording a part of the audio uploaded.

So I've created a "Record" button (for now recording only 5 seconds of the audio) with the following code when clicking on it. I'm using MediaRecorder API :

...

ANSWER

Answered 2021-Jan-01 at 16:39

You don't need a separate audiocontext, but you need a MediaStreamDestination that you create using the same audiocontext (from wavesurfer.js in your case) as for the audionode you want to record, and you need to connect the audionode to that destination.

You can see a complete example of capturing audio and screen video here:

https://github.com/petersalomonsen/javascriptmusic/blob/master/wasmaudioworklet/screenrecorder/screenrecorder.js

( connecting the audionode to record is done after the recording has started on line 52 )

and you can test it live here: https://petersalomonsen.com/webassemblymusic/livecodev2/?gist=c3ad6c376c23677caa41eb79dddb5485

(Toggle the capture checkbox to start recording and press the play button to start the music, toggle the capture checkbox again to stop the recording).

and you can see the actual recording being done on this video: https://youtu.be/FHST7rLxhLM

as you can see in that example, it is still possible to play audio after the recording is finished.

Note that this example has only been tested for Chrome and Firefox.

And specifically for your case with wavesurfer:

Instead of just backend: 'MediaElement', switch to backend: 'MediaElementWebAudio',

and instead of audioCtx.createMediaElementSource(audio).connect(dest);, you can change to wavesurfer.backend.sourceMediaElement.connect(dest); to reuse the existing source from wavesurfer (but also works without this).

Source https://stackoverflow.com/questions/65530712

QUESTION

Looking to Combine Tabulator & Wavesurfer.js Waveform Pictures Into Indivudual Rows

Asked 2020-Sep-23 at 21:22

i am trying to display a database of sound files and their accompanying waveform picture. this picture is an example of what i'm trying to accomplish:

i have been able to successfully work with and manipulate Tabulator and wavesurfer.js independently with ease, but am having issues when trying to combine the two.

...

ANSWER

Answered 2020-Sep-23 at 21:22

There are a few issues here.

The first is that Tabulator uses a virtual DOM, it is therefor not possible to manipulate row contents successfully from outside the table, it must be done from inside formatters.

The reason the wavesurfer pluggin is failing is because haven't been added to the DOM yet so the query selector you are passing to the wavesurfer plugging cant draw the wave. the elements are only added to the DOM after the rowFormatter function has returned.

You need to place the wave surfer functions inside the rowFormatter and then inside a setTimeout to give the rowFormatter a chance to build the row before calling the plugin:

Source https://stackoverflow.com/questions/63981089

QUESTION

Video JS in Angular 9 - live video - 'Can't resolve videojs' problem?

Asked 2020-Aug-09 at 09:35

I am struggling to get the videojs to work in my angular 9 app. I have viewed all the exisitng stackoverflow posts, applied their solution, looked at different blog posts and github for issues with video js but I still have the 'Can't resolve videojs' problem.

I would like it to work in that an individual viewing the page could start recording a video of themselves.

Can someone please advise? Please see my code below@

my package.json file:

...

ANSWER

Answered 2020-Aug-08 at 18:33

I think the problem is your webpack.alias doesn't get affected. On the other hand, your webpack.config.js is not applied yet. Here is the solution for you:

Install the following packages which give you capability to custom webpack:

Source https://stackoverflow.com/questions/63278288

QUESTION

Getting PCM data from wavesurfer.js backend/web audio api

Asked 2020-Jun-08 at 16:44

I am using wavesurfer.js to create a multitrack player online and want to export a remixed version of the combined tracks with levels panning etc.

First I have an array of audioFiles and use this to create an array of wavesurfer elements.

...

ANSWER

Answered 2020-Jun-05 at 13:31

Given that you currently have an array of AudioBuffer objects, you can interleave the Float32Array PCM data contained within each AudioBuffer, and then use that interleaved PCM to create a RIFF/Wav file to download. If each AudioBuffer is a track, then all of the left/right channels in the array must be combined separately and interleaved at the end. Here's how to start with one AudioBuffer track:

Convert AudioBuffer to ArrayBuffer / Blob for WAV Download

Source https://stackoverflow.com/questions/62212995

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install wavesurfer.js

See the upgrade document if you're upgrading from a previous version of wavesurfer.js.

Support

wavesurfer.js works only in modern browsers supporting Web Audio. It will fallback to Audio Element without graphics in other browsers (IE 11 and lower). You can also try wavesurfer.swf which is a Flash-based fallback.

Find more information at: