[Tree Details - Design] Tree Species Pronunciation Tool

[ri0nardo]

Quick summary:

Incorporate a pronunciation tool next to the name, species, and type of tree. Add a voice / volume type icon to represent that the audio is being active. Alot of trees have scientific names that can be difficult to read or even say at times due to to length or how the name is formed.

Issues:

We currently do not have a tool related to this issue. Having a way to modify the name to accurately depict the scientific name will be a challenge to figure out. Having the community be involved with potentially reading and uploading the pronunciation could be a way for accurate naming.

Get Started:

Get started with our onboarding, https://github.com/waterthetrees/waterthetrees/wiki/Onboarding and read through the epic for relevant details of this ticket. #433
See the Information Architecture to understand how this works. #553

Resources:

• Epic discussion [Epic - Tree Details Redesign] Tree Details Container Redesign / Additions Project #433
• Design Figma: https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1355%3A9085

Extras

Potentially look into how we can modify the name so it can pronounce it correctly. Use a phonetic pronunciation tool potentially.

Example of the Tool

Location on Redesign

[ri0nardo]

@zoobot is this a realistic feature that could be added to the tree details container? I am not sure what would be needed for the backend or how this would work for a developer if they wanted to tackle this.

[zoobot]

We could potentially tie into some kind of google translate or find a scientific translator api somewhere. might be costly but maybe can request non-profit discount?
Alternately, we could store the audio but audio files are large so could get expensive. We could also try to store the audio in some 3rd party audio location like youtube or tiktok or something.

1st round of development could be just researching how to do it without having to store the audio ourselves.

[arc6789]

There is already a web speech api available to us https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis with a speak method that translates text to speech. I am not sure of the limitations but might be worth checking out

@ri0nardo @zoobot

[zoobot]

I've used this in a project: https://developer.chrome.com/blog/voice-driven-web-apps-introduction-to-the-web-speech-api/
It worked well.

We could tie that into the youtube api and either store temporary files or stream and save? I haven't played with the youtube api in years so not sure its capability at this point.