ShazamKitの遊び方 Naoyuki Murata

2 自己紹介 Naoyuki Murata ● SPACEMARKET 2022/02 ~ モバイルエンジニア: iOS/Android/Flutter

3 SPACEMARKETについて あらゆるスペースを簡単に貸し借りできるサービス 「スペースマーケット」の開発/運営 事業内容 MISSION スペースシェアをあたりまえに ”スペースシェアをあたりまえの選択肢にすることで 人々の発想を広げ、多様なチャレンジを生み出し、世 の中を面白くしたいと考えています ” https://spacemarket.co.jp/about/

4 SPACEMARKETについて ゲスト向けサービス スペースを借りたい人 ホスト向けサービス スペースを貸し出したい人 ゲスト/ホストに向けたサービス(WEB/アプリ)を運営しています iOS/Androidネイティブ Flutter

5 アジェンダ ● Shazam/ShazamKitの概要 ● ShazamKitメイン機能紹介 ○ Shazamカタログ認識 ○ カスタムカタログ認識 ● サンプル実装 ○ Shazamカタログ認識サンプル実装 ○ カスタムカタログ認識サンプル実装 ● SPACEMARKTアプリへ機能追加

6 Shazam/ShazamKitの概要

7 Shazamとは 流れている楽曲情報を調べることができる音楽検索アプリ 引用: https://www.shazam.com/ja/home iOS/Android Web 検索結果 検索中 ボタン押下で検索開始 引用: Shazamアプリ

8 Shazamの歴史 2002 携帯電話サービス「2580」リリース 1999 Shazam Entertainment 設立 2008 Shazamアプリ AppStore リリース 2017 2018 Apple買収発表 買収 2021 WWDC 2021 ShazamKit発表 🎉

9 ShazamKitとは Shazamの音声認識機能を組み込む事ができるフレームワーク Shazamカタログ認識 カスタムカタログ認識 Shazamライブラリ管理 楽曲認識機能(Shazam同様の機能) 任意の音声に対して認識を行う機能 楽曲の検索結果をShazamアプリのライブラリへ追加する機能

10 ShazamKitメイン機能紹介

11 Shazamカタログ認識

12 Shazamカタログ認識 概要 楽曲認識機能(Shazam同様の機能)を導入 App 楽曲情報 ・曲名 ・アーティスト名 ・ジャケット画像 etc.. 🎶 Shazam表面 1 2 3 4 裏側 取得した音声からシグネチャを生成 シグネチャをサーバーへ送信 Shazamカタログから一致する曲を検索 サーバーから楽曲情報をアプリへ返す 検索結果 音声取得

13 App 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する曲を検索 4. サーバーから楽曲情報をアプリへ返す 音声取得 Signature 生成 音声をlossy圧縮(非可逆圧縮)したデジタルフィンガープリント ”データサイズが小さく、少なくとも元の音声データの1/10以下” ”元の音声を復元することは出来ないため、安全性とプライバシーが保たれる” Shazamカタログ認識 認識の仕組み 🎶

14 サーバー App 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する曲を検索 4. サーバーから楽曲情報をアプリへ返す Signature 送信 Signature Shazamカタログ認識 認識の仕組み

15 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する 楽曲を検索 4. サーバーから楽曲情報をアプリへ返す サーバー Shazam カタログ (楽曲DB) Signature シグネチャのコレクション (楽曲から生成されたSignatureの集合) Signature Signature Signature Signature Signature Signature Signature Signature Signature Signature Signature Signature Shazamカタログ認識 認識の仕組み Signature Metadata
 
 
 ・曲名
 ・アーティスト名 
 ・ジャケット画像URL
 etc.. 
 


16 Signature Reference Signature Signature Mr.children しるし Query Signature Shazamカタログが持つ、 楽曲から生成されたシグネチャ 検索をかける音声から 生成されたシグネチャ Shazamカタログ認識 認識の仕組み 画像引用: https://www.mrchildren.jp/disco/#single

17 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する 楽曲を検索 4. サーバーから楽曲情報をアプリへ返す サーバー Query Signature Reference Signature のコレクション Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Shazamカタログ認識 認識の仕組み Metadata ・曲名 ・アーティスト名 ・ジャケット画像URL etc.. Shazam カタログ (楽曲DB)

18 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する 楽曲を検索 4. サーバーから楽曲情報をアプリへ返す サーバー Query Signature Reference Signature のコレクション Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature Reference Signature 名もなき詩 Mr.children シーソーゲーム Mr.children NOT FOUND Mr.children 君が好き Mr.children しるし Mr.children フェイク Mr.children 旅立ちの詩 Mr.children HANABI Mr.children HERO Mr.children ヒカリノアトリエ Mr.children Birthday Mr.children himawari Mr.children Shazamカタログ認識 認識の仕組み Metadata ・曲名 ・アーティスト名 ・ジャケット画像URL etc.. Shazam カタログ (楽曲DB) 画像引用: https://www.mrchildren.jp/disco/#single

19 サーバー App 1. 取得した音声からシグネチャを生成 2. シグネチャをサーバーへ送信 3. Shazamカタログから一致する楽曲を検索 4. サーバーから楽曲情報をアプリへ返す Metadata送信 Shazamカタログ Reference Signature Shazamカタログ認識 認識の仕組み Mr.children しるし Mr.children しるし 画像引用: https://www.mrchildren.jp/disco/#single

20 カスタムカタログ認識

21 カスタムカタログ認識 概要 任意の音声に対して認識を行う機能を導入 任意の音声 🎹🎷🎸 🥁 自作の楽曲 🐶 < わんわ ん！ 鳴き声 󰢧 < 好きです！ 󰣼 < ごめんやで 会話

22 カスタムカタログ認識 カスタムカタログの用意 任意の音声 + カスタムカタログ Custom Reference Signature Metadata
 Custom Reference Signature Metadata
 Custom Reference Signature Metadata
 🎹🎷🎸 🥁 🐶 < わんわ ん！ Custom Reference Signature Metadata
 󰢧 < 好きです！ 󰣼 < ごめんやで + Custom Reference Signature Metadata
 + Custom Reference Signature Metadata


23 App Query Signature カスタムカタログ 1. 取得した音声からシグネチャを生成 2. カスタムカタログから一致するシグネチャを検索 カスタムカタログ認識 認識の仕組み 音声取得 生成 Custom Reference Signature Metadata
 Custom Reference Signature Metadata
 Custom Reference Signature Metadata
 Custom Reference Signature Metadata


24 Shazamカタログ/カスタムカタログ認識 サンプル実装

25 Shazamカタログ認識サンプル実装

26 ボタン押下で検索開始 検索結果モーダル表示 ~ 検索中 ~ 取得音声をサーバへ送信 Shazamカタログ認識サンプル実装 超簡易Shazamアプリ 画像引用: https://www.mrchildren.jp/disco/#album/album17

27 Apple DeveloperよりApp ServicesのShazamKitを有効にする Ref. https://help.apple.com/developer-account/?lang=ja#/dev53371f234 Shazamカタログ認識サンプル実装 事前準備

28 Shazamカタログ認識サンプル実装 サンプルコード 引用: https://developer.apple.com/documentation/shazamkit/shsessiondelegate 引用: https://developer.apple.com/documentation/ shazamkit/shsession

29 Shazamカタログ認識サンプル実装 サンプルコード ボタン押下で検索開始 引用: https://developer.apple.com/documentation/shazamkit/ shsession/3747208-matchstreamingbuffer

30 画像引用: https://www.mrchildren.jp/disco/#album/album17 Shazamカタログ認識サンプル実装 サンプルコード マッチする楽曲が見つかった場合 検索結果モーダル表示

31 画像引用 : https://www.mrchildren.jp/disco/#album/album17 Shazamカタログ認識サンプル実装 サンプルコード マッチする楽曲が見つかった場合 検索結果モーダル表示 MediaItem MediaItems 参考: https://developer.apple.com/documentation/sirikit/inplaymediaintent/2963015-mediaitems

32 Shazamカタログ認識サンプル実装 サンプルコード マッチする楽曲が見つからなかった / エラーが発生した場合

33 Shazamカタログ認識サンプル実装 サンプルコード マッチする楽曲が見つからなかった / エラーが発生した場合 シミュレータで実行した場合 Error Domain=com.apple.ShazamKit Code=202 "Shazam Catalog recognition doesn’t work in simulated devices" AppleDevelopperでShazamKitを有効にしていない場合 Error Domain=com.apple.ShazamKit Code=202 “Please check that you have enabled the ShazamKit App Service for this app identifier”

34 カスタムカタログ認識サンプル実装

35 ボタン押下で判別開始 ~ 判別中 ~ 取得音声を照合 判別結果モーダル表示 カスタムカタログ認識サンプル実装 セミ鳴き声音声判別

36 セミ鳴き声３つ用意 https://pocket-se.info/ ミンミンゼミ ツクツクボウシ + ヒグラシ カスタムカタログ認識サンプル実装 事前準備 + ミンミンゼミ Reference Signature ツクツクボウシ Reference Signature Metadata ・名前: name ・特徴: feature Metadata ・名前: name ・特徴: feature カスタムカタログ ミンミンゼミ Reference Signature Metadata
 ツクツクボウシ Reference Signature Metadata


37 WWDC2022にてmacOS13に Shazam CLI が含まれることを発表 🎉 引用: https://developer.apple.com/videos/play/wwdc2022/10028 カスタムカタログ認識サンプル実装 Shazam CLI

38 カスタムカタログ認識サンプル実装 Shazam CLI リファレンスシグネチャを生成するためのコマンド $ shazam signature カスタムカタログを構築するためのコマンド $ shazam custom-catalog ＄shazam

39 ex.) shazam signature --input <音声/ビデオファイル> --output $ shazam signature -i minmin.mp3 -o minmin.shazamsignature $ shazam signature -i tsukutsuku.mp3 -o tsukutsuku.shazamsignature カスタムカタログ認識サンプル実装 Shazam CLI : Signature生成

40 カスタムカタログ認識サンプル実装 Signatureデータサイズ 782KB 7KB 328KB 3KB

41 ex.) shazam custom-catalog create --signature-asset --media-items <.csv file> --output 　$ shazam custom-catalog create --signature-asset minmin.shazamsignature --media-items minmin.csv -o semi.shazamcatalog カスタムカタログ認識サンプル実装 Shazam CLI: カスタムカタログ構築 minmin.csv

42 カスタムカタログ認識サンプル実装 Shazam CLI: カスタムカタログ構築 ex.) shazam custom-catalog update --signature-asset --media-items <.csv file> --output ＄shazam custom-catalog update --signature-asset tsukutsuku.shazamsignature --media-items tsukutsuku.csv -o semi.shazamcatalog tsukutsuku.csv

43 ex.) shazam custom-catalog display --input ＄shazam custom-catalog display -i semi.shazamcatalog カスタムカタログ認識サンプル実装 Shazam CLI: カスタムカタログ構築

44 カスタムカタログ認識サンプル実装 サンプルコード

45 カスタムカタログ認識サンプル実装 メタデータの定義 minmin.csv

46 カスタムカタログ認識サンプル実装 サンプルコード 判別結果モーダル表示

47 カスタムカタログ認識サンプル実装 動作確認

48 SPACEMARKTアプリへ機能追加（勝手に）

49 SPACEMARKETアプリへの機能追加 スペースまとめとは 用途や季節のイベントに合わせ、おすすめのスペースをまとめた機能 https://www.spacemarket.com/features/

50 SPACEMARKETアプリへの機能追加 スペースまとめ検索 検索画面遷移 バナーのまとめをタップ 👆

51 SPACEMARKETアプリへの機能追加 作成機能 ”スペースまとめに対応する楽曲クイズを出題し、正解したユーザーへクーポンを付与” 対象まとめ 花火ができるスペースまとめ クイズ例 タイトルに「花火」が入る 女性曲といえば？ aiko「花火」 問題 答え 画像引用: https://www.mrchildren.jp/disco/#album/album17

52 SPACEMARKETアプリへの機能追加 作成機能フロー バナーのまとめをタップ 検索画面へ遷移 問題の表示、音楽を流し回答 　付与されたクーポン確認 クーポン一覧画面 まとめ検索表示をトリガーに ホーム画面へ問題表示

53 SPACEMARKETアプリへの機能追加 RemoteConfig × ShazamID { "data": [ ︙ { "url": "https://www.spacemarket.com/features/temochi-hanabi/?utm_source=app_banner&utm_medium=referral&utm_campaign=hanabi&paid_type=0", "image": "https://cdn.braze.eu/appboy/communication/assets/image_assets/images/62e77db0f135f5631db67130/original.png?1659338160", "quiz": { "question": "タイトルに「花火」が入る女性曲といえば？", "coupon": { ︙ }, "shazamID": "12345", ︙ }, }, ︙ ] } 引用: https://developer.apple.com/documentation/shazamkit/shsession/3747208-matchstreamingbuffer

54 SPACEMARKETアプリへの機能追加 動作確認（※音無し）

55 モバイルエンジニア募集中です！ 株式会社スペースマーケット採用ページ https://spacemarket.co.jp/recruit/engineer/ ゲストアプリ iOS/Androidネイティブエンジニア ホストアプリ Flutterエンジニア

ご清聴ありがとうございました