Metrognome

Copyright © Tony's Studio 2022 - 2026

---

Overview

This project aims to provide a minimalist metronome for musicians without any unnecessary features.

Try it now!

• Web App
• Android App
• iOS App

Development

Metrognome is developed with Capacitor using native HTML, CSS, and JavaScript. See the official Capacitor documentation for more information.

First of all, run npm install in the root directory to install dependencies. There is a local plugin capacitor-metronome-background to handle native background service for metronome. You need to build the plugin before building the app. To build the plugin, run the following command:

# build the plugin
cd plugins/capacitor-metronome-background
npm run build
cd ../..

# build the app
npm run build

# sync the app with native platforms
npm run sync

For production, you can set several environment variables to configure the app:

• VITE_BASE_URL: The base URL for the meta files and Android APK. It should point to a static file hosting service serving contents in the publish/ directory.
• VITE_WEB_URL: The URL of the Web App.
• VITE_APP_STORE_URL: The URL of the app on the iOS App Store.
• VITE_CLARITY_KEY: The key for Microsoft Clarity. This is optional and only used for web analytics.

Web

Standard Vite project.

Android

Since Android platform is generated by Capacitor, those files are not included in this repo. To add Android project, run the following command:

npx cap add android
npx capacitor-assets generate --android
npx cap open android

After that, may manually add the following permissions to AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

iOS

See iOS Requirements for iOS development environment setup.

Since iOS platform is generated by Capacitor, those files are not included in this repo. To add iOS project, run the following command:

npx cap add ios
npx capacitor-assets generate --ios
npx cap open ios

After that, it requires UIBackground Modes capability to be enabled in Xcode with the "Audio, AirPlay, and Picture in Picture" option checked.