{"id":22889199,"url":"https://github.com/theanam/webaudio-oscilloscope","last_synced_at":"2025-05-07T12:43:57.115Z","repository":{"id":42792695,"uuid":"272942303","full_name":"theanam/webaudio-oscilloscope","owner":"theanam","description":"A highly customizable oscilloscope for Web Audio 🔈 🎤","archived":false,"fork":false,"pushed_at":"2022-12-11T10:25:31.000Z","size":1126,"stargazers_count":71,"open_issues_count":9,"forks_count":13,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-31T10:11:13.551Z","etag":null,"topics":["oscilloscope","web-audio-api","webaudio","webrtc","webrtc-audio"],"latest_commit_sha":null,"homepage":"https://npm.im/webaudio-oscilloscope","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theanam.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}},"created_at":"2020-06-17T10:14:31.000Z","updated_at":"2025-01-03T06:48:59.000Z","dependencies_parsed_at":"2023-01-26T21:15:24.552Z","dependency_job_id":null,"html_url":"https://github.com/theanam/webaudio-oscilloscope","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/theanam%2Fwebaudio-oscilloscope","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theanam%2Fwebaudio-oscilloscope/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theanam%2Fwebaudio-oscilloscope/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theanam%2Fwebaudio-oscilloscope/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theanam","download_url":"https://codeload.github.com/theanam/webaudio-oscilloscope/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252880785,"owners_count":21819059,"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":["oscilloscope","web-audio-api","webaudio","webrtc","webrtc-audio"],"created_at":"2024-12-13T21:18:48.515Z","updated_at":"2025-05-07T12:43:57.088Z","avatar_url":"https://github.com/theanam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Audio Oscilloscope\n\nA highly customizable oscilloscope for web Audio that supports any source supported by the browser, and renders on a HTML5 canvas. \n\n![Imgur](https://i.imgur.com/df8zx4v.gif)\n\n\n## ✨[Try The Live Demo](https://theanam.github.io/webaudio-oscilloscope/)\n\n\u003e If you are using v1 and planning to move to v2 or v3, the constructor changes a little bit.\n\n### Installation\n```bash\nyarn add webaudio-oscilloscope\n```\n\nOr you can link this file in your HTML:\n\n```html\n\u003cscript src=\"https://unpkg.com/webaudio-oscilloscope@3.2.1/dist/index.js\"\u003e\u003c/script\u003e\n```\nIf you include the script in your HTML file, you'll get a global object called `_osc`. You can acces the functionalities like: `_osc.Oscilloscope`.\n\n### Example use: \nFirst create a canvas element in your page: \n```html\n\u003ccanvas class=\"osc\" width=\"120px\" height=\"80px\"\u003e\n\u003cbutton class=\"start\"\u003eStart\u003c/button\u003e\n```\nIn your JavaScript File:\n\n```js\nimport {Oscilloscope, createAudioContext, getUserMedia} from \"webaudio-oscilloscope\";\nfunction startOsc(){\n    let ctx = createAudioContext();\n    let cvs = document.querySelector(\".osc\");\n    getUserMedia({audio: true})\n        .then(stream=\u003e{\n            // Works with any supported source\n            let src = ctx.createMediaStreamSource(stream);\n            let osc = new Oscilloscope(ctx, src, cvs);\n            osc.start();\n        });\n}\ndocument.querySelector(\".start\").addEventListener(\"click\",startOsc);\n```\n\n*This package has an utility function, `createAudioContext` to create an audio context (to avoid dealing with `createAudioContext` and `webkitCreateAudioContext` variations)*\n\n\u003e This package also has an utility function `getUSerMedia` that resolves with a Media stream, or resolves with a `null`. This deals with the different variations and prefixed versions of the `getUserMedia` API. \n\n#### Since Creating *Oscilloscope from `mediaStream`*  is a very common user case, There's a shorthand function for this.The above code can also be written like:\n\n```js\nimport {MediaStreamOscilloscope} from \"webaudio-oscilloscope\";\nfunction startOsc(){\n    let cvs = document.querySelector(\".osc\");\n    navigator.mediaDevices.getUserMedia({audio: true})\n        .then(stream=\u003e{\n            let osc = new MediaStreamOscilloscope(stream, cvs);\n            osc.start();\n        });\n}\ndocument.querySelector(\".start\").addEventListener(\"click\",startOsc);\n```\n\n## Reference: \n\n### Constructor: \n\n```js\nimport {Oscilloscope} from \"webaudio-oscilloscope\";\n new Oscilloscope(AudioContext, AudioSource, CanvasElement, AudioDestination, [fft, init,primer]);\n```\n\nArgument | Required | Default | Description |\n---------|----------| --------|-------------|\naudioContext | true | null    | The Audio Context to use. [See MDN](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext)|\nAudioSource | true | null | The Audio Source to listen to. [See MDN](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext)|\nCanvasElement | true | null | The HTML5 canvas element to render the Oscilloscope in|\nAudio Destination | false | null | The Node to pass the output to. e.g destination or any additional node|\nfft | false | 2048 | The fft size for the AnalyserNode. The larger the number the smoother the graph the more resource it will consume|\ninit | false | null | Function to run on the canvas before starting to draw. Gets called only once before starting the drawing Cycle. See below for details|\nprimer | false | null | The function that gets caled before every render cycle. Useful for stying the Output| \n\n### Oscilloscope from Media Stream:\nIt's a common use case to create Oscilloscope from Media Stream, Hence, there's a short form. \n```js\nimport {MediaStreamOscilloscope} from \"webaudio-oscilloscope\";\nnew MediaStreamOscilloscope(mediaStream, CanvasElement, AudioDestination, [fft, init,primer]); \n```\nThis function takes a `mediaStream` object instead of an `audioContext` and `audioSource`, the rest of the parameters are the same. This also produces an `Oscilloscope` instance.\n\n### Oscilloscope Methods: \n\n#### start(): \nStarts the oscilloscope. Does not take any arguments. Running start on an already running Oscilloscope does not have any effect.\n\n#### pause(): \nPauses the Oscilloscope on the last frame. Paused Oscilloscope can be started using the `start()` method. Does not take any arguments. This does not affect the media source. Just pauses the Oscilloscope.\n\n#### reset():\nResets the oscilloscope canvas. Does not take any arguments. Reset oscilloscope can be started using the `start()` function. Does not affect the media source.\n\n### Changing the look and feel: \n\nThis directly relate to the *highly customizable* claim in the title. If you know your way around [HTML5 Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), You'll feel at home. \n\nThe Oscilloscope can be customized by using, the `init` and `primer` arguments in the constructor. If you need one of the two, just pass `null` for the other one. It will be ignored.\n\n#### init() [Function]: \n\n\u003e If you want to change the colors or line width of the oscilloscope, use a custom `init` function. Oscilloscope background is filled with the `fillStyle` property of the canvas 2d context, and `strokeStyle` property affetcs the graph color. \n\nYou can create a function like the one below and pass it in the constructor. In fact this is the default init function. You can do stuff like setting the default fill and stroke colors,setting line width etc. For example, to set the fill and stroke style of the canvas: \n\n```js\nfunction customInit(context, width, height){\n    ctx.fillStyle   = \"#000\";\n    ctx.strokeStyle = \"#0f0\";\n}\n// Then Initiate the Oscilloscope like this:\nnew Oscilloscope(AudioContext, AudioSource, CanvasElement, AudioDestination, 2042, customInit);\n```\n\n#### primer() [Function]:\nThis function gets called before every render. If you need to draw anything (a graph or maybe some values), you can do it here. For example: the default primer function fills the background with the default fill color(black):\n\n```js\nfunction customPrimer(ctx, width, height){\n    ctx.fillRect(0,0,width,height);\n}\n// Then Initiate the Oscilloscope like this:\nnew Oscilloscope(AudioContext, AudioSource, CanvasElement, AudioDestination, 2042, null, customPrimer);\n```\nFor example: If you want to render your oscilloscope on a graph, try this primer function: \n```js\nfunction fancyGraph(ctx,width,height){\n    let backstrokeStyle = ctx.strokeStyle;\n    ctx.strokeStyle = \"#444\";\n    ctx.fillRect(0,0,width,height);\n    ctx.beginPath();\n    for(let i=0; i\u003cwidth; i+=10){\n        ctx.moveTo(i,0);\n        ctx.lineTo(i,height);\n    }\n    for(let j=0; j\u003cheight; j+=10){\n        ctx.moveTo(0,j);\n        ctx.lineTo(width,j);\n    }\n    ctx.stroke();\n    ctx.strokeStyle = backstrokeStyle;\n}\n// Then Initiate the Oscilloscope like this:\nnew Oscilloscope(AudioContext, AudioSource, CanvasElement, AudioDestination, 2042, null, fancyGraph);\n```\nboth The function exacly gets 3 arguments, `context` (The canvas rendering context), `width` (the canvas width), `height` (the canvas height). You don't need to worry where these values will come from, just assume that they will be available in the function context.\n\n## Plugins\nYou can write plugin for this using the `init` and `primer` functions.\n\n## Contributing:\nThis package is released under the MIT license Feel free to contribute.\n\nMade with 🖤 and JS.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheanam%2Fwebaudio-oscilloscope","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheanam%2Fwebaudio-oscilloscope","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheanam%2Fwebaudio-oscilloscope/lists"}