iwgx / morsible

:loudspeaker: Fast and reliable morse translator

Morsible

Translator for text <-> morse with speech functionality. Have optimized performance, PWA support, and accessibility friendly.

Built for the sake of IF4081 - Informatika untuk Komunitas lectures, also to explore new tech stack and things about audio management in React Preact.

Tech stack:

• React Preact + Typescript with Next.js
• twin.macro with emotion and Tailwind CSS for styling
• @testing-library/react and Jest for testing
• Splitbee for analytics
• Vercel for deployment

Usage

1. Clone this repo
2. Get Google API Key from Google Cloud Console and enable Text-to-speech & Speech-to-text, then create .env file with variables

NEXT_PUBLIC_GOOGLE_API_KEY=xxxxxxxxxx

3. Install package, npm install
4. Run, npm run dev

morsible's Issues

Fix jsdom in Jest@27

When we update Jest and it's related package to version 27.x.x, we will get error when run npm run test

Notice user if no speech detected

It's a bit hard for now since the library used is not supported it yet

Fix rapid play morse button issue

It will product too many parallel noise, meanwhile it should just play one instead.

We are using loop here instead combine the audio instead, so I don't find how to break the loop from outside yet

Add blink when morse play

So "light" and then "dark"

Fix error in SpeechRecorder test

Because of library used there

Fix can't be dragged to Microsoft 10 Tiles

Looks like it's because this commit d99bb10

But, it just can't in localhost and semar.iwgx.io. Other than that, with using Vercel generated random url for each commit it's still possible.

Using webpack5

Currently still there is error, if just using this:

module.exports = {
  future: {
    webpack5: true,
  },
}

Should investigate further

Reference: https://nextjs.org/docs/messages/webpack5

Add License

Add link sharing functionality

There is commented code in pages/index.tsx, now need to add button with link icon that when clicked should copy the url