ShazamKitによるカスタムオーディオエクスペリエンスの構築

♪ （ShazamKitで カスタムオーディオ体験を作成） こんにちは アレックスです 私はShazamチームの エンジニアです このセッションにご参加いただき ありがとうございます 今日は カスタムカタログ認識を 使用するShazamKitで Appのカスタムオーディオ体験を 作成する方法を紹介します このセッションでは既存の ShazamKitの概念のいくつか カタログ シグネチャ メディアアイテムなどを 使って説明します それらにまだ精通していない場合は 「ShazamKitの詳細」の 講演を必ずチェックしてください 今日取り上げる内容を 見てみましょう カスタムオーディオと メタデータを使用した カタログの作成方法について お話します マイクとAVFAudioフレームワークを 使用して音声を録音する場合 そのオーディオを自作のカスタム カタログとマッチさせる方法を 学びます 次にコンテンツを カスタムオーディオに同期するよう Appをカスタマイズします 最後にカスタムカタログを 用いるときに役に立つ 複数の成功事例について説明します このセッションはコードに沿ったものです このセッションで使用する プロジェクトファイルが 開発者ポータルにあります 開始する前にプロジェクトファイルの ダウンロードをお勧めします 学習がますます デジタル化するにつれて 子供たちの関心を維持する方法を 考え出す必要があります Apple TVでビデオを 再生している時に 正確に適切なタイミングで 質問を表示する コンパニオンAppがあったら どうでしょうか？ 今日は カスタムカタログ認識を使用し 教育ビデオと同期して 反応するリモートAppを 作成する方法を紹介します まず カスタムカタログとは 正確には何でしょうか？ どうやって作るのでしょうか？ カスタムカタログは任意の オーディオから生成する シグニチャのコレクションです 各シグニチャに関連付けられた メタデータの追加もできます カスタムカタログに シグニチャを追加するには SignatureGenerator オブジェクトを使用して オーディオバッファを シグニチャに変換します まず シグニチャジェネレータを作成し 次にinstallTap関数を使って audioEngineの inputNodeで bufferとaudioTimeを ジェネレータへ追加します バッファパラメータは inputNodeの出力から キャプチャされる オーディオのバッファです audioTimeはバッファが キャプチャされた時刻です audioFormatを指定するときは フォーマットがPCMで サポートされているサンプルレートで あることを確認してください ジェネレータでsignature関数を 呼び出すことで オーディオバッファを シグネチャに変換します これを参照シグネチャと呼びます その後 カスタムカタログに 追加できます shazamsignatureファイル形式を 使ってカタログに シグネチャを追加することもできます これは デバイス間で共有できる オペークなファイルです ShazamKitでカスタムカタログを 簡単に試せるように このセッションではこのファイルを プロジェクトファイルに含めました 始める前にダウンロードした プロジェクトを開き そこに何があるか見てみましょう Questionオブジェクトを 詳しく見てみましょう

QuestionはAppの カスタムコンテンツを表します まずタイトルと オフセットがあります タイトルはビデオのセクションを 説明する文字列です オフセットはこのセクションが 表示される時間です たとえば 45秒なとです 先生は数学の方程式に ついて話し始めます そのタイトルで Questionを作成し オフセットは４５秒にします Equationは授業の瞬間を表し 数式を表示します これを増加構成要素として 使用できます たとえば 方程式の左辺と右辺を 異なるオフセットで表示したい 場合があります 最後にanswerRangeと requiresAnswerが インタラクティブUIが表示される 時を示すために使われます 子供たちが質問に答える練習を することができます 教材のビデオで どのようになるか 見てみましょう 最初の質問は１４秒から始まります ２１秒で私は赤いリンゴを １つ持っています ２５秒で３つの青リンゴを 追加します 最後に３１秒で 生徒は質問に答える機会があります ビデオは通常 時:分:秒で フォーマットされることに 注意してください ここで行ったように オフセットを作成するには 最初に時間を秒に 変換する必要があります Siriに助けを 求めることができます 「３分１４秒は何秒ですか？」 それではコードを 詳しく見ていきましょう カスタムカタログの使用を 開始する方法をご覧ください まずいくつかのメタデータが 関連付けられているシグニチャを追加して カタログを作成します ここに CatalogProviderがあり カタログを作成する機能を 備えています カタログに追加する参照シグニチャ名は FoodMath.shazamsignature です

そのファイルをロードしましょう そこからsignatureオブジェクトを 作成します 次に media itemを使用して メタデータを定義します

事前定義された media itemのプロパティー title やsubtitle などを設定します これで教材のビデオを 解説できるでしょう SHMediaItemProperty に extension を作成しました ２つのカスタムキー： teacher と episodeです episode番号と teacher名を設定し カタログの内容を さらにカスタマイズします あなたが今しなければならないのは customCatalogオブジェクト を作成することだけです

次にその上で addReferenceSignatureを呼び出し signature とmediaItem オブジェクトを渡します これでディスクからロードした 参照シグニチャに 作成したメタデータが関連付けられます 完璧です これで 準備ができました オーディオとカタログの マッチングを開始できます 結果を実際に確認します それではMatcherを 開きましょう マイクからの入力音声を 作成したカスタムカタログの コンテンツにマッチさせます マイクから音声を キャプチャするには AVFAudioから AVAudioEngineを使用できます このプロジェクトでは すでにInfo.plistファイルの マイクの使用法の説明を 追加しました Matcherにも マイクの許可を要求し audio sessionを 設定するコードを含めました

まずマッチの最新情報を 受け取るには session オブジェクトを作成し デリゲートを設定します

match関数はカスタムカタログが 必要なので 以前に作成したカタログを セッションに渡します audioEngineのinputNode から installTap関数を使用して オーディオを取得し マッチさせる準備ができました

この関数は これはマイクから変換された audioBufferと audioTimeを返します これはバッファが キャプチャされた時刻です 次にセッションで matchStreamingBufferを 呼び出し audioBufferと audioTimeを渡します 提供されたオーディオが 連続していることが セッションによって 検証されるため この時間を含めることを お勧めします 最初にセッションデリゲートを 設定したので 更新を処理するために セッションデリゲートに session: didFind match: 関数を 実装しましょう

このためMatchResultという オブジェクトを作成しました

これにはsession:didFind match: 関数によって 返されるMatchedMediaItem が 含まれています これはカタログ内の参照シグニチャに 関連付けられているメタデータです episode番号や teacher名のように 以前に作成した詳細が 含まれます matchからのみ生成できますが それに関連する追加情報が 含まれています また MatchResultでは 先ほどお見せしたQuestion オブジェクトがあります これは数学の方程式の ビデオのセクションを 表しています これを使用してマッチに 関連するコンテンツを 検索します 最初のMatchedMediaItem オブジェクトを取得するには デリゲート内で MatchResultを設定します そして今のところ私たちは Questionに何も設定しません

それではビルドして実行し 実際のマッチを見ましょう これは私たちの FoodMathアプリです 学生が利用できるエピソードの リストがあります 私はビデオを再生して 同僚のNeilと一緒に いくつかの数学の問題を 解く学習ができます Neil今日は私たちに 何を用意しましたか？ Neil こんな形式です。 私があなたに質問します あなたはそれについて考える 時間があります そしてあなたが正しく理解したか どうかを確認します このAppを持っていればあなたも 一緒に遊ぶことができます

私がビデオを始めたとき Appは エピソード３を 聞いてていることを認識しました 「カウント・オン・ミー」 これは素晴らしい！ 次にどのセクションを表示するかを 理解したいと思います オーディオの特定の オフセットについては Questionオブジェクトを 使用します 私たちが見ているビデオを 知るために MatchedMediaItemを 使用します ただし ForecastedCurrentMatchOffsetなど マッチに関する追加情報も 含まれています これは参照シグニチャでの 自動更新位置です 秒単位の時間間隔として 表されます これを使用してビデオの どこにいるかを把握できます 関連のQuestionオブジェクトを 見つけられます コードに戻ると デリゲートコールバックで nilを設定する代わりに predicatedCurrentMatchOffset の直後の 最後のQuaestionを見つけたい

Quaestion のオフセットを使用して 値を比較できます session:didFindMatchは おなじマッチで 複数回呼び出されます

新しいQuestionオブジェクトを 取得したら結果のみを更新する フィルターを実装しましょう 一旦それを手にしたら 結果を値で更新できます

それがどうに見えるかを見ましょう ビルドして実行します 今回は足し算について 学びたいと思います もう一度ビデオを再生していきます 質問の内容がビデオと同期して 表示されるかを 確認します 質問１ 始めましょう 今日はお店に行って りんごが思い浮かび 赤いリンゴを１つ買いました そして１つ２つ ３つの 青リンゴを買いました 全部で何個のリンゴを 買いましたか？ タイマーが始まります... ここから 今は質問の時間です １プラス３は何ですか？ ５つでしょうか？ おぉ いいえ 違っています もう一度やり直してみましょう ビデオを巻き戻します 今回はもっと注意しますよ

質問１ 始めましょう 今日はお店に行って りんごが思い浮かび 赤いリンゴを１つ買いました そして１つ２つ ３つの 青リンゴを買いました 全部で何個のリンゴを 買いましたか？ タイマーが始まります... ここから もう一度聞いたので答えは ４つだとわかりました この質問が簡単すぎると 思ったらどうしますか？ スキップしてNeilに私たちに 教えるもう少し複雑なものが 何かあるかどうかを 確認しましょう

質問４ 最後の質問 さて 今日はかなり お腹が空きました だから私は１４個のリンゴを 買うことにしました １... ２ ... ３... ４

それはたくさんのリンゴです もう少し先に進みましょう ２０秒先にスキップします それで私はさらに２８個の リンゴを買うことにしました

１…２…３... ４…５…６…

２６... ２７... ２８個のりんご 全部で何個のリンゴを 買いましたか？ タイマーが始まります... ここから さて それは素晴らしい 質問です ついてこれましたか？ 好きな番号で行きます それは正しいです 究極の質問への答えは４２です 簡単です 学生がビデオのどこにいても リモートアプリが追従し コンテンツを更新します カスタムカタログを使用する いくつかの成功事例について 説明しましょう ファイル拡張子 shazamcatalogの カスタムカタログは デバイス間でシームレスに 共有できます fileURLでディスクからロード やディスクに保存できます またネットワークを介して 配信できます リモートWebサービスを 使用する場合 最初にカタログをダウンロードする ことをお勧めします 次にカスタムカタログオブジェクト でadd関数を使用することです ネットワーク経由で取得できない 場合を想定して 必ずローカルにカタログを 提供してください カタログにはデータを返すための 使用事例に固有の カスタムキーを保存できます カタログに追加するデータが 有効なプロパティリスト値の １つであることを確認してください matchStreamingBuffer を使用する場合 ShazamKitはオーディオ ストリームとマッチングを行い パフォーマンスと 検索精度のバランスを取り シグネチャの生成と自動更新 そのすべての作業を行います ですから今 あなたは完全な Appを構築しました それは教材のビデオに同期し シグニチャとカスタムカタログ のみを使用して 学生が使っているコンテンツを 更新します これは 可能な多くの 例の1つにすぎません あなたがShazamKitを 使って何を構築するかを見るのを 本当に楽しみにしています ありがとうございます 素晴らしいWWDCがありますように ♪