{"id":14988504,"url":"https://github.com/jgthms/web-audio-peak-meter","last_synced_at":"2025-10-06T01:30:20.484Z","repository":{"id":65982023,"uuid":"352659337","full_name":"jgthms/web-audio-peak-meter","owner":"jgthms","description":"Customizable peak meters, using the web audio API.","archived":false,"fork":true,"pushed_at":"2021-01-18T01:54:19.000Z","size":6421,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-01T01:23:08.223Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://esonderegger.github.io/web-audio-peak-meter/","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"esonderegger/web-audio-peak-meter","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jgthms.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":"2021-03-29T13:47:11.000Z","updated_at":"2022-02-09T11:29:55.000Z","dependencies_parsed_at":"2023-02-19T19:15:53.432Z","dependency_job_id":null,"html_url":"https://github.com/jgthms/web-audio-peak-meter","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/jgthms%2Fweb-audio-peak-meter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgthms%2Fweb-audio-peak-meter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgthms%2Fweb-audio-peak-meter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jgthms%2Fweb-audio-peak-meter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jgthms","download_url":"https://codeload.github.com/jgthms/web-audio-peak-meter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235469520,"owners_count":18995333,"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":[],"created_at":"2024-09-24T14:16:49.990Z","updated_at":"2025-10-06T01:30:14.852Z","avatar_url":"https://github.com/jgthms.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Audio Peak Meters\nCustomizable peak meters, using the web audio API. It can measure peak or true peak based on ITU-R BS.1770\n\n[![Build Status](https://travis-ci.org/esonderegger/web-audio-peak-meter.svg?branch=master)](https://travis-ci.org/esonderegger/web-audio-peak-meter)\n\n## Demo\n\nSee [https://esonderegger.github.io/web-audio-peak-meter](https://esonderegger.github.io/web-audio-peak-meter) for a demo.\n\n## Usage (basic)\n\nTo use these meters, first create a `\u003cdiv\u003e` with a width and height and an `\u003caudio\u003e` element:\n```html\n\u003cdiv id=\"my-peak-meter\" style=\"width: 5em; height: 20em; margin: 1em 0;\"\u003e\n\u003c/div\u003e\n\u003caudio id=\"my-audio\" preload=\"metadata\" controls=\"controls\"\u003e\n  \u003csource src=\"audio/marines_hymn.mp3\" type=\"audio/mpeg\"\u003e\n\u003c/audio\u003e\n```\n\nThen, at the bottom of your `\u003cbody\u003e` tag, add the script tag for these meters. Next, create an `AudioContext` if you don't have one already and create an [AudioNode](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode) from the `\u003caudio\u003e` element, connecting it to the destination node. Finally, create a meter node and call the `createMeter` function, passing in the Element object, the meter node, and an optional object for configuration options, like so:\n\nNote: for this to work in Google Chrome, we have to resume the audio context after a user gesture ([more info](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio)). Adding a listener to the audio element's `play` event is one way to do this.\n```html\n\u003cscript src=\"https://assets.rpy.xyz/web-audio-peak-meter.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var myMeterElement = document.getElementById('my-peak-meter');\n  var myAudio = document.getElementById('my-audio');\n  var audioCtx = new window.AudioContext();\n  var sourceNode = audioCtx.createMediaElementSource(myAudio);\n  sourceNode.connect(audioCtx.destination);\n  var meterNode = webAudioPeakMeter.createMeterNode(sourceNode, audioCtx);\n  webAudioPeakMeter.createMeter(myMeterElement, meterNode, {});\n  myAudio.addEventListener('play', function() {\n    audioCtx.resume();\n  });\n\u003c/script\u003e\n```\n\nIn this example we used an HTML5 audio element, but these meters can work with any web audio API source node. This example was just meant to show the simplest possible use case. If you are already familiar with the web audio API adapting this example to your needs should be fairly self-explanatory, but please reach out if anything isn't working or doesn't make sense.\n\n## Usage (advanced)\n\nIf you are compiling your javascript with a tool like browserify, webpack, or rollup, you can integrate these meters into your site using the CommonJS `require()` syntax.\n\nFirst, add web-audio-peak-meter as a dev dependency to your project:\n\n```bash\nnpm install --save-dev web-audio-peak-meter\n```\n\nNext, import the webAudioPeakMeter module into your javascript:\n```js\nvar webAudioPeakMeter = require('web-audio-peak-meter');\n```\n\nFinally, use as you would in the above example:\n```js\nvar myMeterElement = document.getElementById('my-peak-meter');\nvar myAudio = document.getElementById('my-audio');\nvar audioCtx = new (window.AudioContext || window.webkitAudioContext)();\nvar sourceNode = audioCtx.createMediaElementSource(myAudio);\nsourceNode.connect(audioCtx.destination);\nvar meterNode = webAudioPeakMeter.createMeterNode(sourceNode, audioCtx);\nwebAudioPeakMeter.createMeter(myMeterElement, meterNode, {});\nmyAudio.addEventListener('play', function() {\n  audioCtx.resume();\n});\n```\n\n(Note: the markup remains the same as in the basic example)\n\n## Local Development\n\nThe minified javascript is built using rollup. There's no difference (for now) between the development version and the production version. To start a local server for debugging, run:\n\n```\nnpm ci\nnpm run start\n```\n\nAnd open a browser to [http://localhost:6080/index.html](http://localhost:6080/index.html) to see a local version of the docs page.\n\n## Contributing\n\nContributions are welcome! I'd love to hear any ideas for how these meters could be more user-friendly as well as about any bugs or unclear documentation. If you are at all interested in this project, please create an issue or pull request on this project's [github page](https://github.com/esonderegger/web-audio-peak-meter).\n\n## Copyright and license\n\nCode and documentation copyright 2016 [Evan Sonderegger](https://rpy.xyz) and released under the [MIT License](https://github.com/esonderegger/web-audio-peak-meter/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgthms%2Fweb-audio-peak-meter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjgthms%2Fweb-audio-peak-meter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjgthms%2Fweb-audio-peak-meter/lists"}