{"id":16125757,"url":"https://github.com/dy/gl-waveform","last_synced_at":"2026-03-07T02:33:28.469Z","repository":{"id":57251362,"uuid":"65507787","full_name":"dy/gl-waveform","owner":"dy","description":"Performant waveform renderer.","archived":false,"fork":false,"pushed_at":"2023-03-01T15:12:46.000Z","size":2389,"stargazers_count":108,"open_issues_count":7,"forks_count":9,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-09-30T22:10:32.638Z","etag":null,"topics":["audio","webgl"],"latest_commit_sha":null,"homepage":"https://dy.github.io/gl-waveform/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-08-11T23:19:49.000Z","updated_at":"2025-08-11T14:04:58.000Z","dependencies_parsed_at":"2023-07-26T16:24:17.326Z","dependency_job_id":null,"html_url":"https://github.com/dy/gl-waveform","commit_stats":null,"previous_names":["a-vis/gl-waveform","audio-lab/gl-waveform","dy/gl-waveform"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dy/gl-waveform","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fgl-waveform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fgl-waveform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fgl-waveform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fgl-waveform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dy","download_url":"https://codeload.github.com/dy/gl-waveform/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dy%2Fgl-waveform/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30206070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T19:07:06.838Z","status":"online","status_checked_at":"2026-03-07T02:00:06.765Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","webgl"],"created_at":"2024-10-09T21:31:36.256Z","updated_at":"2026-03-07T02:33:28.409Z","avatar_url":"https://github.com/dy.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gl-waveform [![unstable](https://img.shields.io/badge/stability-unstable-green.svg)](http://github.com/badges/stability-badges) [![Build Status](https://img.shields.io/travis/dy/gl-waveform.svg)](https://travis-ci.org/dy/gl-waveform)\r\n\r\nDisplay time-domain data with WebGL. Provides fair performance / quality among other renderers:\r\n\r\n* no performance deterioration - O(n) for update, O(c) for rendering.\r\n* no memory limit - O(c * n).\r\n* no float32 error introduced by shader, at any scale/range/amount of data.\r\n* floating step compensation for non-regular sample sets.\r\n* unique render method of adjustable join-width via sample range sdev.\r\n\r\n[Demo 1](https://dy.github.io/gl-waveform/example/data), [Demo 2](https://dy.github.io/gl-waveform/example/multi)\r\n\r\n## Usage\r\n\r\nInstall package as\r\n\r\n[![npm i gl-waveform](https://nodei.co/npm/gl-waveform.png?mini=true)](https://npmjs.org/package/gl-waveform/)\r\n\r\nExamplary set up is\r\n\r\n```js\r\nlet Waveform = require('gl-waveform')\r\n\r\n// new component instance creates new canvas and puts that to document\r\nlet waveform = new Waveform()\r\n\r\n// update method sets state of the component: data, color etc.\r\nwaveform.update({\r\n\tdata: [0, .5, 1, .5, 0, -.5, -1, ...],\r\n\tcolor: 'gray',\r\n\trange: [0, 44100]\r\n})\r\n\r\n// render method draws frame, needs to be called when state is changed\r\nwaveform.render()\r\n\r\n// push method appends new data\r\nwaveform.push(newData)\r\nwaveform.render()\r\n```\r\n\r\n## API\r\n\r\n### `waveform = new Waveform(arg|options?)`\r\n\r\n`arg` can be:\r\n\r\n* `gl` - existing webgl context.\r\n* `regl` - existing [regl](https://ghub.io/regl) instance.\r\n* `canvas` - canvas element to initialize waveform on.\r\n* `container` - html element to use as a container for new canvas with webgl context.\r\n* `waveform` - gl-waveform instance to create a view for. In this case, the data will be shared.\r\n* none - new fullscreen canvas in the `\u003cbody\u003e`.\r\n\r\n`options` can provide:\r\n\r\nProperty | Meaning\r\n---|---\r\n`gl`, `regl`, `canvas`, `container` | Same as `arg`.\r\n`pixelRatio` | Device pixel ratio, by default `window.devicePixelRatio`.\r\n`clip` | Viewport area within the canvas, an array `[left, top, width, height]` or rectangle `{x, y, width, height}`, see [parse-rect](https://ghub.io/parse-rect).\r\n`flip` | Use inverted webgl viewport direction (bottom → top) instead of normal canvas2d direction (top → bottom). By default `false`.\r\n`pick` | If picking data is required. By default `true`. Disabling reduces memory usage and increases `push` performance.\r\n\r\n### `waveform.update(options)`\r\n\r\nUpdate state of the renderer instance. Possible `options`:\r\n\r\nProperty | Meaning\r\n---|---\r\n`data`\t\t\t| Array or typed array with sample values. Usually it contains values from `-1..+1` range, but that can be adjusted via `amplitude` property. Can be a `regl-texture` instance or a list of textures, to share data between instances. If you need time series data, have a look at `tick-array` package to normalize input data values.\r\n`range`\t\t\t| Visible data x-range, an array `[start, end]` offsets or a number of the last samples to show. Can also be a 4-value array `[xStart, minAmplitude, xEnd, maxAmplityde]` compatible with other gl-components, in this case `amplitude` property is ignored. Negative number value counts data from the end. `null` range displays all available data.\r\n`amplitude` \t| Amplitudes range, number or array `[min, max]`. `null` value uses data min/max.\r\n`color` \t\t| Trace line color. Can be a color string or an array with float or uint values, eg. `[0,0,1,1]` or `uint8\u003c[100,120,255,255]\u003e`, see [color-normalize](https://ghub.io/color-normalize).\r\n`thickness` \t| Trace line width, number in pixels or a string with units, eg. `3em`.\r\n\r\n### `waveform.set(data, offset=0)`\r\n\r\nPut samples data by the `offset`. Existing data by that offset is rewritten.\r\n\r\n### `waveform.push(data)`\r\n\r\nAppend new samples to the end.\r\n\r\n### `waveform.render()`\r\n\r\nDraw trace frame according to the state.\r\n\r\n### `waveform.pick(event|x)`\r\n\r\nGet information about samples at `x` coordinate relative to the canvas. Returns an object with props:\r\n\r\nProperty | Meaning\r\n---|---\r\n`average` | Average value for the picking point. The one actually visible on the screen.\r\n`sdev` | Standard deviance for the picking point.\r\n`x`, `y` | Actual coordinates of picking value relative to canvas.\r\n`offset` | An array with `[left, right]` offsets within data.\r\n\r\n### `waveform.clear()`\r\n\r\nClear viewport area dedicated for the instance.\r\n\r\n### `waveform.destroy()`\r\n\r\nDispose waveform instance, data and all assiciated resources.\r\n\r\n### Properties\r\n\r\n* `waveform.gl` - WebGL context.\r\n* `waveform.canvas` - canvas element.\r\n* `waveform.regl` - regl instance.\r\n\r\n\u003c!-- TODO: benchmark --\u003e\r\n\r\n\u003c!-- ### See also --\u003e\r\n\u003c!-- * [audio-waveform](https://github.com/a-vis/audio-waveform) − extended waveform renderer for audio. --\u003e\r\n\r\n## License\r\n\r\n© 2018 Dmitry Yv. MIT License\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fgl-waveform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdy%2Fgl-waveform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdy%2Fgl-waveform/lists"}