Build a sound-reactive page
with a few lines of JS

Integration example

An integration example of the JS SDK as used in real deployments (the API is subject to change).

// The SDK is an ES module; the delivery URL is shown in the console's SDK information panel
const { AiryMediaTrigger } = await import(SDK_URL);

// The appKey is issued per campaign
const amt = new AiryMediaTrigger({ appKey: 'YOUR_APP_KEY' });

// Fires every time a registered sound is detected
amt.on('trigger', (ev) => {
  // ev = { method, value, timestamp, extras }
  showCoupon(ev.value); // e.g. show a coupon, start an effect, hand off to LINE
});

amt.on('error', (err) => {
  console.error(err.code, err.message);
});

// start() covers mic permission, auth, engine loading and listening
await amt.start();

// Stopping also releases the microphone
await amt.stop();

What happens after detection is up to you, in plain JavaScript. It can be embedded in existing sites, landing pages, LINE mini apps, and in-app WebViews.

Detection events and errors

Two detection methods

* The two methods can be combined. Both are deterministic matching against registered sounds — not AI speech recognition that listens to conversations.

Requirements & preconditions

• HTTPS required (microphone access works only in a secure context). In local development localhost works over http, but a LAN IP address (http://192.168.x.x) does not
• The URL of the page you publish must be registered in the CMS. Calls from an unregistered domain fail authentication (localhost needs no registration, so local development works as-is). Only the scheme and host are stored; the path is ignored
• Supported browsers: current Chrome / Safari / Firefox / Edge
• User permission for microphone use is required (the permission-prompt UX affects results)
• In the browser, it runs while the page is in the foreground. To react in the background or on the lock screen, app integration is available — please contact us
• For app integration: iOS 15.0+ / latest Android System WebView
• Recognition accuracy may drop in highly reverberant environments (large facilities, station concourses, etc.)

* Network requirements (CDN domain allowlisting, etc.) and preparation details are covered in the onboarding manual provided at deployment.

From CMS setup to going live

How you create an event in the management console (AiryMedia Trigger CMS), register audio, and get the appKey your code needs. The screens below are the real console, with the appKey and the SDK delivery URL masked. The console is currently available in Japanese only.

1. 1Create an event and choose the detection type

   An "event" is the container for one campaign. The detection type you pick here — Fingerprint or Watermark — determines how the audio is handled from then on. Choose Fingerprint to use existing audio as-is; choose Watermark to embed a signal and control identifiers in fine detail.

   

2. 2Upload the audio and decide the identifier

   Register the audio you want to act as a trigger. With Fingerprint you type the "metadata" yourself — that string is what comes back as value on the trigger event. It is returned URL-encoded, so run decodeURIComponent on it if it contains non-ASCII characters.

   Watermark has no metadata field. On upload, each audio file is assigned a numeric ID automatically, and that number becomes the value.

   

3. 3Wait for processing to finish

   Uploaded audio is processed server-side for recognition (long files can take tens of minutes). For Fingerprint, running "create / update packeddb" flips the event status to complete and delivery starts.

   For Watermark, each file is processed individually and the watermarked audio becomes downloadable as it completes. What you actually play at the venue or on air is that downloaded file — the original audio will not be detected. Fingerprint uses the original audio unchanged.

   

4. 4Put the issued appKey in your code

   An appKey is issued per event and shown in the "SDK information" panel on the event page. As in the integration example above, pass the appKey to new AiryMediaTrigger({ appKey }) and you are up and running.

   

5. 5Register the URL you will publish on

   Finally, register the URL of the page that loads the SDK. Calls from an unregistered domain fail authentication. Only the scheme and host are stored; the path is ignored. localhost needs no registration, so local development works without it. If you use separate production and staging domains, register each one.

   

* Once live, trigger counts (how many times a registered sound was recognized) are available in the CMS reports. Always test under conditions close to the real playback environment (venue, broadcast, store) before going live.