{"id":20893424,"url":"https://github.com/Lightning-Chart/lcjs-example-0802-spectrogram","last_synced_at":"2025-05-12T22:33:07.250Z","repository":{"id":98723667,"uuid":"267796623","full_name":"Arction/lcjs-example-0802-spectrogram","owner":"Arction","description":"A demo application showcasing using LightningChart JS to display a static Spectrogram.","archived":false,"fork":false,"pushed_at":"2024-08-05T07:13:21.000Z","size":19230,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-06T08:09:45.989Z","etag":null,"topics":["analyzer","audio-apis","audiobuffer","demo","fft","heatmap","heatmap-spectrogram","javascript","lcjs","lightningchart-js","spectrogram","typescript"],"latest_commit_sha":null,"homepage":"https://www.arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0802-spectrogram.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Arction.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-29T07:40:09.000Z","updated_at":"2024-08-05T07:13:24.000Z","dependencies_parsed_at":"2024-08-05T08:06:28.582Z","dependency_job_id":null,"html_url":"https://github.com/Arction/lcjs-example-0802-spectrogram","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0802-spectrogram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0802-spectrogram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0802-spectrogram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arction%2Flcjs-example-0802-spectrogram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arction","download_url":"https://codeload.github.com/Arction/lcjs-example-0802-spectrogram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225156947,"owners_count":17429701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["analyzer","audio-apis","audiobuffer","demo","fft","heatmap","heatmap-spectrogram","javascript","lcjs","lightningchart-js","spectrogram","typescript"],"created_at":"2024-11-18T10:15:46.940Z","updated_at":"2025-05-12T22:33:07.228Z","avatar_url":"https://github.com/Arction.png","language":"JavaScript","readme":"# JavaScript Heatmap Spectrogram Chart\n\n![JavaScript Heatmap Spectrogram Chart](spectrogram-darkGold.png)\n\nThis demo application belongs to the set of examples for LightningChart JS, data visualization library for JavaScript.\r\n\r\nLightningChart JS is entirely GPU accelerated and performance optimized charting library for presenting massive amounts of data. It offers an easy way of creating sophisticated and interactive charts and adding them to your website or web application.\r\n\r\nThe demo can be used as an example or a seed project. Local execution requires the following steps:\r\n\r\n-   Make sure that relevant version of [Node.js](https://nodejs.org/en/download/) is installed\r\n-   Open the project folder in a terminal:\r\n\r\n          npm install              # fetches dependencies\r\n          npm start                # builds an application and starts the development server\r\n\r\n-   The application is available at _http://localhost:8080_ in your browser, webpack-dev-server provides hot reload functionality.\r\n\n\n## Description\n\nThis example shows a simple use case for Heatmaps as a spectrogram.\r\n\r\nSpectrogram is a visual representation of the spectrum of frequencies. Spectrograms can be used to visualize any wave form. Most often spectrograms are used to display audio signals.\r\n\r\nThis example loads a audio file and shows spectrograms for each channel on the audio file.\r\n\r\nThe spectrogram shows frequency on one axis (Y Axis) and time on the other (X Axis). The color of a the heatmap at any point is the amplitude of the frequency at the specified time.\r\n\r\n## Getting the data\r\n\r\nFirst the audio file that will be shown is loaded with [fetch][fetch] and converted into an ArrayBuffer.\r\n\r\n```js\r\nconst response = await fetch('url')\r\nconst buffer = await response.arrayBuffer()\r\n```\r\n\r\nThis example uses the [Web Audio APIs][web-audio-api] to retrieve the frequency data to display in the heatmap. These APIs make it easy to work with audio files and manipulate the files. For spectrogram use the [AnalyzerNode][analyzer-node] is the most useful part of the API as it provides [getByteFrequencyData][getbytefrequencydata] method which is a implementation of [Fast Fourier Transform][fft].\r\nThe AudioContext contains method to convert an ArrayBuffer into an [AudioBuffer][audiobuffer].\r\n\r\n```js\r\nconst audioBuffer = await audioContext.decodeAudioData(buffer)\r\n```\r\n\r\nNow that the audio file is converted into a AudioBuffer it's possible to start extracting data from it.\r\n\r\nTo process the full audio buffer as fast as possible, a [OfflineAudioContext][offlineaudiocontext] is used. The OfflineAudioContext doesn't output the data to a audio device, instead it will go through the audio as fast as possible and outputs an AudioBuffer with the processed data. In this example the processed audio buffer is not used, but the processing is used to calculate the FFT data we need to display the intensities for each frequency in the spectrogram. The audio buffer we have created is used as a [buffer source][createbuffersource] for the OfflineAudioContext.\r\n\r\nThe buffer source only has a single output but we want to be able to process each channel separately, to do this a [ChannelSplitter][createchannelsplitter] is used with the output count matching the source channel count.\r\n\r\n```js\r\nconst splitter = offlineCtx.createChannelSplitter(source.channelCount)\r\n```\r\n\r\nThis makes it possible to process each channel separately by making it possible to create AnalyzerNodes for each channel and only piping a single channel to each analyzer.\r\n\r\nA [ScriptProcessorNode][createscriptprocessor] is used to go through the audio buffer in chuncks. For each chunk, the FFT data is calculated for each channel and stored in large enough buffers to fit the full data.\r\n\r\nLast [startRendering()][start-rendering] method is called to render out the audio buffer. This is when all of the FFT calculation is done.\r\n\r\n## Showing the data\r\n\r\nEach channel of the audio file is shown in it's own chart inside a single dashboard. When the data is calculated, a dashboard is made. This dashboard is then passed to functions that setup the charts inside the dashboard and create the heatmap series based on the script processor buffer size and fft resolution.\r\n\r\nThe data from the audio APIs is in wrong format to display in the heatmap without editing it. The heatmap data has to be mapped from the one dimensional array it was generated in to a two dimensional array. This mapping in this example is done with `remapDataToTwoDimensionalMatrix` function, this function maps the data in columns. If the heatmap was displayed vertically, then the mapping would be easier as each stride of data could just be placed as a row.\r\n\r\n```js\r\n// Datamapping for vertical spectrogram\r\nconst output = Array.from(Array(tickCount)).map(() =\u003e Array.from(Array(strideSize)))\r\nfor (let row = 0; row \u003c strideSize; row += 1) {\r\n    output[row] = arr.slice(row * strideSize, row * strideSize + strideSize)\r\n}\r\n```\r\n\r\n[web-audio-api]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API\r\n[analyzer-node]: https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode\r\n[getbytefrequencydata]: https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteFrequencyData\r\n[fft]: https://en.wikipedia.org/wiki/Fast_Fourier_transform\r\n[fetch]: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch\r\n[audiobuffer]: https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer\r\n[offlineaudiocontext]: https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext\r\n[createbuffersource]: https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createBufferSource\r\n[createchannelsplitter]: https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createChannelSplitter\r\n[createsciptprocessor]: https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createScriptProcessor\r\n[start-rendering]: https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext/startRendering\r\n\n\n## API Links\n\n* [Heatmap Grid Series Intensity]\n* [Paletted Fill Style]\n* [LUT]\n* [Dashboard]\n* [Automatic axis scrolling options]\n* [Automatic axis tick placement options]\n* [Color factory HSV]\n* [Empty fill style]\n* [Empty line style]\n\n\n## Support\n\nIf you notice an error in the example code, please open an issue on [GitHub][0] repository of the entire example.\r\n\r\nOfficial [API documentation][1] can be found on [LightningChart][2] website.\r\n\r\nIf the docs and other materials do not solve your problem as well as implementation help is needed, ask on [StackOverflow][3] (tagged lightningchart).\r\n\r\nIf you think you found a bug in the LightningChart JavaScript library, please contact sales@lightningchart.com.\r\n\r\nDirect developer email support can be purchased through a [Support Plan][4] or by contacting sales@lightningchart.com.\r\n\r\n[0]: https://github.com/Arction/\r\n[1]: https://lightningchart.com/lightningchart-js-api-documentation/\r\n[2]: https://lightningchart.com\r\n[3]: https://stackoverflow.com/questions/tagged/lightningchart\r\n[4]: https://lightningchart.com/support-services/\r\n\n© LightningChart Ltd 2009-2022. All rights reserved.\r\n\n\n[Heatmap Grid Series Intensity]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/HeatmapGridSeriesIntensityValues.html\n[Paletted Fill Style]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/PalettedFill.html\n[LUT]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/LUT.html\n[Dashboard]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/classes/Dashboard.html\n[Automatic axis scrolling options]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/AxisScrollStrategies.html\n[Automatic axis tick placement options]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/AxisTickStrategies.html\n[Color factory HSV]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/functions/ColorHSV.html\n[Empty fill style]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/emptyFill-1.html\n[Empty line style]: https://lightningchart.com/js-charts/api-documentation/v7.1.0/variables/emptyLine.html\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLightning-Chart%2Flcjs-example-0802-spectrogram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLightning-Chart%2Flcjs-example-0802-spectrogram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLightning-Chart%2Flcjs-example-0802-spectrogram/lists"}