https://a.storyblok.com/f/270183/67878/4696cbaccf/shazamkit_musicdetection_1200x600.png

Detecção de músicas com o ShazamKit

Tempo de leitura: 10 minutos

Neste tutorial, você utilizará o ShazamKit para detectar músicas que estão tocando e enviá-las como uma mensagem para um chat com o Vonage Client SDK para iOS. O ShazamKit está disponível no iOS 15 e versões posteriores, que, no momento da redação deste artigo, se encontram em fase beta.

Pré-requisitos

  • Um account de desenvolvedor da Apple e um dispositivo de teste com o iOS 15.

  • Xcode 13.

  • Cocoapods para instalar o Vonage Client SDK para iOS.

  • Nossa interface de linha de comando, que você pode instalar com npm install @vonage/cli -g.

  • O plug-in CLI Conversations da Vonage pode ser instalado com vonage plugins:install @vonage/cli-plugin-conversations

O Projeto Inicial

Este tutorial se baseará no projeto “Criação de um aplicativo de bate-papo” do portal de desenvolvedores da Vonage. Este tutorial começará com a clonagem do projeto finalizado do GitHub, mas se você não estiver familiarizado com o uso do Vonage Client SDK para iOS na criação de um aplicativo de bate-papo, pode começar pelo tutorial. Se você seguir o tutorial, poderá pular diretamente para a seção “Ativar o ShazamKit”.

Configurar uma aplicação da Vonage

Agora você precisa criar um aplicativo Vonage. Um aplicativo contém as informações de segurança e configuração necessárias para se conectar ao Vonage. Crie um diretório para o seu projeto usando o comando `mkdir` vonage-tutorial no seu terminal e, em seguida, acesse o novo diretório usando o comando `cd` vonage-tutorial. Crie um aplicativo Vonage usando o seguinte comando:

vonage apps:create "ShazamKit" --rtc-event-url=https://example.com/

Um arquivo chamado vonage_app.json é criado no diretório do seu projeto e contém o ID de aplicativo da Vonage recém-criado e a chave privada. Um arquivo de chave privada chamado shazamkit.key também é criado.

Em seguida, crie usuários para seu aplicativo. Para isso, execute o seguinte comando:

vonage apps:users:create Alice vonage apps:users:create Bob

Inicie uma conversa:

vonage apps:conversations:create "shazam"

Adicione seus usuários à conversa, substituindo CONVERSATION_ID e USER_ID pelos valores indicados anteriormente:

# Alice's User ID vonage apps:conversations:members:add CONVERSATION_ID USER_ID # Bob's User ID vonage apps:conversations:members:add CONVERSATION_ID USER_ID

O Client SDK utiliza JWTs para autenticação. O JWT identifica o nome de usuário, o ID do aplicativo associado e as permissões concedidas ao usuário. Ele é assinado com sua chave privada para comprovar que se trata de um token válido. Você pode criar um JWT para seus usuários executando o comando a seguir, substituindo APP_ID pelo ID do seu aplicativo, definido anteriormente:

vonage jwt --app_id=APP_ID --subject=Alice --key_file=./shazamkit.key --acl='{ "paths": { "/*/users/**": {}, "/*/conversations/**": {}, "/*/sessions/**": {}, "/*/devices/**": {}, "/*/image/**": {}, "/*/media/**": {}, "/*/push/**": {}, "/*/knocking/**": {}, "/*/legs/**": {} } }'
vonage jwt --app_id=APP_ID --subject=Bob --key_file=./shazamkit.key --acl='{ "paths": { "/*/users/**": {}, "/*/conversations/**": {}, "/*/sessions/**": {}, "/*/devices/**": {}, "/*/image/**": {}, "/*/media/**": {}, "/*/push/**": {}, "/*/knocking/**": {}, "/*/legs/**": {} } }'

Clonar o projeto do iOS

Para obter uma cópia local do projeto iOS, abra o terminal e digite git clone git@github.com:nexmo-community/clientsdk-app-to-app-chat-swift.git. Mude para o diretório clientsdk-app-to-app-chat-swift pasta usando cd clientsdk-app-to-app-chat-swift. Em seguida, instale as dependências do projeto executando pod install. Quando terminar, você pode abrir o projeto do Xcode executando o comando `open AppToAppChat.xcworkspace`.

Autenticação do Client SDK

Na parte inferior do ViewController.swift arquivo, há uma User estrutura com uma propriedade estática para nossos usuários Alice e Bob. Substitua CONVERSATION_ID, ALICE_JWT e BOB_JWT pelos valores que você gerou no terminal anteriormente.

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

Ativar o Shazam

Assim que o projeto estiver aberto, certifique-se de que você tenha um identificador de pacote exclusivo e ative a assinatura automática.

Bundle identifier section of Xcode

Em seguida, acesse a seção de identificadores da sua conta no portal de desenvolvedores da Apple. Localize seu identificador de pacote e, em Serviços de aplicativos , habilite o ShazamKit.

App Services on the developer portal

Detectar música

Permissões do microfone

Para detectar a música que está sendo reproduzida, você precisará acessar o microfone do dispositivo, o que requer sua permissão. Seu projeto contém um Info.plist arquivo com metadados do aplicativo – você encontrará o arquivo dentro do grupo AppToAppChat.

É necessário um novo registro no Info.plist arquivo é necessária:

  1. Passe o mouse sobre o último item da lista e clique no pequeno botão “+” que aparecerá.

  2. Na lista suspensa, selecione Privacy - Microphone Usage Description e insira To detect music with Shazam como valor.

O seu Info.plist deveria ficar assim:

Info.plist after adding microphone permissions

Em seguida, abra seu AppDelegate.swift arquivo e importe AVFoundation:

import UIKit
import AVFoundation

Em seguida, chame requestRecordPermission: dentro 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
}

Criar um buffer de áudio

O aplicativo usará o microfone para detectar continuamente músicas em segundo plano; portanto, você precisará criar um buffer de áudio a partir do microfone para enviar ao ShazamKit. Abra o ChatViewController.swift arquivo, importe AVFoundation, ShazamKit e adicione estas propriedades à classe:

import UIKit
import ShazamKit
import NexmoClient
import AVFoundation

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

    ... 
}

Em seguida, adicione uma nova função à classe chamada 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()
}

Essa função utiliza AVAudioEngine para acessar a entrada do microfone. AVAudioEngine é uma estrutura robusta que permite manipular áudio conectando/encadeando objetos de nó. Você está interessado apenas na saída, bus 0, do inputNode para este aplicativo. A installTap função permite que você observe a saída e fornece acesso a um AVAudioNodeTapBlock, que é um alias de tipo para um AVAudioPCMBuffer e AVAudioTime tupla. Tanto o buffer quanto o tempo são então passados para a matchStreamingBuffer função no SHSession, que então tenta identificar qualquer música que esteja tocando no Catálogo do Shazam.

Para encerrar o processo, é preciso adicionar uma função chamada stopAnalysingAudio que interromperá com segurança a observação da entrada:

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

Defina o delegado da sessão como essa classe e chame startAnalysingAudio no final da viewDidLoad função e stopAnalysingAudio na logout função:

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

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

O SHSessionDelegate

Agora que o aplicativo está passando um buffer para o ShazamKit, você precisa implementar o SHSessionDelegate para receber atualizações. Crie uma extensão no final do arquivo:

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

A didNotFindMatchFor função é chamada quando o ShazamKit não encontra nenhuma correspondência ou ocorre um erro. Caso contrário, a didFind função será chamada quando for encontrada uma correspondência.

As correspondências são retornadas como uma matriz com diferentes níveis de confiança, mas você deve usar o primeiro resultado. Além disso, a função compara o ID da correspondência com o da última correspondência para garantir que, ao enviar uma mensagem para o chat, isso ocorra apenas uma vez por correspondência.

Experimente

Compile e execute (CMD + R) o projeto no seu dispositivo iOS e também no simulador. Faça login com um usuário diferente em cada dispositivo. Se você reproduzir alguma música em segundo plano, o dispositivo iOS físico enviará o buffer de áudio para o ShazamKit. Se uma música corresponder ao catálogo do Shazam, uma mensagem será enviada para o chat.

Chat showing a song being matched

E agora?

Você pode encontrar o projeto concluído no GitHub. É possível fazer muito mais com o Client SDK. Saiba mais sobre o Client SDK em developer.nexmo.com e sobre o ShazamKit em developer.apple.com

Compartilhar:

https://a.storyblok.com/f/270183/400x400/19c02db2d3/abdul-ajetunmobi.png
Abdul AjetunmobiEx-funcionário da Vonage

Abdul é um Developer Advocate da Vonage. Ele tem experiência profissional na área de produtos de consumo como engenheiro de iOS. Em seu tempo livre, ele gosta de andar de bicicleta, ouvir música e orientar quem está dando os primeiros passos na área de tecnologia