waveform-visualizer - simple waveform-visualizer example

build

first, use your favorite command line tool and go into the root of this project:

cd /waveform-visualizer

then use the follwing command in the root of this repository to build the waveform-visualizer itself:

npm run build

Note: for more instructions about the waveform-visualizer itself check out the waveform-visualizer README

then, build the example (server & client) itself:

go into the example folder:

cd /waveform-visualizer/examples/simple-waveform

install the latest nodejs (if you haven't already) nodejs

update npm to latest version

npm install npm@latest -g

install the server dependencies

client

go into the client folder

cd client

install the client dependencies

npm i

build the client

npm run build

server

go into the server folder

cd server

install the server dependencies

npm i

build the server

npm run build

start the server

start the server

npm run start

usage

open the project in your browser:

http://127.0.0.1:35000/

click the play button to launch the song
the stop button (you guessed it) stops the song from playing
click into the waveform to change the song position
you can adjust the volume using the volume bar at the bottom

check out the /waveform-visualizer/examples/simple-waveform/client/src/ source code, especially /client/src/library/visualizer.ts to get an idea of how you can use the visualizer in your own projects

the audio player I used for the demo, is another of my projects and is available on npm too: https://www.npmjs.com/package/web-audio-api-player
the waveform data for the song was generated using another of my projects, the "waveform data generator" and the source code to build create your own data can be found on github: https://github.com/chrisweb/waveform-data-generator

linting

the linting is now done via the npm run lint command of the main project

express types bug

when using the express types, you will get an error at build time, that says:

Namespace 'serveStatic' has no exported member 'RequestHandlerConstructor'

to fix this I added two new sections to the example server package.json:

the first one is for npm:

    "overrides": {
        "@types/serve-static": "1.15.1"
    },

the second one is for yarn:

    "resolutions": {
        "@types/serve-static": "1.15.1"
    },

both will override the express static types used by the express types

as of now the related ticket on github has no PR and the problem is not solved: DefinitelyTyped issues: #49595, when this gets fixed, we will be able to remove the two sections of the package.json that do an override of the server static types version

Uh oh!