CODEWITHSUNDEEP
javascriptioshtmlgoogle-chromespeech-recognition
expireD
expireD

Reputation: 361

Add iOS speech recognition support for web app?

Currently, the HTML5 web speech api works great on google chrome for all devices except mobile iOS. Text-to-speech works, but speech-to-text is not supported. webkitSpeechRecognition is not supported. See: Chrome iOS webkit speech-recognition

I am unable to find a workaround. I would like to add speech recognition support for iOS to my current web app that uses speech recognition and speech synthesis. Any suggestions? Thank you.

Upvotes: 25

Views: 7129

Answers (2)

Komeil Mehranfar
Komeil Mehranfar

Reputation: 137

Regrettably, the functionality of the Web Speech API's speech recognition falls short on mobile iOS devices, including Google Chrome for iOS, as a consequence of Apple's restrictions imposed on iOS devices.

The absence of the WebKit Speech Recognition API (webkitSpeechRecognition) on iOS confines us to a web platform that lacks a straightforward solution. Nonetheless, there are alternative approaches that merit consideration, affording possibilities to navigate this challenge:

One viable option involves integrating third-party speech recognition services into your web app, instead of relying solely on the browser's native functionality. Esteemed services such as Google Cloud Speech-to-Text, IBM Watson Speech to Text, and Microsoft Azure Speech to Text come to the forefront. These services boast the provision of Software Development Kits (SDKs) or Application Programming Interfaces (APIs) that empower seamless incorporation of speech recognition capabilities within your web app. However, it's crucial to bear in mind that adopting this approach may entail additional costs and dependencies.

Alternatively, if the imperative for speech recognition specifically on iOS persists, crafting a native iOS app might hold promise. By harnessing Apple's speech recognition APIs, you can develop an application tailor-made for iOS devices. Subsequently, by forging integration channels between your web app and this native iOS counterpart through techniques like deep linking or custom URL schemes, users utilizing iOS devices can seamlessly transition to the native app to access speech recognition features while continuing to engage with your web app for its diverse array of functionalities.

Upvotes: 2

user8780079
user8780079

Reputation:

Try something like this

recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
recognition.lang = "en-US";
recognition.interimResults = false;
recognition.maxAlternatives = 5;
recognition.onresult = function(event) {
  speechResults = event.results[0][0].transcript;
};
recognition.start();

The way the recognition variable is setup allows support for a variety of browsers. I made a Weave at LiveWeave.

Upvotes: 0

Related Questions