https://github.com/patidar-suresh/audio-waveform

Audio Wavefrom using HTML5 Audio API and Canvas
https://github.com/patidar-suresh/audio-waveform

audio-analysis audio-analyzer audio-visualizer audio-waves html5 html5-audio html5-canvas requestanimationframe waveform

Last synced: 25 days ago
JSON representation

Audio Wavefrom using HTML5 Audio API and Canvas

• Host: GitHub
• URL: https://github.com/patidar-suresh/audio-waveform
• Owner: patidar-suresh
• License: mit
• Created: 2017-05-26T06:32:28.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-10-23T00:32:40.000Z (about 4 years ago)
• Last Synced: 2024-08-03T16:09:58.985Z (4 months ago)
• Topics: audio-analysis, audio-analyzer, audio-visualizer, audio-waves, html5, html5-audio, html5-canvas, requestanimationframe, waveform
• Language: JavaScript
• Size: 1.84 MB
• Stars: 10
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-javascript-audio - patidar-suresh/audio-waveform - uses HTML5 Canvas and requestAnimationFrame (UI components and libraries / Visual waveform generators)

README

        
# audio-waveform

![Audio Waveform](https://github.com/patidar-suresh/audio-waveform/blob/master/audiowaveform.PNG "Optional title")

This project demonstrate live waveform generation using HTML5 Audio API and Canvas.

  - Generate waveform for your audio being played on audio player

  - Draw wavefrom using requestAnimationFrame for a smooth drawing

  - Handle audio event (play, pause, ended) to start/stop drawing wavefrom.

  - Optimized to save CPU cycles when audio is not being played (paused/ended).

### Installation and Running

audio-waveform requires [Node.js](https://nodejs.org/) v4+ to run.

Install the dependencies and devDependencies and start the server.

```sh

$ cd audio-waveform

$ npm install

$ npm start

```

Open the browser and enter following url to run the applicaiton

http://localhost:3001