Erkennen von Musik mit ShazamKit

In diesem Lernprogramm verwenden Sie ShazamKit um Musik zu erkennen und sie als Nachricht an einen Chat mit dem Vonage Client SDK für iOS. ShazamKit ist in iOS 15 und höher verfügbar, das sich zum Zeitpunkt des Schreibens in der Beta-Phase befindet.

Voraussetzungen

• Ein Apple Developer Account und ein Testgerät mit iOS 15.

• Xcode 13.

• Cocoapods, um das Vonage Client SDK für iOS zu installieren.

• Unser Command Line Interface, das Sie mit npm install @vonage/cli -g.

• Das Vonage CLI Conversations Plugin können Sie installieren mit vonage plugins:install @vonage/cli-plugin-conversations

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Das Starter-Projekt

Dieses Tutorial baut auf dem Tutorial "Erstellen einer Chat-App" Projekt aus dem Vonage Entwicklerportal auf. Dieses Tutorial beginnt mit dem Klonen des fertigen Projekts von GitHub, aber wenn Sie mit der Verwendung des Vonage Client SDK für iOS zur Erstellung einer Chat-App nicht vertraut sind, können Sie mit dem Tutorial beginnen. Wenn Sie dem Tutorial folgen, können Sie zum Abschnitt "ShazamKit aktivieren" übergehen.

Eine Vonage-Anwendung einrichten

Sie müssen nun eine Vonage-Anwendung erstellen. Eine Anwendung enthält die Sicherheits- und Konfigurationsinformationen, die Sie für die Verbindung mit Vonage benötigen. Erstellen Sie ein Verzeichnis für Ihr Projekt mit mkdir vonage-tutorial in Ihrem Terminal ein Verzeichnis für Ihr Projekt und wechseln Sie dann mit cd vonage-tutorial. Erstellen Sie eine Vonage-Anwendung mit dem folgenden Befehl:

Eine Datei namens vonage_app.json wird in Ihrem Projektverzeichnis erstellt und enthält die neu erstellte Vonage-Anwendungs-ID und den privaten Schlüssel. Eine private Schlüsseldatei mit dem Namen shazamkit.key wird ebenfalls erstellt.

Als Nächstes müssen Sie Benutzer für Ihre Anwendung anlegen. Sie können dies tun, indem Sie ausführen:

Schaffen Sie ein Gespräch:

Fügen Sie Ihre Nutzer zur Konversation hinzu und ersetzen Sie CONVERSATION_ID und USER_ID durch die Werte von vorhin:

Das Client SDK verwendet JWTs zur Authentifizierung. Das JWT identifiziert den Benutzernamen, die zugehörige Anwendungs-ID und die dem Benutzer gewährten Berechtigungen. Es wird mit Ihrem privaten Schlüssel signiert, um zu beweisen, dass es ein gültiges Token ist. Sie können ein JWT für Ihre Benutzer erstellen, indem Sie den folgenden Befehl ausführen und dabei APP_ID durch Ihre Anwendungs-ID von vorhin ersetzen:

Das iOS-Projekt klonen

Um eine lokale Kopie des iOS-Projekts zu erhalten, öffnen Sie Ihr Terminal und geben Sie ein git clone git@github.com:nexmo-community/clientsdk-app-to-app-chat-swift.git. Wechseln Sie in das Verzeichnis clientsdk-app-to-app-chat-swift Ordner, indem Sie cd clientsdk-app-to-app-chat-swift. Installieren Sie dann die Abhängigkeiten des Projekts, indem Sie pod install. Sobald dies abgeschlossen ist, können Sie das Xcode-Projekt öffnen, indem Sie open AppToAppChat.xcworkspace ausführen.

Authentifizierung des Client SDK

Am Ende der Datei ViewController.swift Datei befindet sich eine User struct mit einer statischen Eigenschaft für unsere Benutzer Alice und Bob. Ersetzen Sie CONVERSATION_ID, ALICE_JWT und BOB_JWT durch die Werte, die Sie zuvor im Terminal erzeugt haben.

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")
}

Shazam einschalten

Sobald das Projekt geöffnet ist, vergewissern Sie sich, dass Sie einen eindeutigen Bundle-Identifikator haben und aktivieren Sie die automatische Signierung.

Als nächstes besuchen Sie den Abschnitt Kennungen Ihres Accounts im Entwicklerportal von Apple. Suchen Sie Ihre Bundle-Kennung, und unter App-Dienste ShazamKit aktivieren.

Musik erkennen

Berechtigungen für das Mikrofon

Um die abgespielte Musik zu erkennen, müssen Sie auf das Mikrofon des Geräts zugreifen, was Ihre Zustimmung erfordert. Ihr Projekt enthält eine Info.plist Datei mit Metadaten für die App - Sie finden die Datei in der Gruppe AppToAppChat.

Ein neuer Eintrag in der Datei Info.plist Datei ist erforderlich:

1. Bewegen Sie den Mauszeiger über den letzten Eintrag in der Liste und klicken Sie auf die kleine +-Schaltfläche, die erscheint.

2. Wählen Sie aus der Dropdown-Liste Privacy - Microphone Usage Description und fügen Sie To detect music with Shazam für seinen Wert.

Ihre Info.plist sollte folgendermaßen aussehen:

Als nächstes öffnen Sie Ihre AppDelegate.swift Datei und importieren Sie AVFoundation:

import UIKit
import AVFoundation

Rufen Sie dann requestRecordPermission: innerhalb von 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
}

Einen Audiopuffer erstellen

Die App wird das Mikrofon verwenden, um kontinuierlich Musik im Hintergrund zu erkennen. Daher müssen Sie einen Audiopuffer vom Mikrofon erstellen, der an ShazamKit übergeben wird. Öffnen Sie die ChatViewController.swift Datei, importiere AVFoundation, ShazamKit und fügen Sie der Klasse diese Eigenschaften hinzu:

import UIKit
import ShazamKit
import NexmoClient
import AVFoundation

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

    ... 
}

Als nächstes fügen Sie der Klasse eine neue Funktion namens 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()
}

Diese Funktion verwendet AVAudioEngine um auf den Eingang des Mikrofons zuzugreifen. AVAudioEngine ist ein robustes Framework, mit dem Sie Audio durch Einstecken/Verketten von Knotenobjekten manipulieren können. Sie sind nur an der Ausgabe interessiert, bus 0des inputNode für diese Anwendung. Die installTap Funktion ermöglicht es Ihnen, die Ausgabe zu beobachten und gibt Ihnen Zugriff auf ein AVAudioNodeTapBlock, das ein Typalias für ein AVAudioPCMBuffer und AVAudioTime Tupel ist. Sowohl der Puffer als auch die Zeit werden dann an die matchStreamingBuffer Funktion auf der SHSessionweitergegeben, die dann versucht, die abgespielte Musik mit dem Shazam-Katalog abzugleichen.

Um den Prozess zu beenden, müssen Sie eine Funktion namens stopAnalysingAudio hinzufügen, die die Beobachtung der Eingabe sicher beendet:

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

Setzen Sie den Delegaten der Sitzung auf diese Klasse, rufen Sie startAnalysingAudio am Ende der viewDidLoad Funktion und stopAnalysingAudio in der logout Funktion auf:

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

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

DieSHSessionDelegate

Da die App nun einen Puffer an ShazamKit weitergibt, müssen Sie die SHSessionDelegate um Updates zu erhalten. Erstellen Sie eine Erweiterung am Ende der Datei:

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)
        }
    }
}

Die Funktion didNotFindMatchFor Funktion wird aufgerufen, wenn ShazamKit keine Übereinstimmung oder einen Fehler gefunden hat. Ansonsten wird die didFind Funktion aufgerufen werden, wenn eine Übereinstimmung gefunden wurde.

Die Übereinstimmungen werden als Array mit unterschiedlichen Vertrauensstufen zurückgegeben, aber Sie nehmen das erste Ergebnis. Außerdem vergleicht die Funktion die Übereinstimmungs-ID mit der letzten Übereinstimmung, um sicherzustellen, dass das Senden einer Nachricht an den Chat nur einmal pro Übereinstimmung erfolgt.

Probieren Sie es aus

Erstellen und führen Sie das Projekt auf Ihrem iOS-Gerät und im Simulator aus (CMD + R). Melden Sie sich auf jedem Gerät mit einem anderen Benutzer an. Wenn Sie im Hintergrund Musik abspielen, wird das physische iOS-Gerät den Audiopuffer an ShazamKit weitergeben. Wenn ein Lied mit dem Shazam-Katalog übereinstimmt, wird eine Nachricht an den Chat gesendet.

Wie geht es weiter?

Sie finden das fertige Projekt auf GitHub. Mit dem Client SDK können Sie noch viel mehr tun. Erfahren Sie mehr über das Client SDK auf developer.nexmo.com und ShazamKit auf developer.apple.com