BeReadable - Online Multilingual Audio Transcription and Recorder

Publish Date: Mar 20 '22

Overview of My Submission

Lets start this one with a question. Does my audio need a transcript? Short answer: yes. In the world of internet you're communicating with all kind of people around the world. They're not necessarily speaking your language or even able to hear you. Transcripts are used by people who are Deaf, are hard of hearing, have difficulty processing auditory information, so transcribing your audio or media in general will make it easy for them to understand you.

BeReadable is a simple online tool that helps the user to turn audio into words and it can also record the audio and the user can play it or download it to mp3. BeReadable supports a lot of languages as it sends the user's language selection to Deepgram API and return back the correct transcription for the selected language. The tool is a straight to the point kind of tool, it doesn't have any complexity in using and the UI is quite simple. It has two main features and both of them are incredibly important.

Table of Content
Built with
More about BeReadable
Submission Category
Link to Code on GitHub
Link to the tool live demo
Additional Resources

Built with:

More about BeReadable:

1- Live Transcription:

Audio Recording.
Audio to MP3 Downloader.

BeReadable is able to record your voice and use LameJS to encode it and transform it into mp3 file for you to download right from the audio player.

Multiple Language Support.
Audio Transcription.

2- Live Stream:

Audio Player.
Multiple Language Support.
Audio Transcription.

Basically with this light and small tool, you can record your audio, download it and get the transcription for it. Or you can insert a link for your favorite podcast and the tool will transcribe it to text right away. You can also play any audio and get your mic closer to the source and it will do the trick.

3- Possible Enhancement:

There are a lot of modifications that can be done or additional features that can be added. for example:

Output text editor.
UI improvements.
Database to store users final transcriptions.

Also possible user accessibility requirements features:

Video streaming with captions.
Songs subtitles.

Submission Category:

Accessibility Advocates.

Link to Code on GitHub::

MooseSaeed / be-readable

BeReadable is a simple online tool that helps the user to turn audio into words and it can also record the audio and the user can play it or download it to mp3.

Welcome to BeReadable 👋

BeReadable is a simple online tool that helps the user to turn audio into words and it can also record the audio and the user can play it or download it to mp3. BeReadable supports a lot of languages as it sends the user's language selection to Deepgram API and return back the correct transcription for the selected language. The tool is a straight to the point kind of tool, it doesn't have any complexity in using and the UI is quite simple. It has two main features and both of them are incredibly important.

🏠 Homepage

✨ Demo

Author

👤 Mostafa Said

Twitter: @Moose_Said
Github: @MooseSaeed
LinkedIn: @moosesaid

Built with:

Show your support

Give a ⭐️ if this project helped you!

📝 License

View on GitHub

Link to the tool live demo:

https://bereadable.netlify.app/

Additional Resources / Info:

Small demo to show you how it works:

Thanks for checking this out and feel free to add more features and functionalities to the repo and I will look into them and get back to you as soon as possible. Please let me know what you think 😍

Comments 25 total

Pratik sharmaMar 21, 2022
Nice work Mostafa !!
- Mostafa SaidMar 21, 2022
  Thank you Pratik! :)
SVGatorMar 21, 2022
Interesting concept. Best of luck!
- Mostafa SaidMar 21, 2022
  Thanks 🙏
BekahHWMar 22, 2022
This looks great! I can't get the livestream option to work though. It plays, but doesn't transcribe.
- Mostafa SaidMar 22, 2022
  It was working last time I tested it 😅 It should work only if the sound comes from external speakers and the mic is close to it. I tried to find a way to send the livestream itself over to Deepgram and receive the transcription but figured it's not possible.
  - BekahHWMar 22, 2022
    ahhh. ok. I had headphones plugged in. Have you checked out our "getting started with streaming docs"? This part of the docs might help too.
    - Mostafa SaidMar 22, 2022
      Yes I tried to follow this one but I can't use SDKs in Vuejs that's why my only option was to use WebSocket to transfer the user media to Deepgram but it can't pass the live stream itself unfortunately. Thanks for helping 🙏🙏
      - SandraMartinMar 23, 2022
        Hi Mostafa!
        
        We were chatting about this earlier today and it was suggested that it would be preferable for your livestream to fetch the stream data using the stream url, rather than record the stream with the microphone.
        
        There's an example on the docs of fetching this BBC livestream. Look at the node.js example on the docs here:
        
        developers.deepgram.com/documentat....
        
        The node code for fetch is:
        
        fetch(url).then(r => r.body).then(res => { res.on('readable', () => { if(deepgramLive.getReadyState() == 1) { deepgramLive.send(res.read()) } }) })
        
        However, since you are doing the transcription on the frontend, you could use the fetch API.
        
        I have an example codepen of a basic fetch request here: codepen.io/sandrarodgers/pen/VwzrZPe
        
        You've probably used fetch before, but just wanted to provide an example. I think you should try fetching the livestream directly and sending that to Deepgram to transcribe. That's my suggestion!
        
        Your project is awesome by the way! It looks so great!
        
        Mostafa SaidMar 23, 2022
        Omg! This is exactly what I was looking for. I'm glad to hear that it can work from the frontend side with fetch, I will work on this as soon as I get home and maybe update the UI and release a modified version of it. Thank you so much 🙏😊
        
        SandraMartinMar 23, 2022
        You're welcome!
        
        Mostafa SaidMar 29, 2022
        @sandrarodgers I'm stuck :D Fetch can't send my stream data to Deepgram from front end. I've been told it's not possible to send the stream itself from the front end that's why I gave up on this option in the first place (stackoverflow.com/questions/714894... )
        I found something I'm trying to use but I believe this will be a different way to do it. I will fetch the stream and play it in my browser and send audio to Deepgram from my browser after converting it ( gist.github.com/revolunet/e620e2c5... )
        
        SandraMartinMar 29, 2022
        You mean a stream like the hosted BBC stream, right? Or do you mean your stream that is being captured by the browser microphone?
        
        Let me know which one, and I'll try to send you some code examples.
        
        Mostafa SaidMar 29, 2022
        Yes stream like the hosted BBC.
        The one captured by browser microphone is working fine in my project as you can see in live transcription section but the live stream section I want it to send the live stream link like the one hosted by BBC to deepgram and receive transcription.
        
        SandraMartinMar 29, 2022
        Yes, it is trickier than I first said. I was able to do it though.
        
        Here is an example. You need to change the API key to your key. And you might need to refresh a couple times. Open the console and make sure there isn't an error. But you should see the text transcript show up on the screen.
        
        stackblitz.com/edit/web-platform-v...
        
        SandraMartinMar 29, 2022
        This example takes the BBC url, fetches the data that comes back as a ReadableStream (the response body), and converts that to data to send to Deepgram:
        
        const url = 'https://stream.live.vc.bbcmedia.co.uk/bbc_radio_fourlw_online_nonuk'; fetch(url) .then((response) => response.body) .then((body) => { // use method to parse audio data readAllChunks(body); });
        
        The function readAllChunks takes the response (which is a ReadableStream) and uses the getReader() to convert it into audio data that can be sent to Deepgram. So instead of using response.json() like in my basic fetch example, it uses response.getReader() to deal with that data type.
        
        async function readAllChunks(readableStream) { const reader = readableStream.getReader(); const chunks = []; let done, value; while (!done) { ({ value, done } = await reader.read()); socket.send(value); if (done) { return chunks; } chunks.push(value); } }
        
        I was able to write this because I found this stack overflow question that helped me.
        
        Tell me if this works for you! Good luck!
        
        Mostafa SaidMar 29, 2022
        Awesome! I spent hours trying to do it I'm so glad that it's not impossible. Will work on it and let you know of the updates.
        
        Thank you so much for helping :)
        
        Mostafa SaidMar 29, 2022
        Below is the final VueJS method that I tried this morning. Will delete it and start over with your code and I hope it will work for me.
        
        Thanks again :)
        
        const sendStream = () => { console.log("starting"); const url = "http://stream.live.vc.bbcmedia.co.uk/bbc_radio_fourlw_online_nonuk"; const language = document.querySelector("select").value; const socket = new WebSocket( "wss://api.deepgram.com/v1/listen?language=" + language, ["token", process.env.VUE_APP_DEEPGRAM_KEY] ); socket.onopen = () => { console.log("socket opened"); fetch(url) .then((response) => response.body) .then((data) => { socket.send(data.getReader()); }); }; socket.onmessage = (message) => { const received = JSON.parse(message.data); const transcript = received.channel.alternatives[0].transcript; console.log(transcript); }; };
        
        SandraMartinMar 29, 2022
        Yep, looks like you just need to turn that response.body into a data format that can be passed on to Deepgram.
        
        Mostafa SaidMar 30, 2022
        It works just fine :) bereadable.netlify.app/livestream
        
        Thank you so much Sandra this is really awesome and huge improvement to the functionality of the tool.
        
        SandraMartinMar 30, 2022
        Awesome! I'm so glad it works.
        
        BekahHWMar 31, 2022
        Your project is so beautiful!
        
        Mostafa SaidMar 31, 2022
        Thank you! It's an honor to me that you like it 😊
Gajanan PatilApr 2, 2022
Your all submissions are great !
- Mostafa SaidApr 2, 2022
  Thank you so much :) I'm so glad you like them.

Add comment

Mostafa Said @moose_said

BeReadable - Online Multilingual Audio Transcription and Recorder

Overview of My Submission

Built with:

More about BeReadable:

1- Live Transcription:

2- Live Stream:

3- Possible Enhancement:

Submission Category:

Link to Code on GitHub::

MooseSaeed / be-readable

BeReadable is a simple online tool that helps the user to turn audio into words and it can also record the audio and the user can play it or download it to mp3.

Welcome to BeReadable 👋

🏠 Homepage

✨ Demo

Author

Built with:

Show your support

📝 License

Link to the tool live demo:

Additional Resources / Info:

Comments 25 total