{"id":19427094,"url":"https://github.com/mfcc64/showcqt-js","last_synced_at":"2025-06-26T22:35:10.392Z","repository":{"id":56872121,"uuid":"263969608","full_name":"mfcc64/showcqt-js","owner":"mfcc64","description":"ShowCQT (Constant Q Transform) audio visualization","archived":false,"fork":false,"pushed_at":"2024-10-25T23:27:27.000Z","size":295,"stargazers_count":40,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-25T22:49:41.850Z","etag":null,"topics":["audio-visualizer","constant-q-transform","webassembly"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mfcc64.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"COPYING","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,"zenodo":null},"funding":{"github":"mfcc64","custom":["https://paypal.me/mfcc64","https://saweria.co/mfcc64"]}},"created_at":"2020-05-14T16:36:39.000Z","updated_at":"2025-04-16T20:35:24.000Z","dependencies_parsed_at":"2024-06-06T10:51:25.098Z","dependency_job_id":"ee3ddf6b-f0b2-40b8-89d4-a3a113ae372b","html_url":"https://github.com/mfcc64/showcqt-js","commit_stats":{"total_commits":53,"total_committers":1,"mean_commits":53.0,"dds":0.0,"last_synced_commit":"8739b9c8154bde5c1a53e4a5cdefa4d9a74f1ef3"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/mfcc64/showcqt-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfcc64%2Fshowcqt-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfcc64%2Fshowcqt-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfcc64%2Fshowcqt-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfcc64%2Fshowcqt-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfcc64","download_url":"https://codeload.github.com/mfcc64/showcqt-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfcc64%2Fshowcqt-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262151861,"owners_count":23266929,"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":["audio-visualizer","constant-q-transform","webassembly"],"created_at":"2024-11-10T14:10:24.054Z","updated_at":"2025-06-26T22:35:10.372Z","avatar_url":"https://github.com/mfcc64.png","language":"JavaScript","funding_links":["https://github.com/sponsors/mfcc64","https://paypal.me/mfcc64","https://saweria.co/mfcc64"],"categories":[],"sub_categories":[],"readme":"# ShowCQT\nShowCQT (Constant Q Transfrom) is a javascript audio visualization engine based on\n[ffmpeg showcqt filter](https://ffmpeg.org/ffmpeg-filters.html#showcqt).\n\n## Projects\n- [Youtube Musical Spectrum](https://github.com/mfcc64/youtube-musical-spectrum) - a browser extension that uses showcqt-js.\n- [html5-showcqtbar](https://github.com/mfcc64/html5-showcqtbar) - an example github page that uses showcqt-js.\n\n## Usage\n### npm\n```\nnpm i showcqt\n```\n```js\n// only ES module is available\n// use default import\nimport ShowCQT from \"showcqt\";\n\n// use named import\nimport { ShowCQT } from \"showcqt\";\n\n// use dynamic import\nconst { ShowCQT } = await import(\"showcqt\");\n```\n\n### CDN\n```js\n// use a specific version\nimport ShowCQT from \"https://cdn.jsdelivr.net/npm/showcqt@2.2.1/showcqt.mjs\";\n\n// use a specific major version\nimport ShowCQT from \"https://cdn.jsdelivr.net/npm/showcqt@2/showcqt.mjs\";\n\n// also on unpkg\nimport ShowCQT from \"https://unpkg.com/showcqt@2/showcqt.mjs\";\n```\n\n### Example code\n```js\n// The output frequency range is fixed between E0 - 50 cents and E10 - 50 cents.\n// Instantiate transform context. The context is uninitialized.\nvar cqt = await ShowCQT.instantiate();\n\n// Initialize transform context. May be called multiple times (reinitialization).\n// Constraints:\n//     0 \u003c rate \u003c= 96000 (actually slightly above 96000)\n//     0 \u003c width \u003c= 7680\n//     0 \u003c height \u003c= 4320\n//     1.0 \u003c= bar_v (bar height) \u003c= 100.0\n//     1.0 \u003c= sono_v (brightness) \u003c= 100.0\n//     If supersampling is true, the actual transform will be twice the width.\nvar rate = audio_ctx.sampleRate;\nvar width = canvas.width;\nvar height = canvas.height - 1;\nvar bar_v = 15;\nvar sono_v = 25;\nvar supersampling = true;\ncqt.init(rate, width, height, bar_v, sono_v, supersampling);\n\n// Change height at runtime.\nheight = 256;\ncqt.set_height(height - 1);\n\n// Change volume (bar height and brigthness) at runtime.\nbar_v = 10;\nsono_v = 20;\ncqt.set_volume(bar_v, sono_v);\n\n// Set analyser fft size.\nanalyser_left.fftSize = cqt.fft_size;\nanalyser_right.fftSize = cqt.fft_size;\n\nfunction draw() {\n    // Set input time domain data.\n    analyser_left.getFloatTimeDomainData(cqt.inputs[0]);\n    analyser_right.getFloatTimeDomainData(cqt.inputs[1]);\n    cqt.calc();\n\n    // Edit temporary color buffer. The array is Float32Array consisting of interleaved red, green, blue, and height channel.\n    // The buffer is only valid after cqt.calc() and before cqt.render_line_*().\n    // The color range is from 0.0 to 1.0 but it hasn't been clamped to the range. It may contain values greater than 1.0.\n    // The initial equations of the colors and the height:\n    // red    = sqrt(sono_v * amplitude_left);\n    // green  = sqrt(sono_v * sqrt(average(sqr(amplitude_left), sqr(amplitude_right))));\n    // blue   = sqrt(sono_v * amplitude_right);\n    // height = bar_v * sqrt(average(sqr(amplitude_left), sqr(amplitude_right)));\n    // You may edit the temporary color buffer if you want to change color scheme for example.\n    for (let x = 0; x \u003c cqt.width * 4; x += 4) {\n        let r = cqt.color[x + 0];\n        let g = cqt.color[x + 1];\n        let b = cqt.color[x + 2];\n        let h = cqt.color[x + 3];\n        cqt.color[x + 0] = g;\n        cqt.color[x + 1] = b;\n        cqt.color[x + 2] = r;\n        cqt.color[x + 3] = Math.sqrt(h);\n    }\n\n    for (let y = 0; y \u003c height; y++) {\n        // Render line, result is in cqt.output.\n        // equal to cqt.render_line_opaque(y)\n        cqt.render_line_alpha(y, 255);\n        canvas_buffer.data.set(cqt.output, 4*width*y);\n    }\n    requestAnimationFrame(draw);\n}\nrequestAnimationFrame(draw);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfcc64%2Fshowcqt-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfcc64%2Fshowcqt-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfcc64%2Fshowcqt-js/lists"}