--- title: "Tekst-naar-spraak functionaliteit voor mobiele apps" date: "2017-08-28" categories: - "mobile" - "mobile-development" - "mobiletogether" - "tools" tags: - "mobile-development" - "mobiletogether" - "software-tools" description: Ontdek hoe Altova MobileTogether tekst-naar-spraak functionaliteit integreert in mobiele apps die op verschillende platforms werken, waardoor de gebruikerservaring wordt verbeterd door middel van gesproken informatie. --- Status: #blog Tags: #mobile-development #mobiletogether #software-tools Categories: [mobile-development](/blog/nl/category/mobile-development.md) | [low-code+no-code](/blog/nl/category/low-codeno-code.md) # Tekst-naar-spraak functionaliteit voor mobiele apps Altova MobileTogether ondersteunt tekst-naar-spraak functionaliteit voor [mobiele apps die op verschillende platforms werken](https://www.altova.com/nl/mobiletogether), waardoor ontwikkelaars spraakfunctionaliteit kunnen toevoegen en een rijke, multimediale gebruikerservaring kunnen creëren. Spraak kan volledig worden geïntegreerd met tekst, waar deze ook verschijnt in een app. Zo kan een app, zoals het voorbeeld "Parcel Delivery MobileTogether", worden verbeterd door het volgende afleveradres hardop voor te lezen – vooral als de chauffeur in het verkeer rijdt! Of, de tekst in berichtvakken of andere informatieblokken kan ook door het mobiele apparaat worden voorgelezen. We hebben een eenvoudige demo gemaakt om te experimenteren met de functionaliteit van tekst-naar-spraak voor mobiele apps, en vervolgens tekst-naar-spraakfuncties toegevoegd aan de app voor pakketbezorging. ![Tekst-naar-spraak functionaliteit voor mobiele apps](/blog/images/shutterstock_1615112031.jpg) Deze zeer eenvoudige demo-app voor tekst-naar-spraak heeft vier functies: - Een invoerveld geeft de gebruiker de mogelijkheid om tekst in te typen of om een vooraf ingestelde standaardtekst uit te spreken - Een "Spreek"-knop laat de tekst die is ingevoerd, hardop voor - De "Stil" knop wordt automatisch uitgeschakeld als er wordt gesproken - De "Afsluiten"-knop toont een berichtvenster met een gesproken bericht en een optie om de app te verlaten Hier is de app die draait op een Android-apparaat, met tekst in het invoerveld: ![Tekst-naar-spraak functionaliteit voor mobiele apps: een eenvoudige demonstratie op een Android-apparaat](/blog/images/new-android-shot-1-small.png) Tekst in een app kan afkomstig zijn van verschillende bronnen, waaronder het knipbord van het mobiele apparaat (voor kopiëren en plakken). Op de onderstaande screenshot heeft een iPhone-gebruiker de standaardtekst verwijderd, die was gekopieerd van de Altova-website, en deze in het invoerveld geplakt: ![Tekst-naar-spraak functionaliteit voor mobiele apps: een eenvoudige demonstratie op een iPhone](/blog/images/replacement-iPhone-shot-small.png) Het veld is ingesteld om meerdere regels tekst te kunnen bevatten, en het vak wordt automatisch aangepast om de ingevoegde tekst te kunnen weergeven. De tekst die in het invoerveld wordt ingevoerd, wordt opgeslagen in een element in de app-gegevensstructuur. De actie die aan de "Spreek"-knop is toegewezen, zorgt ervoor dat de ingebouwde tekst-naar-spraak-engine van het mobiele apparaat de tekst voorleest. Deze enkele actie, die is gedefinieerd in het dialoogvenster "Acties" van MobileTogether, werkt ongeacht of de app draait op een Android-, iOS- of Windows-telefoon, op een Windows 10-computer, of zelfs in een webbrowser op een ander apparaat. ![Tekst-naar-spraak functionaliteit voor acties in mobiele apps](/blog/images/text-to-speech-action.png) We hebben de "Tekst omzetten naar spraak"-functie direct toegewezen aan de acties voor de "Spreek"-knop, maar deze kan ook in een actiegroep worden gebruikt. We hebben een actiegroep gebruikt voor de "Afsluiten"-knop. Wanneer de gebruiker op "Afsluiten" klikt, willen we zowel een berichtvenster weergeven als het bericht voorlezen, zoals hier te zien is op een Android-telefoon: ![Tekst-naar-spraak voor mobiele apps: een eenvoudige demonstratie. Afsluitbericht](/blog/images/exit-message-capture.png) Hieronder staan de acties die zijn gedefinieerd voor de knop "Afsluiten": ![Tekst-naar-spraak voor mobiele apps – Acties gedefinieerd voor de "Terug"-knop](/blog/images/message-box-action-group.png) De zinsnede "Bent u zeker dat u deze app wilt verlaten?" wordt opgeslagen in de datastructuur en gebruikt in XPath-expressies voor de actie "Tekst omzetten naar spraak" en voor het berichtvenster dat eronder verschijnt. Wanneer de gebruiker op "OK" klikt, wacht een "Loop"-actie totdat de tekst-naar-spraak functie is voltooid, voordat de app wordt afgesloten. ### De pakketbezorg-app bijwerken met tekst-naar-spraak functionaliteit voor mobiele apps De voorbeeldapplicatie voor pakketbezorging is oorspronkelijk gemaakt om te laten zien hoe je met geografische locatiegegevens kunt werken in MobileTogether. In deze simulatie is de gebruiker een bezorger voor een transportbedrijf, die pakketten moet bezorgen vanaf een magazijn in New Jersey naar verschillende bestemmingen in New York City. Zodra een nieuwe bestemming wordt toegewezen, toont de app een pagina met de bezorginformatie, inclusief het adres en de huidige afstand tot de bestemming, zoals te zien is in deze weergave van de MobileTogether Simulator voor een Android-telefoon: ![Voorbeeldapp voor pakketbezorging, bekeken in de MobileTogether-simulator](/blog/images/Delivery-Page-in-simulator.png) We willen tekst-naar-spraak functionaliteit toevoegen, zodat bij elke nieuwe bestemming en afstand die de bestuurder aflegt, deze informatie via spraak wordt weergegeven. Ten eerste kunnen we een nieuwe gebruikersinstelling toevoegen aan de configuratiepagina, met een schakelaar waarmee tekst-naar-spraak kan worden ingeschakeld of uitgeschakeld. Hieronder een voorbeeld van de bijgewerkte configuratiepagina, zoals deze op een iPhone wordt weergegeven: ![Mobiele demo-app voor pakketbezorging: configuratiepagina bekeken in de simulator](/blog/images/new-configuration.png) In de sectie "Levering" in de ontwerper kunnen we zien dat de bestemming, de huidige locatie en de afstand tot de bestemming allemaal afgeleid zijn van XPath-expressies: ![Mobiele demo-app voor pakketbezorging. De pagina voor bezorging is bekeken in de MobileTogether Designer](/blog/images/Delivery-Page-in-Designer.png) Dezezelfde uitdrukkingen kunnen worden toegewezen aan tekst-naar-spraak acties. We hebben eerst een actiegroep gemaakt om elke nieuwe bestemming uit te spreken. Het gebied dat hieronder in blauw is gemarkeerd, toont de tekst-naar-spraak actie. We hebben de functie "concat" gebruikt om een paar extra woorden toe te voegen en zo een spreekzin te creëren die het adres en de beginafstand bevat: ![Mobiele demo-app voor pakketbezorging – Een actiegroep kondigt de volgende bestemming aan](/blog/images/destination-action-group.png) Naarmate de bestuurder de bestemming nadert, wordt de geografische locatie periodiek bijgewerkt en wordt de afstand tot de bestemming opnieuw berekend. We hebben een tweede actiegroep gemaakt om de nieuwe afstand aan te kondigen: ![Voorbeeld van een actiegroep voor tekst-naar-spraak functionaliteit in mobiele apps](/blog/images/new-distance-action-group.png) De lus bovenaan is vergelijkbaar met de actie die is gedefinieerd voor de "Verlaten"-knop van onze demo-app, zoals hierboven beschreven. In dit geval voorkomt het dat de nieuwe tekst-naar-spraak-actie de vorige actie onderbreekt, zolang de vorige tekst-naar-spraak-actie nog niet is voltooid. Dit zou anders kunnen gebeuren als er een update van de locatiegegevens plaatsvindt voordat de vorige spraakuitvoer is voltooid. Onze tekst-naar-spraak actiegroepen moeten worden aangeroepen tijdens de uitvoering van de app. In de eerste plaats kunnen we de actiegroep "Vocalize Next Destination" plaatsen in de reeks acties die worden uitgevoerd wanneer een pagina wordt geladen, specifiek voor de pagina "Delivery": ![Mobiele demo-app voor pakketbezorging – plaatsing van de eerste actiegroep voor de bestemming](/blog/images/new-page-load-actions.png) De pagina "Levering" wordt één keer geladen voor de eerste levering. Voor de tweede tot en met de laatste leveringen kunnen we de actiegroep toevoegen aan de bestaande actiegroep "Ga verder naar volgende bestemming": ![Mobiele demo-app voor pakketbezorging – plaatsing van een actiegroep voor de volgende bestemming](/blog/images/insert-first-vocalization.png)   Het enige wat we nu nog moeten doen is de actiegroep "Vocalize New Distance" toevoegen aan de acties die worden uitgevoerd bij het vernieuwen van de pagina ("OnPageRefresh") voor de pagina waarop de levering wordt weergegeven ![Mobiele demo-app voor pakketbezorging – vernieuw de acties op de pagina "Bezorging"](/blog/images/new-page-refresh-actions.png) Of de app nu draait in de MobileTogether-simulator of op een mobiel apparaat, de bestuurder ontvangt gesproken updates en hoeft niet van de weg af te kijken! U kunt zelf tekst-naar-spraak functionaliteit voor mobiele apps ontwikkelen door [de gratis MobileTogether Designer te downloaden](https://www.altova.com/nl/download/mobiletogether.html). Deze software wordt geleverd met ingebouwde hulp, tutorials en veel voorbeeld-apps, waaronder een app voor pakketbezorging. De oplossingen die in dit artikel worden beschreven, kunnen worden gedownload via [https://github.com/altova/MobileTogether-TTS](https://github.com/altova/MobileTogether-TTS) Open het .mtd-bestand in de MobileTogether Designer om te bekijken hoe het is opgebouwd en voer het vervolgens uit in de MobileTogether Simulator. Verbind met de app-store van uw apparaat en [download de MobileTogether mobiele app.](https://www.altova.com/nl/download/mobiletogether.html) Vervolgens kunt u verbinding maken met de MobileTogether demo-server om meer demo-apps te gebruiken. Nadat de MobileTogether mobiele app is geïnstalleerd, kunt u ook de tekst-naar-spraak functionaliteit voor mobiele apps op uw eigen apparaat uitproberen door de MobileTogether Designer als server te gebruiken.