{"id":13432738,"url":"https://github.com/mdn/webaudio-examples","last_synced_at":"2026-02-06T23:01:49.214Z","repository":{"id":37270741,"uuid":"81461723","full_name":"mdn/webaudio-examples","owner":"mdn","description":"Code examples that accompany the MDN Web Docs pages relating to Web Audio.","archived":false,"fork":false,"pushed_at":"2025-10-27T11:55:04.000Z","size":11352,"stargazers_count":1397,"open_issues_count":9,"forks_count":443,"subscribers_count":40,"default_branch":"main","last_synced_at":"2025-10-27T13:10:45.515Z","etag":null,"topics":["audio","demo","examples","webaudio","webaudio-api"],"latest_commit_sha":null,"homepage":"https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-02-09T15:01:40.000Z","updated_at":"2025-10-27T11:55:07.000Z","dependencies_parsed_at":"2023-12-21T09:45:44.070Z","dependency_job_id":"4ba6d215-74c4-4b60-beff-21f2b463613d","html_url":"https://github.com/mdn/webaudio-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mdn/webaudio-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdn%2Fwebaudio-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdn%2Fwebaudio-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdn%2Fwebaudio-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdn%2Fwebaudio-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdn","download_url":"https://codeload.github.com/mdn/webaudio-examples/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdn%2Fwebaudio-examples/sbom","scorecard":{"id":633266,"data":{"date":"2025-08-11","repo":{"name":"github.com/mdn/webaudio-examples","commit":"7fe8bd4cc0c80470c52e440307e748fc67bdb283"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":5.1,"checks":[{"name":"Maintained","score":0,"reason":"1 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":8,"reason":"Found 16/20 approved changesets -- score normalized to 8","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Info: jobLevel 'actions' permission set to 'read': .github/workflows/codeql.yml:19","Info: jobLevel 'contents' permission set to 'read': .github/workflows/codeql.yml:20","Warn: no topLevel permission defined: .github/workflows/codeql.yml:1","Warn: no topLevel permission defined: .github/workflows/idle.yml:1","Warn: no topLevel permission defined: .github/workflows/set-default-labels.yml:1","Warn: no topLevel permission defined: .github/workflows/welcome-bot.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: Creative Commons Zero v1.0 Universal: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/mdn/webaudio-examples/codeql.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/mdn/webaudio-examples/codeql.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/mdn/webaudio-examples/codeql.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/idle.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/mdn/webaudio-examples/idle.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/set-default-labels.yml:6: update your workflow using https://app.stepsecurity.io/secureworkflow/mdn/webaudio-examples/set-default-labels.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/welcome-bot.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/mdn/webaudio-examples/welcome-bot.yml/main?enable=pin","Info:   0 out of   3 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   3 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":7,"reason":"SAST tool detected but not run on all commits","details":["Info: SAST configuration detected: CodeQL","Warn: 2 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-21T08:27:05.531Z","repository_id":37270741,"created_at":"2025-08-21T08:27:05.531Z","updated_at":"2025-08-21T08:27:05.531Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29179565,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T22:12:24.066Z","status":"ssl_error","status_checked_at":"2026-02-06T22:12:09.859Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","demo","examples","webaudio","webaudio-api"],"created_at":"2024-07-31T02:01:15.939Z","updated_at":"2026-02-06T23:01:49.199Z","avatar_url":"https://github.com/mdn.png","language":"HTML","readme":"# webaudio-examples\n\nCode examples that accompany the [MDN Web Audio documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API).\n\n## Serving the examples\n\nTo preview the examples, clone the repository and navigate to the example you want to view.\nFor example, if you have Python installed, you can use the following commands to serve the `audio-analyser` example:\n\n```bash\ncd audio-analyser\npython3 -m http.server\n```\n\n\u003e [!NOTE]\n\u003e If you're using the built-in Python HTTP server, be sure to use at least [Python version `3.10.12`](https://www.python.org/downloads/release/python-31012/).\n\nThen navigate to `http://localhost:8000` in your browser.\n\nFor more information on serving files locally using different languages or technologies, see [Running a simple local HTTP server](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#running_a_simple_local_http_server).\n\n## Repository contents\n\n### Audio analyser\n\nThe [audio-analyser](https://github.com/mdn/webaudio-examples/tree/main/audio-analyser) directory contains a very simple example showing a graphical visualization of an audio signal drawn with data taken from an [`AnalyserNode`](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode) interface. [Run the demo live](http://mdn.github.io/webaudio-examples/audio-analyser/).\n\n### Audio basics\n\nThe [audio-basics](https://github.com/mdn/webaudio-examples/tree/main/audio-basics) directory contains a fun example showing a retro-style \"boombox\" that allows audio to be played, stereo-panned, and volume-adjusted. [Run the demo live](http://mdn.github.io/webaudio-examples/audio-basics/).\n\n### Audio buffer\n\nThe [audio-buffer](https://github.com/mdn/webaudio-examples/tree/main/audio-buffer) directory contains a very simple example showing how to use an [`AudioBuffer`](https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer) interface in the Web Audio API. [Run the demo live](http://mdn.github.io/webaudio-examples/audio-buffer/).\n\n### Audio param\n\nThe [audio-param](https://github.com/mdn/webaudio-examples/tree/main/audio-param) directory contains some simple examples showing how to use the methods of the Web Audio API [`AudioParam`](https://developer.mozilla.org/en-US/docs/Web/API/AudioParam) interface. [Run example live](http://mdn.github.io/webaudio-examples/audio-param/).\n\n### Audio context states\n\nThe [audiocontext-states](https://github.com/mdn/webaudio-examples/tree/main/audiocontext-states) directory contains a simple demo of the new Web Audio API [`AudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) methods, including the `states` property and the `close()`, `resume()`, and `suspend()` methods. [Run the demo live](http://mdn.github.io/webaudio-examples/audiocontext-states/).\n\n### Audio worklet\n\nThe [audioworklet](https://github.com/mdn/webaudio-examples/tree/main/audioworklet) directory contains an example showing how to use the [`AudioWorklet`](https://developer.mozilla.org/en-US/docs/Web/API/AudioWorklet) interface. See also the guide on [background audio processing using AudioWorklet](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_AudioWorklet). [Run the example live](http://mdn.github.io/webaudio-examples/audioworklet/).\n\n### Compressor example\n\nThe [compressor-example](https://github.com/mdn/webaudio-examples/tree/main/compressor-example) directory contains a simple demo to show usage of the Web Audio API [`BaseAudioContext.createDynamicsCompressor()`](https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createDynamicsCompressor) method and [`DynamicsCompressorNode`](https://developer.mozilla.org/en-US/docs/Web/API/DynamicsCompressorNode) interface. [Run the example live](http://mdn.github.io/webaudio-examples/compressor-example/).\n\n### Create media stream destination\n\nThe [create-media-stream-destination](https://github.com/mdn/webaudio-examples/tree/main/create-media-stream-destination) directory contains a simple example showing how the Web Audio API [`AudioContext.createMediaStreamDestination()`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamDestination) method can be used to output a stream - in this case to a [`MediaRecorder`](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) instance - to output a sinewave to an [opus](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs#Opus) file. [Run the demo live](http://mdn.github.io/webaudio-examples/create-media-stream-destination/).\n\n### Decode audio data\n\nThe [decode-audio-data](https://github.com/mdn/webaudio-examples/tree/main/decode-audio-data) directory contains a simple example demonstrating usage of the Web Audio API [`BaseAudioContext.decodeAudioData()`](https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/decodeAudioData) method. [View example live](http://mdn.github.io/webaudio-examples/decode-audio-data/promise).\n\n### IIR filter node\n\nThe [iirfilter-node](https://github.com/mdn/webaudio-examples/tree/main/iirfilter-node) directory contains an example showing usage of an [`IIRFilterNode`](https://developer.mozilla.org/en-US/docs/Web/API/IIRFilterNode) interface. [Run the demo live](http://mdn.github.io/webaudio-examples/iirfilter-node/).\n\n### Media source buffer\n\nThe [media-source-buffer](https://github.com/mdn/webaudio-examples/tree/main/media-source-buffer) directory contains a simple example demonstrating usage of the Web Audio API [`AudioContext.createMediaElementSource()`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource) method. [View the demo live](http://mdn.github.io/webaudio-examples/media-source-buffer/).\n\n### Multi track\n\nThe [multi-track](https://github.com/mdn/webaudio-examples/tree/main/multi-track) directory contains an example of connecting separate independently-playable audio tracks to a single [`AudioDestinationNode`](https://developer.mozilla.org/en-US/docs/Web/API/AudioDestinationNode) interface. [Run the example live](http://mdn.github.io/webaudio-examples/multi-track/).\n\n### Offline audio context\n\nThe [offline-audio-context](https://github.com/mdn/webaudio-examples/tree/main/offline-audio-context) directory contains a simple example to show how a Web Audio API [`OfflineAudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext) interface can be used to rapidly process/render audio in the background to create a buffer, which can then be used in any way you please. For more information, see [https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext). [Run example live](http://mdn.github.io/webaudio-examples/offline-audio-context/).\n\n### Offline audio context promise\n\nThe [offline-audio-context-promise](https://github.com/mdn/webaudio-examples/tree/main/offline-audio-context-promise) directory contains a simple example to show how a Web Audio API [`OfflineAudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext) interface can be used to rapidly process/render audio in the background to create a buffer, which can then be used in any way you please. [Run the example live](http://mdn.github.io/webaudio-examples/offline-audio-context-promise/).\n\n### Output timestamp\n\nThe [output-timestamp](https://github.com/mdn/webaudio-examples/tree/main/output-timestamp) directory contains an example of how the [`AudioContext.getOutputTimestamp()`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/getOutputTimestamp) property can be used to log `contextTime` and `performanceTime` to the console. [Try the demo live](https://mdn.github.io/webaudio-examples/output-timestamp/).\n\n### Panner node\n\nThe [panner-node](https://github.com/mdn/webaudio-examples/tree/main/panner-node) directory contains a demo to show basic usage of the Web Audio API [`BaseAudioContext.createPanner()`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createPanner) method to control audio spatialization. [Run the example live](http://mdn.github.io/webaudio-examples/panner-node/).\n\n### Script processor node\n\nThe [script-processor-node](https://github.com/mdn/webaudio-examples/tree/main/script-processor-node) directory contains a simple demo showing how to use the Web Audio API's [`ScriptProcessorNode`](https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode) interface to process a loaded audio track, adding a little bit of white noise to each audio sample. See the [live demo](http://mdn.github.io/webaudio-examples/script-processor-node/).\n\n### Spatialization\n\nThe [spatialization](https://github.com/mdn/webaudio-examples/tree/main/spatialization) directory contains an example of how the various properties of a [`PannerNode`](https://developer.mozilla.org/en-US/docs/Web/API/PannerNode) interface can be adjusted to emulate sound in a three-dimensional space. For more information see [Web audio spatialization basics](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics). Try the [live demo](http://mdn.github.io/webaudio-examples/spatialization/).\n\n### Step sequencer\n\nThe [step-sequencer](https://github.com/mdn/webaudio-examples/tree/main/step-sequencer) directory contains a simple step-sequencer that loops and manipulates sounds based on a dial-up modem. For more information see [Advanced techniques: creating sound, sequencing, timing, scheduling](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques). See the [live demo](http://mdn.github.io/webaudio-examples/step-sequencer/) also.\n\n### Stereo panner node\n\nThe [stereo-panner-node](https://github.com/mdn/webaudio-examples/tree/main/stereo-panner-node) directory contains a simple example to show how the Web Audio API [`StereoPannerNode`](https://developer.mozilla.org/en-US/docs/Web/API/StereoPannerNode) interface can be used to pan an audio stream. [Run the example live](http://mdn.github.io/webaudio-examples/stereo-panner-node/).\n\n### Stream source buffer\n\nThe [stream-source-buffer](https://github.com/mdn/webaudio-examples/tree/main/stream-source-buffer) directory contains a simple example demonstrating usage of the Web Audio API [`MediaStreamAudioSourceNode`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamAudioSourceNode) object. [View example live](http://mdn.github.io/webaudio-examples/stream-source-buffer/).\n\n### Violent theremin\n\nViolent theremin uses the Web Audio API to generate sound, and HTML5 canvas for a bit of pretty visualization. The colors generated depend on the pitch and gain of the current note, which are themselves dependent on the mouse pointer position.\n\nYou can [view the demo](http://mdn.github.io/webaudio-examples/violent-theremin/) live here.\n\n### Voice-change-O-matic\n\nThe [voice-change-o-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) directory contains a Web Audio API-powered voice changer and visualizer.\n\nYou can [view the demo](http://mdn.github.io/webaudio-examples/voice-change-o-matic/) live here.\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdn%2Fwebaudio-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdn%2Fwebaudio-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdn%2Fwebaudio-examples/lists"}