https://github.com/magnusthor/audiowaveforms

Generate audiowaveforms SVG
https://github.com/magnusthor/audiowaveforms

Last synced: 9 months ago
JSON representation

Generate audiowaveforms SVG

• Host: GitHub
• URL: https://github.com/magnusthor/audiowaveforms
• Owner: MagnusThor
• License: mit
• Created: 2019-01-14T09:55:47.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-15T09:43:20.000Z (over 7 years ago)
• Last Synced: 2025-08-16T05:32:40.984Z (10 months ago)
• Language: TypeScript
• Homepage: https://magnusthor.github.io/audiowaveforms/example/example.html
• Size: 8.79 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# audiowaveforms

Visualize audio (AudioBuffer) as a hortizontal waveform using SVG elements. It displays the waveform (amplitude) , progress and remaining during audio playback.

## Install

    npm install audiowaveforms

## How to

Below is a brief description of how to use 'audiowaveforms'. As the things evolves i'll make sure that a proper documentations is available.

### Markup

Below is the SVGElement that represents (hold) the audiowavforms, embed this in your 

application.

    

    

      

      

      

    

    

      

    

    

    

     

### Create an instance 

    const audioEl = document.querySelector("your Audio element selector");

    const svg = document.querySelector("#audio-waves"); // as above

    const aw = new AudioWaveform(audioBuffer,audioEl, svg);

### Update the waveform 

Update the progress and remaining indicators.

    //  where 'aw' is the instance of yours

       window.setInterval( () => {

                        this.audiowaveform.updateAudioPosition();

        },1000 / 60);

### Other

See /examples folder or try this example app https://magnusthor.github.io/audiowaveforms/example/example.html