• Stars
    star
    544
  • Rank 81,699 (Top 2 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🗣 An overlay that gets your user’s voice permission and input as text in a customizable UI

Voice Overlay for iOS

Platform iOS Swift 4 compatible Carthage compatible CocoaPods compatible License: MIT

Overview

Voice overlay helps you turn your user's voice into text, providing a polished UX while handling for you the necessary permissions.

It uses internally the native SFSpeechRecognizer in order to perform the speech to text conversion.

       

Demo

You can clone and run the Demo project by doing pod install and then running the project

Installation

Swift Package Manager

The Swift Package Manager is a tool for managing the distribution of Swift code. It’s integrated with the Swift build system to automate the process of downloading, compiling, and linking dependencies.

To use SwiftPM, you should use Xcode 11+ to open your project. Click File -> Swift Packages -> Add Package Dependency, enter InstantSearch VoiceOverlay repo's URL.

If you're a framework author and use VoiceOverlay as a dependency, update your Package.swift file:

let package = Package(
    // 1.1.0 ..< 2.0.0
    dependencies: [
        .package(url: "https://github.com/algolia/voice-overlay-ios", from: "1.1.0")
    ],
    // ...
)

CocoaPods

InstantSearchVoiceOverlay is available through CocoaPods. To install it, add the following line to your Podfile:

pod 'InstantSearchVoiceOverlay', '~> 1.1.0'

Carthage

Carthage is a simple, decentralized dependency manager for Cocoa.

To install InstantSearchVoiceOverlay, add the following line to your Cartfile:

github "algolia/voice-overlay-ios" ~> 1.1.0

Usage

  1. In Info.plist, add these 2 string properties along with the description
  • Privacy - Microphone Usage Description with a description like: Need the mic for audio to text
  • Privacy - Speech Recognition Usage Description some description like: Need the speech recognition capabilities for searching tags

  1. Start the Voice Overlay and listen to the text output:
import InstantSearchVoiceOverlay

class ViewController: UIViewController {
    
    let voiceOverlayController = VoiceOverlayController()
    
    @objc func voiceButtonTapped() {
        
        voiceOverlayController.start(on: self, textHandler: { (text, final) in
            print("voice output: \(String(describing: text))")
            print("voice output: is it final? \(String(describing: final))")
        }, errorHandler: { (error) in
            print("voice output: error \(String(describing: error))")
        })
    }

Customization

You can customize your voice overlay by modifying the settings property of the voiceOverlayController:

/// Specifies whether the overlay directly starts recording (true), 
/// or if it requires the user to click the mic (false). Defaults to true.
voiceOverlayController.settings.autoStart = true

/// Specifies whether the overlay stops recording after the user stops talking for `autoStopTimeout`
/// seconds (true), or if it requires the user to click the mic (false). Defaults to true.
voiceOverlayController.settings.autoStop = true

/// When autoStop is set to true, autoStopTimeout determines the amount of
/// silence time of the user that causes the recording to stop. Defaults to 2.
voiceOverlayController.settings.autoStopTimeout = 2

/// The layout and style of all screens of the voice overlay.
voiceOverlayController.settings.layout.<someScreen>.<someConstant>

// Use XCode autocomplete to see all possible screens and constants that are customisable.
// Examples:

/// The voice suggestions that appear in bullet points
voiceOverlayController.settings.layout.inputScreen.subtitleBulletList = ["Suggestion1", "Sug2"]
/// Change the title of the input screen when the recording is ongoing.
voiceOverlayController.settings.layout.inputScreen.titleListening = "my custom title"
/// Change the background color of the permission screen.
voiceOverlayController.settings.layout.permissionScreen.backgroundColor = UIColor.red
/// And many more...

Changing Locale or SpeechController

You can change locale or SpeechController when initializing your voiceOverlayController like so:

lazy var voiceOverlayController: VoiceOverlayController = {
  let recordableHandler = {
    return SpeechController(locale: Locale(identifier: "en_US"))
  }
  return VoiceOverlayController(speechControllerHandler: recordableHandler)
}()

You can create your own custom SpeechController class by implementing the Recordable protocol.

Note that in Swift 4, you can use Locale.current.languageCode to get current locale.

Delegate

Optionally, to listen to text and error events, you can conform to the method of the VoiceOverlayDelegate protocol.

// Second way to listen to recording through delegate
func recording(text: String?, final: Bool?, error: Error?) {
    if let error = error {
        print("delegate: error \(error)")
    }
    
    if error == nil {
        print("delegate: text \(text)")
    }
}

How it handles when Permissions are missing

When there are missing permissions, the voice overlay will guide the user to the correct section of the settings app.

Result Screen (Beta)

The result screen appears when showResultScreen is set to true.

/// Whether or not to show a result screen after the recording is finished.
voiceOverlayController.settings.showResultScreen = true

/// Timeout for showing the result screen in case no resultScreenText is provided on time.
voiceOverlayController.settings.showResultScreenTimeout = 2

/// Time for showing the result screen with the provided resultScreenText.
voiceOverlayController.settings.showResultScreenTime = 4

/// The processed result screen text that should be appear in the result screen.
voiceOverlayController.settings.resultScreenText = NSAttributedString(string: myString, attributes: myAttributes)

The widget provides a resultScreenHandler for when the result screen is dismissed (provided the "Start again" button is not clicked). The handler provides the text that has been set in resultScreenText beforehand.

voiceOverlayController.start(on: self, textHandler: { (text, final) in
    print("getting \(String(describing: text))")
    print("is it final? \(String(describing: final))")

    if final {
        // Process the result to post in the result screen.
        // The timer here simulates a network processing call that took 1.5 seconds.
        Timer.scheduledTimer(withTimeInterval: 1.5, repeats: false, block: { (_) in
            let myString = text
            let myAttribute = [ NSAttributedString.Key.foregroundColor: UIColor.red ]
            let myAttrString = NSAttributedString(string: myString, attributes: myAttribute)

            self.voiceOverlayController.settings.resultScreenText = myAttrString
        })
    }
}, errorHandler: { (error) in
    print("error \(String(describing: error))")
}, resultScreenHandler: { (text) in
    print("Result Screen: \(text)")
})

Getting Help

Getting involved

  • If you want to contribute please feel free to submit pull requests.
  • If you have a feature request please open an issue.
  • If you use InstantSearch in your app, we would love to hear about it! Drop us a line on discourse or twitter.

License

InstantSearchVoiceOverlay is available under the MIT license. See the LICENSE file for more info.

More Repositories

1

places

🌐 Turn any <input> into an address autocomplete
JavaScript
5,372
star
2

autocomplete

🔮 Fast and full-featured autocomplete library
TypeScript
5,047
star
3

docsearch

📘 The easiest way to add search to your documentation.
TypeScript
3,980
star
4

instantsearch

⚡️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.
TypeScript
3,700
star
5

react-instantsearch

⚡️ Lightning-fast search for React and React Native applications, by Algolia.
TypeScript
1,969
star
6

algoliasearch-client-javascript

⚡️ A fully-featured and blazing-fast JavaScript API client to interact with Algolia.
TypeScript
1,259
star
7

github-awesome-autocomplete

:octocat: Add instant search capabilities to GitHub's search bar
JavaScript
1,062
star
8

vue-instantsearch

👀 Algolia components for building search UIs with Vue.js
JavaScript
854
star
9

shipjs

Take control of what is going to be your next release.
JavaScript
749
star
10

awesome-algolia

🔍👋 START HERE! A curated list of Algolia libraries, resources and projects.
696
star
11

algoliasearch-client-php

⚡️ A fully-featured and blazing-fast PHP API client to interact with Algolia.
PHP
670
star
12

instantsearch-ios

⚡️ A library of widgets and helpers to build instant-search applications on iOS.
Swift
573
star
13

sup3rS3cretMes5age

Simple to use, simple to deploy, one time self destruct messaging service, with hashicorp vault as a backend
Go
506
star
14

react-element-to-jsx-string

Turn a ReactElement into the corresponding JSX string
JavaScript
490
star
15

hn-search

Hacker News Search
TypeScript
489
star
16

docsearch-configs

DocSearch - Configurations
JavaScript
455
star
17

expect-jsx

✅ toEqualJSX for expect assertion library
JavaScript
410
star
18

algoliasearch-rails

AlgoliaSearch integration to your favorite ORM
Ruby
398
star
19

scout-extended

Scout Extended: The Full Power of Algolia in Laravel
PHP
382
star
20

algoliasearch-wordpress

❌🗑🙅‍♂️ Algolia Search plugin for WordPress is no longer supported. Please use our API client guide instead
JavaScript
360
star
21

docsearch-scraper

DocSearch - Scraper
Python
298
star
22

color-extractor

Extract the dominant color(s) of your fashion articles!
Python
271
star
23

algoliasearch-netlify

Official Algolia Plugin for Netlify. Index your website to Algolia when deploying your project to Netlify with the Algolia Crawler
TypeScript
260
star
24

angular-instantsearch

⚡️Lightning-fast search for Angular apps, by Algolia
TypeScript
255
star
25

voice-overlay-android

🗣 An overlay that gets your user’s voice permission and input as text in a customizable UI
Kotlin
253
star
26

algoliasearch-laravel

[Deprecated] We now recommend using Laravel Scout, see =>
PHP
238
star
27

jekyll-algolia

Add fast and relevant search to your Jekyll site
Ruby
214
star
28

algoliasearch-client-swift

⚡️ A fully-featured and blazing-fast Swift API client to interact with Algolia.
Swift
203
star
29

algoliasearch-client-python

⚡️ A fully-featured and blazing-fast Python API client to interact with Algolia.
Python
194
star
30

algoliasearch-client-go

⚡️ A fully-featured and blazing-fast Go API client to interact with Algolia.
Go
193
star
31

search-bundle

Seamless integration of Algolia Search into your Symfony project.
PHP
190
star
32

atom-autocomplete-module-import

⚛️ Search & install npm packages from import/require statements.
JavaScript
182
star
33

gatsby-plugin-algolia

A plugin to push to Algolia based on graphQl queries
JavaScript
176
star
34

algoliasearch-helper-js

Helper for implementing advanced search features with Algolia
JavaScript
174
star
35

datasets

Interesting datasets you could use with Algolia
173
star
36

youtube-captions-scraper

Fetch youtube user submitted or fallback to auto-generated captions
JavaScript
173
star
37

pwa-ecom-ui-template

React/Next.js based starter kit, focused on delivering a rich Search & Discovery e-commerce experience.
TypeScript
172
star
38

algoliasearch-django

Seamless integration of Algolia into your Django project.
Python
167
star
39

algoliasearch-client-ruby

⚡️ A fully-featured and blazing-fast Ruby API client to interact with Algolia.
Ruby
166
star
40

algoliasearch-magento-2

Algolia Search integration for Magento 2 - compatible with versions from 2.3.x to 2.4.x
PHP
156
star
41

instantsearch-android

A library of widgets and helpers to build instant-search applications on Android.
Kotlin
153
star
42

instant-search-demo

Instant-search demo (facets, sliders, paginations & more)
CSS
140
star
43

npm-search

🗿 npm ↔️ Algolia replication tool ⛷️ 🐌 🛰️
TypeScript
134
star
44

algoliasearch-jekyll

⚠ DEPRECATED Use jekyll-algolia instead.
Ruby
124
star
45

algoliasearch-client-csharp

⚡️ A fully-featured and blazing-fast C# API client to interact with Algolia.
C#
113
star
46

firestore-algolia-search

TypeScript
112
star
47

kubernetes-hands-on

Kubernetes Hands-on by Algolia
110
star
48

frontman

💎 A Ruby-based static website generator
Ruby
108
star
49

create-instantsearch-app

⚡️ Build InstantSearch apps at the speed of thought
JavaScript
107
star
50

algoliasearch-client-android

Algolia Search API Client for Android
Java
98
star
51

faux-jax

NO MORE MAINTAINED: Intercept and respond to requests in the browser (AJAX) and Node.js (http(s) module)
JavaScript
96
star
52

cli

🔍 Algolia’s official CLI devtool
Go
94
star
53

algolia-cli-old

[DEPRECATED] This repo and npm package are no longer maintained or supported. The new official command line tool can be found here: https://github.com/algolia/cli
JavaScript
82
star
54

doc-code-samples

This repository holds the Algolia documentation big code samples like GeoSearch, Calendar...
TypeScript
82
star
55

rollup-jest-boilerplate

🎉 Full featured boilerplate for building JavaScript libraries the modern way
JavaScript
80
star
56

marvel-search

Searchable list of all Marvel superheroes and supervillains
JavaScript
77
star
57

examples

Set of code samples highlighting the different ways to use the Algolia API
CSS
76
star
58

instantsearch-ios-examples

Example apps built with InstantSearch iOS
Swift
67
star
59

instantsearch-android-examples

Example apps built with algolia/instantsearch-android
Kotlin
63
star
60

algoliasearch-client-css

Algolia Search API Client for CSS
JavaScript
63
star
61

mongoolia

Keep your mongoose schemas synced with Algolia
JavaScript
58
star
62

algoliasearch-client-kotlin

⚡️ A fully-featured and blazing-fast Kotlin/Android API client to interact with Algolia.
Kotlin
56
star
63

hn-reactnative-sample

Sample Hacker News Search app by Algolia based on React Native.
JavaScript
54
star
64

search-insights.js

Library for reporting click, conversion and view metrics using the Algolia Insights API
TypeScript
53
star
65

jest-serializer-html

Jest snapshot serializer that beautifies HTML.
JavaScript
51
star
66

redux-updeep

small reducer generator that uses updeep to immutably deep merge partial updates into the reducer's state
JavaScript
50
star
67

algoliasearch-alexa

🔊 Search by voice in Alexa, powered by Algolia
JavaScript
44
star
68

chunk-text

🔪 chunk/split a string by length without cutting/truncating words.
JavaScript
44
star
69

algoliasearch-client-java

⚡️ A fully-featured and blazing-fast Java API client to interact with Algolia.
Java
43
star
70

react-nouislider

CSS
42
star
71

react-test-boilerplate

Companion project for Algolia's React unit testing blog post
JavaScript
41
star
72

algoliasearch-crawler-github-actions

Algolia Crawler Github action
TypeScript
40
star
73

demo-geo-search

Demo code illustrating the geo search features of Algolia
JavaScript
39
star
74

laravel-scout-algolia-macros

DEPRECATED: Use of this repository is deprecated. Please use Scout Extended - https://github.com/algolia/scout-extended instead.
PHP
39
star
75

algoliasearch-client-objc

Algolia Search API Client for iOS & OS X
Objective-C
38
star
76

docsearch-website

Previous repository for the DocSearch documentation website, now at https://github.com/algolia/docsearch/tree/next/packages/website
CSS
38
star
77

algoliasearch-client-node

DEPRECATED
36
star
78

algoliasearch-rails-example

AlgoliaSearch+Ruby on Rails examples
Ruby
36
star
79

elasticsearch-topk-plugin

Elasticsearch Top-K Aggregation Plugin
Java
35
star
80

wordpress-docker

Simple docker based environment for WordPress plugins and themes development.
Shell
34
star
81

algolia-sitemap

a node library allowing you to generate sitemaps from an Algolia index.
JavaScript
33
star
82

jekyll-algolia-example

Front-end example of the jekyll-algolia plugin
HTML
33
star
83

vue-instantsearch-examples

Examples for Vue InstantSearch v1, v2 links: https://github.com/algolia/vue-instantsearch-examples/issues/50
Shell
33
star
84

unified-instantsearch-ecommerce

The fastest way to implement Algolia, for e-commerce customers.
JavaScript
32
star
85

algoliasearch-client-java-legacy

*DEPRECATED* Algolia Search API Client for Java, see https://github.com/algolia/algoliasearch-client-java-2
Java
31
star
86

talksearch-scraper

Extract captions and metadata from YouTube playlists and push them to Algolia
JavaScript
31
star
87

diffable-html

Opinionated HTML formatter focused towards making HTML diffs readable.
JavaScript
30
star
88

api-clients-automation

🤖 Monorepo of the Algolia API specs and their auto-generated clients and documentation
PHP
30
star
89

recommend

A UI library for Algolia Recommend, available for Vanilla JavaScript and React.
TypeScript
29
star
90

eslint-config-algolia

Algolia's ESLint config and prettier instructions for JavaScript projects
JavaScript
27
star
91

talksearch

🎤 An interactive search experience for video titles and transcripts
JavaScript
25
star
92

algolia-firebase-nodejs

An example showing how to push data from Firebase to Algolia
JavaScript
24
star
93

algoliasearch-client-scala

⚡️ A fully-featured and blazing-fast Scala API client to interact with Algolia.
Scala
24
star
94

redux-magic-async-middleware

redux-magic-async-middleware is a middleware which makes it easy to handle asynchronous data with redux
JavaScript
23
star
95

laravel-scout-settings

DEPRECATED: Use of this repository is deprecated. Please use Scout Extended - https://github.com/algolia/scout-extended instead.
PHP
23
star
96

pdrone

Control Parrot drones with JavaScript
JavaScript
23
star
97

algoliasearch-helper-flutter

⚡️ Building block to create instant-search applications with Flutter
Dart
23
star
98

algolia-swift-demo

iOS instant search tutorial
Swift
23
star
99

algolia-react-boilerplate

🔥 A highly scalable, and customizable boilerplate, made with ReactInstantSearchHooks and with many Algolia's features. Ready to configure and deploy. You have just to follow steps in readme file. 💥
JavaScript
23
star
100

algolia-coding-contest

Welcome to the first Algolia Coding Contest, until May 5th.
22
star