Simple library to custom waveforms🎶

Overview

npm npm bundle size GitHub license Twitter URL

waveform-path

Logo

LIVE DEMO WITH EXAMPLES

Simple library to custom waveforms.

Install

NPM

npm install waveform-path -s

Download

Download the last realease of repo and copy waveform-path.min.js from dist folder.

How to use

import { getAudioData, linearPath, polarPath } from "waveform-path"; async function AudioPath(file) { const audioData = await getAudioData(file); const pathLogo = linearPath(audioData,{ samples: 100, type: 'steps', top: 20 }); document.querySelector("#logo path").setAttribute('d', pathLogo); } AudioPath("hello_world.ogg"); ">
<script type="module">
    import { getAudioData, linearPath, polarPath } from "waveform-path";

    async function AudioPath(file) {
        const audioData = await getAudioData(file);

        const pathLogo = linearPath(audioData,{ samples: 100,  type: 'steps', top: 20 });
        document.querySelector("#logo path").setAttribute('d', pathLogo);

    }
    AudioPath("hello_world.ogg");
</script>

Linear Options

Option Default Description
channel 0 Channel audio for generate wave
samples length Length of the data
height 100 Height of path
width 800 Width of path
top 0 Top margin from path to svg
left 0 Left margin from path to svg
type 'steps' 'steps', 'mirror' or 'bars'
paths [{d:'Q', sx: 0, sy:0, x: 50, y: 100, ex:100, ey:0}] Array of commands to create the path.
animation false To create animations, paths separated by commas
animationframes 10 Frames per second of the animation
normalize true Normalize audio to adjust waveform

Linear Path Options

// Lineto
{d:'L', sx: 0, sy:0, ex:50, ey:100 }

// Horitzontal
{d:'H', sx:10, y:90, ex:90}

// Vertical
{d:'V', sy:0, x:0, ey:100}

// Cubic Bézier Curve - Not 100%
{d:'C', sx: 0, sy:0, x: 100, y: 100, ex:100, ey:0 },

// Quadratic Bézier Curve
{d:'Q', sx: 0, sy:0, x: 50, y: 100, ex:100, ey:0}

// Arc
{d:'A', sx: 0, sy:100,  ex:100, ey:100, rx:10, ry: 10, angle: 180, arc: 1, sweep: 1}

// Z - Close Path no parameters
{d:'Z'}

sx = start % x position
x = center % x position
ex = end % x position

sy = start % y position
y = center % y position
ey = end % y position

These three extra options can be added:
minshow: 0.2  // Values 0 to 1 - Default 0
maxshow: 1 // Values 0 to 1 - Default 1
normalize: true // Normalize value y to 1. - Default false
Example: 
{d:'H', sx:10, y:90, ex:90, minshow: 0.4, maxshow: 0.6, normalize: true} // Only for y > 0.4 && y < 0.6

For arc view: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve

Polar Options

Option Default Description
channel 0 Channel audio for generate wave
samples length Length of the data
distance 50 Distance from center
length 100 Length of wave
top 0 Top margin from path to svg
left 0 Left margin from path to svg
type 'steps' 'steps', 'mirror' or 'bars'
startdeg 0 Where do you start drawing. To make it natural, 0 is equivalent to north.
enddeg 360 Where do you end drawing
invertdeg false Reverse the direction of the degrees
invertpath false Reverse the path vertically
paths [{d:'Q', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0}] Array of commands to create the path.
animation false To create animations, paths separated by commas
animationframes 10 Frames per second of the animation
normalize true Normalize audio to adjust waveform

Polar Path Options

// Lineto
{d:'L', sdeg:0, sr:0,  edeg:100, er:100 },

// Cubic Bézier Curve - Not 100%
{d:'C', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0}

// Quadratic Bézier Curve
{d:'Q', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0}

// Arc
{d:'A', sdeg:80, sr:0, edeg: 0, er:0, rx: 100, ry: 100, angle: 100, arc: 0, sweep: 1 },

// Z - Close Path no parameters
{d:'Z'}

sdeg = start % deg position
deg = center % deg position
edeg = end % deg position

sr = start % radius position
r = center % radius position
er = end % radius position

These three extra options can be added:
minshow: 0.2  // Values 0 to 1 - Default 0
maxshow: 1 // Values 0 to 1 - Default 1
normalize: true // Normalize value radius to 1. - Default false
Example: 
{d:'Q', sdeg: 0, sr:0, deg: 50, r: 100, edeg:100, er:0, minshow: 0.4, maxshow: 0.6, normalize: true} // Only for y > 0.4 && y < 0.6

For arc view: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
You might also like...

Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan with 3

Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan with <3

Gutpress(WordPress Gutenburg Block Plugin) Custom Gutenburg blocks to add custom functionalities to your WordPress site. Brought to you by Arif Khan w

Nov 23, 2022

Custom navigations for Solid written in Typescript. Implement custom page transition logic and ✨ animations ✨

solid-custom-navigation Get, Set, Go! Custom navigations for Solid, written in Typescript. Implement custom page transition logic and ✨ animations ✨ .

Nov 27, 2022

Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

Oct 23, 2022

Simple-load-more - This jQuery function will add a functionality to load 5 (or custom) more items. No AJAX functionality.

Simple Load More This jQuery plugin will add a functionality to load 5 (or custom) more items. Best for lists that are long and you want to hide all e

Jan 4, 2023

Create custom would you rather questions for our discord bot using this simple ui tool!

Json Generator How to run the project Install the VSCode Live Server Extention. Navigate to the html file. Start the Live Server. Want to contribute?

Dec 15, 2022

Omnichannel Live Chat Widget UI Components offers a re-usable component-based library to help create a custom chat widget that can be connected to the Dynamics 365 Customer Service experience.

Omnichannel Live Chat Widget UI Components @microsoft/omnichannel-chat-widget is a React-based UI component library which allows you to build your own

Dec 15, 2022

🌗 1 line of code to apply auto dark / light theme and support custom theme for your website. Super fast and lightweight theme library.

themes.js A super lightweight and fast Theme library with auto system color scheme detection in JavaScript. Features Auto detect Dark / Light mode by

Nov 29, 2022

A JavaScript Library for building custom text editors with ease 📝

A JavaScript Library for building custom text editors with ease 📝

A JavaScript Library for building custom text editors with ease Show your support! Scriptor.js This is a bare bone text editor library, meant to creat

Oct 12, 2022

Library for testing Solidity custom errors with Truffle/Ganache.

Custom Error Test Helper Library for testing Solidity custom errors with Truffle/Ganache. Installation npm install --save-dev custom-error-test-helper

Dec 23, 2022

jQuery Terminal Emulator - JavaScript library for creating web-based terminals with custom commands

jQuery Terminal Emulator - JavaScript library for creating web-based terminals with custom commands

JavaScript Library for Web Based Terminal Emulators Summary jQuery Terminal Emulator is a plugin for creating command line interpreters in your applic

Jan 1, 2023

Fixed thead. Doesn't need any custom css/html. Does what position:sticky can't

Fixed <thead>. Doesn't need any custom css/html. Does what position:sticky can't

jquery.floatThead Documentation & Examples: http://mkoryak.github.io/floatThead/ Float the table header on scroll. No changes to your HTML/CSS are req

Dec 6, 2022

Lightweight analytics abstraction layer for tracking page views, custom events, & identifying visitors

 Lightweight analytics abstraction layer for tracking page views, custom events, & identifying visitors

A lightweight analytics abstraction library for tracking page views, custom events, & identify visitors. Designed to work with any third-party analyti

Dec 31, 2022

The fastest + concise javascript template engine for nodejs and browsers. Partials, custom delimiters and more.

doT Created in search of the fastest and concise JavaScript templating function with emphasis on performance under V8 and nodejs. It shows great perfo

Dec 31, 2022

Mapbox Visual for Power BI - High performance, custom map visuals for Power BI dashboards

Mapbox Visual for Power BI - High performance, custom map visuals for Power BI dashboards

Mapbox Visual for Microsoft Power BI Make sense of your big & dynamic location data with the Mapbox Visual for Power BI. Quickly design high-performan

Nov 22, 2022

Custom homepage for use locally in browser

Custom homepage for use locally in browser

Homepage Customization Customize Bookmarks Bookmarks are now held in the bookmarks.js file for easy updating. bookmarks is an array of objects with a

Dec 25, 2022

Home Assistant custom component for viewing IP cameras RTSP stream in real time using WebRTC technology

Home Assistant custom component for viewing IP cameras RTSP stream in real time using WebRTC technology

Home Assistant custom component for viewing IP cameras RTSP stream in real time using WebRTC technology

Jan 4, 2023
Comments
  • sveltekit: waveform-path doesn't appear to be written in CJS

    sveltekit: waveform-path doesn't appear to be written in CJS

    Hi Jero, I really like this lib but I am getting this error: waveform-path doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

    Can you please have a look?

    opened by Erildo 2
Releases(0.0.1)
  • 0.0.1(Jan 27, 2022)

    🚀 Launch waveform-path

    Simple library to custom waveforms for SVG.

    • Two methos Linear and Polar
    • Three types for each method: 'steps', 'mirror' and 'bars'
    Source code(tar.gz)
    Source code(zip)
Owner
Jero Soler
💻 Developer & Maker 🤖
Jero Soler
A simple image diff tool powered by avernakis.

Image Diff English | 简体中文 Introduction This is the tutorial project of Avernakis UI. Tiny, but production ready. Install Use npm as nam! (Node App Man

null 45 Dec 3, 2022
:woman: Library for image processing

Lena.js Tiny library for image processing. Install via NPM npm install lena.js --save Install via yarn yarn add lena.js Run demo yarn demo Demo htt

Davidson Fellipe 558 Dec 28, 2022
JavaScript library for object-based canvas drawing

oCanvas - Object-based canvas drawing oCanvas makes canvas development easier to understand and do, by creating a bridge between the native pixel draw

Johannes Koggdal 483 Jan 4, 2023
An image post-processing code library

WebGPU image filter Preview online 这是一个用来展示 webgpu 在图片处理方面应用的 demo,但由于 webgpu API 还不稳定,本地都需要经常修改 API 才能跟上金丝雀的脚步,所以本项目的效果目前也还不稳定,目前仅供学习交流。

kuake 4 Mar 8, 2022
Kuldeep 2 Jun 21, 2022
This experimental library patches the global custom elements registry to allow re-defining or reload a custom element.

Redefine Custom Elements This experimental library patches the global custom elements registry to allow re-defining a custom element. Based on the spe

Caridy Patiño 21 Dec 11, 2022
Custom Elements Manifest is a file format that describes custom elements in your project.

@custom-elements-manifest Custom Elements Manifest is a file format that describes custom elements. This format will allow tooling and IDEs to give ri

open-wc 131 Dec 15, 2022
logseq custom.js and custom.css utilities : resize query table columns, hide namespaces...

logseq-custom-files custom.js and custom.css utilities for Logseq. current version v20220331 query table view : add handles on the query table headers

null 44 Dec 7, 2022
Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden data on the www

Paranoia ?? Ready to manipulate partitions file? Create a custom partition, apply custom security system, hide the partition and share your hidden dat

Alice Snow 3 Dec 29, 2022