{"id":21897760,"url":"https://github.com/webmaxru/bpm-counter","last_synced_at":"2025-09-04T05:18:29.503Z","repository":{"id":46956276,"uuid":"399621363","full_name":"webmaxru/bpm-counter","owner":"webmaxru","description":"BPM Techno - Free Online Real-Time BPM Counter for DJ","archived":false,"fork":false,"pushed_at":"2024-12-04T12:10:51.000Z","size":5893,"stargazers_count":43,"open_issues_count":4,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-15T18:11:27.180Z","etag":null,"topics":["azure-static-web-apps","bpm","dj","pwa","react","static-web-app","workbox"],"latest_commit_sha":null,"homepage":"https://bpmtech.no","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/webmaxru.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,"zenodo":null}},"created_at":"2021-08-24T22:31:57.000Z","updated_at":"2025-04-14T23:42:11.000Z","dependencies_parsed_at":"2025-04-15T18:00:29.441Z","dependency_job_id":"08b97123-1bf0-49dd-8a4f-1b54a262842f","html_url":"https://github.com/webmaxru/bpm-counter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webmaxru/bpm-counter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmaxru%2Fbpm-counter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmaxru%2Fbpm-counter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmaxru%2Fbpm-counter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmaxru%2Fbpm-counter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webmaxru","download_url":"https://codeload.github.com/webmaxru/bpm-counter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webmaxru%2Fbpm-counter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273555459,"owners_count":25126316,"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","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["azure-static-web-apps","bpm","dj","pwa","react","static-web-app","workbox"],"created_at":"2024-11-28T14:18:54.874Z","updated_at":"2025-09-04T05:18:29.444Z","avatar_url":"https://github.com/webmaxru.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BPM Techno - Free Online Real-Time BPM Counter for DJ\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"public/images/social.png\" width=\"300\"\u003e\n\u003c/p\u003e\n\nThis is a 3-in-1 project:\n\n1. A real product for DJs to help with identifying BPM (beats per minute) of the track currently playing.\n2. A real-world demo and a playground for [Azure Static Web Apps](https://azure.microsoft.com/en-us/services/app-service/static/?ocid=aid3040965) service.\n3. Proof of concept for a Progressive Web App (PWA) driven by Workbox-powered service worker.\n\n### Web application (installable, offline-ready)\n\n[BPMTech.no](https://bpmtech.no) - Free Online Real-Time BPM Counter for DJ\n\n### Video demo\n\n[\u003cimg src=\"https://img.youtube.com/vi/o9BIK5QENJU/maxresdefault.jpg\" width=\"300\"\u003e](https://youtu.be/o9BIK5QENJU)\n\n*(click to watch on YouTube)*\n\n## Flow and resources for the Azure Static Web Apps features demo\n\n### Installation\n\n```shell\ngit clone https://github.com/webmaxru/bpm-counter.git\ncd bpm-counter\nnpm install\n\n# Installing tools for Static Web Apps and Azure Functions\nnpm install -g @azure/static-web-apps-cli\nnpm install -g azure-functions-core-tools@3 --unsafe-perm true\n```\n\n### Starting local development server\n\n```shell\n# Instead of CRA's \"npm start\" we use SWA CLI's command to start everything at once\nswa start http://localhost:3000 --run \"npm start\" --api-location ./api\n```\n\nOpen [http://localhost:4280](http://localhost:4280) in your browser.\n\n### Deploying to Azure\n\nTo deploy this project to Azure, you need to fork this repo to your own GitHub account. You will also need an Azure subscription. If you don't have it, you can [get Azure subscription here for free](https://aka.ms/free-azure-pass) with $200 credit.\n\n*Please note, that Azure Static Web Apps service has a [generous free tier](https://azure.microsoft.com/en-us/pricing/details/app-service/static/?ocid=aid3040965) which is enough for many types of the personal projects.*\n\nAfter you have the repo in your GitHub account, and Azure subscription ready, use an [Azure Static Web Apps extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) or [Azure Portal](https://portal.azure.com/?feature.customportal=false#create/Microsoft.StaticApp) to create an SWA resource.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"public/images/cloud/vscode.gif\" height=\"100\"\u003e\n    - or -\n    \u003cimg src=\"public/images/cloud/portal.gif\" height=\"100\"\u003e\n\u003c/p\u003e\n\nUse the following parameters:\n\n- App location: **/**\n- Api location: **api**\n- Output location: **build**\n\nWhat will happen:\n\n- In a few seconds, you will see the website deployed to Azure with a development URL like *random-word.azurestaticapps.net* ([example](https://mango-mud-0136f961e.azurestaticapps.net/)). You can connect your own custom domain to it using \"Custom domain\" option in the portal.\n\n\u003cimg src=\"public/images/cloud/domains.png\" width=\"400\"\u003e\n\n- A GitHub Actions file will be created in `.github/workflows` folder of your repo. Similar to [the one](https://github.com/webmaxru/bpm-counter/blob/main/.github/workflows/azure-static-web-apps-mango-mud-0136f961e.yml) in the original repo.\n\nYou are now ready to explore the Azure Static Web Apps features.\n\n### Automatic deployment on code change\n\n1. Do any code change in the application. Something that will be clearly visible on the first page, for example [app name](https://github.com/webmaxru/bpm-counter/blob/main/src/App.js#L70) in the header.\n2. Commit and push the changes to `main` branch (or the branch you specified during resource creation).\n3. Go to [Actions](https://github.com/webmaxru/bpm-counter/actions) page of your repo to make sure that the workflow is running.\n\n[\u003cimg src=\"public/images/cloud/actions.png\" width=\"400\"\u003e](https://github.com/webmaxru/bpm-counter/actions)\n\n4. On completion, open your website in a browser, you will see the new version.\n\n**Please note, this is a service worker-driven application, so you will see the prompt to reload the page.**\n\n\u003cimg src=\"public/images/cloud/update.png\" width=\"300\"\u003e\n\n### Staging environments\n\nYou can review pull requests in pre-production environment before they are merged to the main branch.\n\n1. Create a branch for your new feature.\n\n```shell\ngit checkout -b new-feature\n```\n\nDo any code change in the application. Something that will be clearly visible on the first page, for example [change background color](https://github.com/webmaxru/bpm-counter/blob/main/src/index.css#L16).\n\n2. Commit and push the changes to the branch.\n\n```shell\ngit add .\ngit commit -m \"New feature\"\ngit push origin new-feature\n```\n\n3. Go to you GitHub repo page and [create a new Pull Request](https://github.com/webmaxru/bpm-counter/compare/new-feature?expand=1) from the branch.\n\n4. Go to [Actions](https://github.com/webmaxru/bpm-counter/actions) page of your repo to make sure that the workflow is running.\n\n[\u003cimg src=\"public/images/cloud/pr.png\" width=\"400\"\u003e](https://github.com/webmaxru/bpm-counter/actions)\n\n5. On completion, you will have a new version of the website deployed to Azure to a [new URL](https://mango-mud-0136f961e-2.westus2.azurestaticapps.net/). You can get this URL either from the workflow output on Azure or in the Azure Portal on Environments tab. GitHub Actions bot will also post this URL to your Pull Request [comments](https://github.com/webmaxru/bpm-counter/pull/2).\n\n6. Now, you can run various tests on your new version.\n\nIf the new version looks good and you merge this Pull Request to the main (tracked by SWA) branch, the workflow will automatically deploy the new version to this tracked branch and delete staging environment.\n\n\u003cimg src=\"public/images/cloud/environments.png\" width=\"400\"\u003e\n\n**Please note, staged versions of your application are currently accessible publicly by their URL, even if your GitHub repository is private.**\n\n[🗎 Documentation](https://docs.microsoft.com/en-us/azure/static-web-apps/review-publish-pull-requests?ocid=aid3040965)\n\n### API Using Azure Functions\n\nYou can use the [Azure Functions](https://azure.microsoft.com/en-us/services/functions/?ocid=aid3040965) to build your own API for your static web app. The simplest option is using Managed Functions option: all Azure Functions you create in `api` directory will be automatically deployed to the SWA. In this project, we use [`feedback` function](https://github.com/webmaxru/bpm-counter/blob/main/api/feedback/index.js) to gather statistics on correct or wrong BPMs detected.\n\nTo test it even without the music playing, you can pass a \"hardcoded\" BPM value to the application: [by using bpm parameter](https://bpmtech.no/?bpm=120). How to test it:\n\n1. Click \"Start listening\" button.\n2. Click \"Thumbs up\" button.\n3. Check the network POST request made to `https://bpmtech.no/api/feedback` endpoint and its response.\n\nHow to create a new API function:\n\n1. Use \"Create HTTP Function\" button in VS Code extension.\n\n\u003cimg src=\"public/images/cloud/function.png\" width=\"300\"\u003e\n\n2. Follow the creation wizard.\n3. Write your code.\n4. Commit and push the changes to the branch.\n5. Your function will be automatically deployed to the SWA.\n\n\u003cimg src=\"public/images/cloud/functions.png\" width=\"400\"\u003e\n\n[🗎 Documentation](https://docs.microsoft.com/en-us/azure/static-web-apps/add-api?ocid=aid3040965)\n\n### Routing\n\nAzure SWA supports custom routing which allows you to:\n\n- Set up redirects\n- Organize navigation fallback for the single-page applications\n- Set up custom headers\n- Register MIME types\n- Define custom pages for HTTP errors\n- Protect resources by a role-based access control (RBAC)\n\nYou configure the rules in [staticwebapp.config.json](https://github.com/webmaxru/bpm-counter/blob/main/src/staticwebapp.config.json) which you can put anywhere in the application folder of the repo, there is no requirement to put it in the output (public) folder).\n\nHow to test it:\n\n1. Go directly to [/about](https://bpmtech.no/about) page. You will see the application, not error 404 because of the [navigation fallback](https://github.com/webmaxru/bpm-counter/blob/main/src/staticwebapp.config.json#L39) rule.\n2. Go to [any non-existing resource](https://bpmtech.no/images/nopic.jpg) from the navigationFallback exclude list. You will see the custom 404 error page configured in [this](https://github.com/webmaxru/bpm-counter/blob/main/src/staticwebapp.config.json#L45) rule.\n3. Check the response headers. They contain \"X-Powered-By: Maxim Salnikov and Azure Static Web Apps\" set on [this line](https://github.com/webmaxru/bpm-counter/blob/main/src/staticwebapp.config.json#L59).\n4. Go to [/aboutme](https://bpmtech.no/aboutme) page. You will be redirected to [/about](https://bpmtech.no/about) because of [this](https://github.com/webmaxru/bpm-counter/blob/main/src/staticwebapp.config.json#L34) rule.\n\n**Please note, the hosted application is controlled by a service worker. So after the first load, the routing might look not exactly like explained above. To test the app without a service worker, start a new browser session in Private/Incognito mode.**\n\n[🗎 Documentation](https://docs.microsoft.com/en-us/azure/app-service/app-service-web-routing-overview?ocid=aid3040965)\n\n### Authentication\n\nWith the help of Azure Static Web Apps, you can protect your application resources with the role-based access control (RBAC). \n\nSetting up authentication:\n\n1. You specify the role(s) needed to access particular URLs in the [staticwebapp.config.json](https://github.com/webmaxru/bpm-counter/blob/main/src/staticwebapp.config.json) file. There are two built-in roles: `anonymous` (for all users) and `authenticated` (for those who are logged in).\n2. If the user tries to access URL without the required role, they will get error 401. You might want to set up a [redirect](https://github.com/webmaxru/bpm-counter/blob/main/src/staticwebapp.config.json#L48) to the login page.\n3. To let users log in, you direct users to one of the built-in identity providers (Azure Active Directory, GitHub, Twitter) login pages. For example, [/.auth/login/twitter](https://bpmtech.no/.auth/login/twitter). (You can also create a custom URL for this page using [routing rules](https://github.com/webmaxru/bpm-counter/blob/main/src/staticwebapp.config.json#L22).). The folder `.auth` on your Azure SWA project is built-in, it's so called *system folder* which contains some useful endpoints.\n4. After logging in using the selected identity provider and giving consent on sharing personal information (email or user handle), the user will be redirected back to the application. And if the role is correctly set, they will get an access to the requested URL.\n5. To give user a custom role (for example, `administrator`), you use \"Role management\" tab in the Azure Portal. Click on \"Invite\" button, fill in the form and click \"Generate\". You will receive a link to send to the user to accept the role.\t\n\n\u003cimg src=\"public/images/cloud/invite.png\" width=\"400\"\u003e\n\nYou can manage the users and roles in the \"Role management\" tab.\n\n\u003cimg src=\"public/images/cloud/role.png\" width=\"400\"\u003e\n\n6. You can read authenticated user credentials (for example to implement some logic in UI) by sending request to [/.auth/me](https://bpmtech.no/.auth/me) endpoint. To check authentication info of the API calls, you read the `x-ms-client-principal` header in the request. \n7. To log out, you redirect users to [/.auth/logout](https://bpmtech.no/.auth/logout) page.\n8. To remove personally identifying information (email or user handle) from the application, you direct users to the link that is related to a particular identity provider: [/.auth/purge/twitter](https://bpmtech.no/.auth/purge/twitter).\n\nDemo:\n\n1. Try to access [/account](https://bpmtech.no/account) page. It's configured to be available only for `authenticated` users by [this rule](https://github.com/webmaxru/bpm-counter/blob/main/src/staticwebapp.config.json#L4).\tYou will be redirected to the Twitter login page and asked for consent.\n2. After logging in with Twitter, you will be redirected back to the application, and now can access [/account](https://bpmtech.no/account) page.\n3. Open [/.auth/me](https://bpmtech.no/.auth/me) URL in the separate tab to see the information returned by the server.\n4. Log out by going to [/.auth/logout](https://bpmtech.no/.auth/logout) URL.\n5. You can repeat the steps above to test the custom role needed to access [/admin](https://bpmtech.no/admin) page. In this case, you need to give the user the role `administrator` as described above.\n\n[🗎 Documentation](https://docs.microsoft.com/en-us/azure/static-web-apps/authentication-authorization?ocid=aid3040965)\n\n## React-only version (no cloud)\n\nIn the project directory, you can run:\n\n### `npm run start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\nThe service worker is not in use in the development environment.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nThe production-ready service worker will also be generated.\n\n## About\n\n### Credits\n\n- Real-time BPM detection is based on [realtime-bpm-analyzer](https://www.npmjs.com/package/realtime-bpm-analyzer) library by [David Lepaux](https://github.com/dlepaux)\n- BPM detection in the files is based on [bpm-detective](https://www.npmjs.com/package/bpm-detective) library by [Carl Törnqvist](https://github.com/tornqvist/)\n- Spectrum analyzer is based [audioMotion-analyzer](https://www.npmjs.com/package/audiomotion-analyzer) library by [Henrique Vianna](https://github.com/hvianna/)\n\n### Author\n\n[Maxim Salnikov](https://twitter.com/webmaxru). Feel free to contact me if you have any questions about the project, PWA, Azure Static Web Apps.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmaxru%2Fbpm-counter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebmaxru%2Fbpm-counter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebmaxru%2Fbpm-counter/lists"}