数行の JS で、
「音に反応するページ」を作る

組み込みコード

実際の導入で使っている JS SDK の組み込み例です（API は変更される可能性があります）。

// SDK は ES モジュール。配信 URL は管理画面の「SDK情報」に表示されます
const { AiryMediaTrigger } = await import(SDK_URL);

// appKey はキャンペーンごとに発行します
const amt = new AiryMediaTrigger({ appKey: 'YOUR_APP_KEY' });

// 登録した音を検知するたびに発火
amt.on('trigger', (ev) => {
  // ev = { method, value, timestamp, extras }
  showCoupon(ev.value); // 例: クーポン表示、演出開始、LINE 連携 など
});

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

// マイク許可 → 認証 → 検出エンジンの取得 → 待ち受け開始までを start() が行う
await amt.start();

// 停止。マイクも解放されます
await amt.stop();

検知後に何を起こすかは通常の JavaScript で自由に書けます。既存サイト・LP・LINE ミニアプリ・アプリ内 WebView に組み込めます。

検知イベントとエラー

検出の仕組み（2方式）

＊ 両方式の併用も可能です。どちらも「登録した音」への決定的な照合であり、AI による音声認識（会話の聞き取り）ではありません。

動作環境・前提条件

• HTTPS 接続必須（マイクは secure context のみ動作）。ローカル開発の localhost は http でも動作しますが、LAN の IP アドレス（http://192.168.x.x）では動作しません
• 公開するページの URL は CMS に登録が必要。未登録のドメインから呼び出すと認証が通りません（localhost は登録不要なので、開発中はそのまま動きます）。登録されるのはスキームとホストのみで、パスは無視されます
• 対応ブラウザ: Chrome / Safari / Firefox / Edge の現行版
• ユーザーによるマイク使用許可が必要（許可を促す UI 設計が成果に影響します）
• ブラウザ利用時はフォアグラウンドで稼働。バックグラウンド・画面ロック中に反応させたい場合はアプリへの組み込みで対応（お問い合わせください）
• アプリ統合の場合: iOS 15.0+ / 最新の Android System WebView
• 反響・残響の強い環境（大規模施設・駅構内等）では認識精度が低下する場合があります

＊ 通信要件（CDN ドメイン許可等）や準備物の詳細は、導入時にお渡しする導入マニュアルでご案内します。

CMS での準備から公開まで

管理画面（AiryMedia Trigger CMS）でイベントを作り、音源を登録し、発行された appKey をページに書くまでの流れです。 以下は実際の管理画面です。appKey と SDK の配信 URL は伏せてあります。

1. 1イベントを作成し、認識タイプを選ぶ

   キャンペーン単位の入れ物を「イベント」として作ります。ここで選ぶ認識タイプが Fingerprint（音響フィンガープリント）か Watermark（音響透かし）かで、 このあとの音源の扱いが変わります。既存の音源をそのまま使うなら Fingerprint、音源に信号を埋め込んで識別子を細かく分けたいなら Watermark です。

   

2. 2音源をアップロードし、識別子を決める

   トリガーにしたい音源をイベントに登録します。Fingerprint では「メタデータ」を自分で決めて入力します。 これが検知時に trigger イベントの value として返る文字列です。 URL エンコードされた状態で返るため、日本語などを入れた場合は受け取り側で decodeURIComponent してください。

   Watermark ではメタデータ欄はありません。アップロードすると音源ごとに「取得ID」（数値）が自動で払い出され、それが value になります。

   

3. 3処理が終わるのを待つ

   アップロードした音源はサーバー側で認識用に処理されます（長い音源では数十分かかることがあります）。 Fingerprint は「packeddb の作成・更新」を実行すると、イベントのステータスが「完了」になり配信が始まります。

   Watermark は音源ごとに処理され、完了した音源から「透かし埋込音源」をダウンロードできます。 実際に会場や放送で流すのは、このダウンロードした音源です（元の音源のままでは検知されません）。Fingerprint は元の音源をそのまま使えます。

   

4. 4発行された appKey をコードに書く

   イベントごとに appKey が発行され、詳細画面の「SDK情報」に表示されます。上の組み込みコードのとおり、appKey を new AiryMediaTrigger({ appKey }) に渡せば使えるようになります。

   

5. 5公開する URL を登録する

   最後に、SDK を読み込むページの URL を登録します。未登録のドメインから呼び出すと認証が通りません。 登録されるのはスキームとホストまでで、パスは無視されます。localhost は登録不要なので、開発中は登録なしで動きます。 本番ドメインと検証用ドメインを使うなら、それぞれ登録してください。

   

＊ 公開後は、トリガー数（登録した音を認識した回数）を CMS のレポートで確認できます。実際の再生環境（会場・放送・店頭）に近い条件でのテストは、公開前に必ず行ってください。