DEV Community

Discussion on: BeReadable - Online Multilingual Audio Transcription and Recorder

 
sandrarodgers profile image
SandraRodgers

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...

Thread Thread
 
sandrarodgers profile image
SandraRodgers

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);
    });
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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!

Thread Thread
 
moose_said profile image
Mostafa Said

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 :)

Thread Thread
 
moose_said profile image
Mostafa Said

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);
      };
    };
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
sandrarodgers profile image
SandraRodgers

Yep, looks like you just need to turn that response.body into a data format that can be passed on to Deepgram.

Thread Thread
 
moose_said profile image
Mostafa Said

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.

Thread Thread
 
sandrarodgers profile image
SandraRodgers

Awesome! I'm so glad it works.

Thread Thread
 
bekahhw profile image
BekahHW

Your project is so beautiful!

Thread Thread
 
moose_said profile image
Mostafa Said

Thank you! It's an honor to me that you like it 😊