Détection de la musique avec ShazamKit

Dans ce tutoriel, vous utiliserez ShazamKit pour détecter de la musique et l'envoyer sous forme de message à un chat avec le Client Vonage Client SDK pour iOS. ShazamKit est disponible à partir d'iOS 15, qui est en version bêta à l'heure où nous écrivons ces lignes.

Conditions préalables

• Un compte Apple Developer et un appareil de test fonctionnant sous iOS 15.

• Xcode 13.

• Cocoapods pour installer le Vonage Client SDK pour iOS.

• Notre interface en ligne de commande, que vous pouvez installer avec npm install @vonage/cli -g.

• Le plugin Vonage CLI Conversations, vous pouvez l'installer avec vonage plugins:install @vonage/cli-plugin-conversations

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Le projet Starter

Ce tutoriel s'appuiera sur le tutoriel "Création d'une application de chat" du portail des développeurs de Vonage. Ce tutoriel commencera par cloner le projet fini depuis GitHub, mais si vous n'êtes pas familier avec l'utilisation du Client SDK de Vonage pour iOS pour créer une application de chat, vous pouvez commencer par le tutoriel. Si vous suivez le tutoriel, vous pouvez passer directement à la section d'activation de ShazamKit.

Créer une application Vonage

Vous devez maintenant créer une Application Vonage. Une application contient les informations de sécurité et de configuration dont vous avez besoin pour vous connecter à Vonage. Créez un répertoire pour votre projet en utilisant mkdir vonage-tutorial dans votre terminal, puis passez au nouveau répertoire en utilisant cd vonage-tutorial. Créez une application Vonage à l'aide de la commande suivante :

Un fichier nommé vonage_app.json est créé dans le répertoire de votre projet et contient l'identifiant de l'application Vonage nouvellement créée et la clé privée. Un fichier de clé privée nommé shazamkit.key est également créé.

Ensuite, créez des utilisateurs pour votre application. Vous pouvez le faire en exécutant la commande

Créez une conversation :

Ajoutez vos utilisateurs à la conversation, en remplaçant CONVERSATION_ID et USER_ID par les valeurs précédentes :

Le Client SDK utilise des JWT pour l'authentification. Le JWT identifie le nom de l'utilisateur, l'identifiant de l'application associée et les autorisations accordées à l'utilisateur. Il est signé à l'aide de votre clé privée pour prouver qu'il s'agit d'un jeton valide. Vous pouvez créer un JWT pour vos utilisateurs en exécutant la commande suivante en remplaçant APP_ID par l'identifiant de votre application :

Cloner le projet iOS

Pour obtenir une copie locale du projet iOS, ouvrez votre terminal et entrez git clone git@github.com:nexmo-community/clientsdk-app-to-app-chat-swift.git. Changez de répertoire dans le dossier clientsdk-app-to-app-chat-swift en utilisant cd clientsdk-app-to-app-chat-swift. Installez ensuite les dépendances du projet en exécutant pod install. Une fois terminé, vous pouvez ouvrir le projet Xcode en utilisant open AppToAppChat.xcworkspace.

Authentification du Client SDK

Au bas du fichier ViewController.swift il y a une User avec une propriété statique pour nos utilisateurs Alice et Bob. Remplacer CONVERSATION_ID, ALICE_JWT et BOB_JWT par les valeurs que vous avez générées dans le terminal plus tôt.

struct User {
    let name: String
    let jwt: String
    let chatPartnerName: String
    let conversationId = "CONVERSATION_ID"
    
    static let Alice = User(name: "Alice",
                            jwt:"ALICE_JWT",
                            chatPartnerName: "Bob")
    static let Bob = User(name: "Bob",
                          jwt:"BOB_JWT",
                          chatPartnerName: "Alice")
}

Activer Shazam

Une fois le projet ouvert, assurez-vous d'avoir un identifiant de paquet unique et activez la signature automatique.

Ensuite, visitez la section section des identifiants de votre Account sur le portail des développeurs d'Apple. Localisez votre identifiant d'offre groupée, et sous Services d'application activez ShazamKit.

Détecter la musique

Autorisations pour le microphone

Pour détecter la musique jouée, vous devrez accéder au microphone de l'appareil, ce qui nécessite votre autorisation. Votre projet contient un fichier Info.plist contenant les métadonnées de l'application. Vous trouverez ce fichier dans le groupe AppToAppChat.

Une nouvelle entrée dans le fichier Info.plist est nécessaire :

1. Passez votre souris sur la dernière entrée de la liste et cliquez sur le petit bouton + qui apparaît.

2. Dans la liste déroulante, sélectionnez Privacy - Microphone Usage Description et ajoutez To detect music with Shazam pour sa valeur.

Votre Info.plist devrait ressembler à ceci :

Ensuite, ouvrez votre fichier AppDelegate.swift et importez AVFoundation:

import UIKit
import AVFoundation

Ensuite, appelez requestRecordPermission: à l'intérieur application:didFinishLaunchingWithOptions::

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    if AVAudioSession.sharedInstance().recordPermission != .granted {
        AVAudioSession.sharedInstance().requestRecordPermission { (isGranted) in
            print("Microphone permissions \(isGranted)")
        }
    }
    return true
}

Créer une mémoire tampon audio

L'application utilisera le microphone pour détecter en permanence la musique en arrière-plan, vous devrez donc créer un tampon audio à partir du microphone pour le transmettre à ShazamKit. Ouvrez le fichier ChatViewController.swift importez le fichier AVFoundation, ShazamKit et ajoutez ces propriétés à la classe :

import UIKit
import ShazamKit
import NexmoClient
import AVFoundation

class ChatViewController: UIViewController {
    
    let session = SHSession()
    let audioEngine = AVAudioEngine()
    var lastMatchID: String = ""

    ... 
}

Ajoutez ensuite une nouvelle fonction à la classe, appelée startAnalysingAudio:

func startAnalysingAudio() {
    let inputNode = audioEngine.inputNode
    let bus = 0
    inputNode.installTap(onBus: bus, bufferSize: 2048, format: inputNode.inputFormat(forBus: bus)) { (buffer: AVAudioPCMBuffer!, time: AVAudioTime!) -> Void in
        self.session.matchStreamingBuffer(buffer, at: time)
    }
    
    audioEngine.prepare()
    try! audioEngine.start()
}

Cette fonction utilise AVAudioEngine pour accéder à l'entrée du microphone. AVAudioEngine est un cadre robuste qui vous permet de manipuler l'audio en branchant/enchaînant des objets nœuds. Seule la sortie vous intéresse, bus 0de la fonction inputNode pour cette application. La fonction installTap vous permet d'observer la sortie et vous donne accès à une fonction AVAudioNodeTapBlockqui est un alias de type pour un AVAudioPCMBuffer et AVAudioTime qui est un alias de type pour un tuple. Le tampon et le temps sont ensuite transmis à la fonction matchStreamingBuffer de la fonction SHSessionqui tente alors de faire correspondre la musique diffusée au catalogue Shazam.

Pour mettre fin au processus, vous devez ajouter une fonction appelée stopAnalysingAudio qui arrêtera en toute sécurité l'observation de l'entrée :

func stopAnalysingAudio() {
    let inputNode = audioEngine.inputNode
    let bus = 0
    inputNode.removeTap(onBus: bus)
    self.audioEngine.stop()
}

Définir le délégué de la session à cette classe, appeler startAnalysingAudio à la fin de la fonction viewDidLoad et stopAnalysingAudio dans la logout fonction :

override func viewDidLoad() {
    super.viewDidLoad()
    
    session.delegate = self
    
    ...
    
    getConversation()
    startAnalysingAudio()
}

@objc func logout() {
    client.logout()
    stopAnalysingAudio()
    dismiss(animated: true, completion: nil)
}

LeSHSessionDelegate

Maintenant que l'application transmet un tampon à ShazamKit, vous devez implémenter la fonction SHSessionDelegate pour recevoir les mises à jour. Créez une extension au bas du fichier :

extension ChatViewController: SHSessionDelegate {
    func session(_ session: SHSession, didFind match: SHMatch) {
        if let matchedItem = match.mediaItems.first,
           let title = matchedItem.title,
           let artist = matchedItem.artist,
           let matchId = matchedItem.shazamID, matchId != lastMatchID {
            lastMatchID = matchId
            DispatchQueue.main.async {
                self.send(message: "I am currently listening to: \(title) by \(artist) - Via ShazamKit")
            }
        }
    }
    
    func session(_ session: SHSession, didNotFindMatchFor signature: SHSignature, error: Error?) {
        if error != nil {
            print(error as Any)
        }
    }
}

La fonction didNotFindMatchFor est appelée lorsque ShazamKit n'a pas trouvé de correspondance ou en cas d'erreur. Sinon, la fonction didFind est appelée lorsqu'une correspondance a été trouvée.

Les correspondances sont renvoyées sous forme de tableau avec des niveaux de confiance variables, mais vous prendrez le premier résultat. De plus, la fonction compare l'ID de la correspondance à la dernière correspondance afin de s'assurer que lorsque vous envoyez un message au chat, cela ne se produit qu'une seule fois par correspondance.

Essayez-le

Construisez et exécutez (CMD + R) le projet sur votre appareil iOS et dans le simulateur. Connectez-vous avec un utilisateur différent sur chaque appareil. Si vous jouez de la musique en arrière-plan, l'appareil iOS physique transmettra le tampon audio à ShazamKit. Si une chanson correspond au catalogue Shazam, un message sera envoyé au chat.

Quelle est la prochaine étape ?

Vous pouvez trouver le projet terminé sur GitHub. Vous pouvez faire beaucoup plus avec le Client SDK. En savoir plus sur le Client SDK sur developer.nexmo.com et ShazamKit sur developer.apple.com