More complete OOG encode example

[designkl]

trafficstars

This polyfill has been extremely helpful but I'm looking to use OOG-Opus for encoding. Do you have a more detailed working example of using oog for encoding?

[ai]

Sorry, I didn’t use it and can help here

[Lucasnobrepro]

I recently have used like this:

import AudioRecorder from 'audio-recorder-polyfill'
import mpegEncoder from 'audio-recorder-polyfill/mpeg-encoder'

AudioRecorder.encoder = mpegEncoder
AudioRecorder.prototype.mimeType = 'audio/mpeg'

window.MediaRecorder = AudioRecorder

var record = false;
let mediaRecorder;

const onStart =({sendMessageStomp,setMessages,messages, topic})=>{  
    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
      var chunks = []
      mediaRecorder = new MediaRecorder(stream)

      //Get data
      mediaRecorder.addEventListener('dataavailable', e => {
        console.log("Record audio!!")
          
        chunks.push(e.data)
        
      })
      
      mediaRecorder.addEventListener('stop',e => {
        console.log("Stop recoding!!")

        //const blob = new Blob(chunks, {type:"audio/ogg; code=opus"})
        const blobMP3 = new Blob(chunks, {type:"audio/mpeg; code=opus"})

        const reader = new window.FileReader()
        reader.readAsDataURL(blobMP3); 

        reader.onloadend = () => {
          console.log('audio tipo: ', reader.result)

          const msgSender = {sender:'user',type:'audio',msg:reader.result}
          //const msgSenderMP3 = {sender:'user',type:'audio',msg:e.data }
          setMessages(messages => [ ...messages,  msgSender])     
          sendMessageStomp(msgSender, "/app/msgCPF/" + topic,"audio")
        }

      })

      mediaRecorder.start()
      record= true;
    })
}

//Function to STOP  
const onStop = () => {
    mediaRecorder.stop();
    mediaRecorder.stream.getTracks().forEach((i) => i.stop());
    mediaRecorder = false;
    record = false;   
};

//Action capture audio, Start and Stop;
const getSendAudio = (e,isState, setIsSate, sendMessageStomp,setMessages,messages, topic) =>{
  e.preventDefault()
  setIsSate(!isState)

  if(record === true){
    console.log('Call to STOP')
    onStop();
  }else{
    console.log('Call to START')
    onStart({sendMessageStomp,setMessages,messages, topic})
  }
}

export default getSendAudio;
export {
  onStart,
  onStop,
  record,
  mediaRecorder,
}

[designkl]

Hi @Lucasnobrepro,

That's really similar to what I ended up using. Initially I was trying to use the OOG encoder, but the mp3 encoder worked out fine for what I was doing.

`import AudioRecorder from 'audio-recorder-polyfill'; import mpegEncoder from 'audio-recorder-polyfill/mpeg-encoder' AudioRecorder.encoder = mpegEncoder; AudioRecorder.prototype.mimeType = 'audio/mpeg';

// Speech To Text export const recordResponse = async () =>{ console.log('Recording for a response!');

navigator.mediaDevices.getUserMedia({ audio: { sampleSize: 16, channelCount: 1, sampleRate: 16000} }).then(stream => {
    var options = {
        audioBitsPerSecond : 16000,
    }
    state.mediaRecorder = new AudioRecorder(stream, options)
     
    const audioChunks = [];
    state.mediaRecorder.addEventListener("dataavailable", event => {
        audioChunks.push(event.data);
    });        

    // Start recording
    state.mediaRecorder.start();

    state.mediaRecorder.addEventListener("stop", () => {
        state.mediaRecorder.stream.getTracks().forEach(i => i.stop());
        const audioBlob = new Blob(audioChunks, {type: 'audio/mpeg'});
        let audioUrl;
        try {
            audioUrl = webkitURL.createObjectURL(audioBlob);
        }
        catch(err) {
            audioUrl = URL.createObjectURL(audioBlob);
        }

        //
        let track = state.mediaRecorder.stream.getAudioTracks();

        var reader = new FileReader();
        reader.readAsDataURL(audioBlob); 
        reader.onloadend = function() {
            //Trim the Base64 extra text 
            var base64data = reader.result;
            var ret = base64data.replace('data:audio/mpeg;base64,','');
            postAudio(ret, track[0].getSettings());
        };
    });
  });

}; `

The Base64 is for Google Speech to Text encoding.

[scarroll32]

@designkl I'm also recording to send to Google Speech to Text. Are you using the beta version of the API, as I thought MP3 was not GA yet?

How is the quality with MP3?

[scarroll32]

@ai great library thank you for building it. I noticed in the docs there is an Ogg example. Are there any plans to support it in the future?

[ai]

Next Safari do not need this polyfil, so I do not have any plans for the project development

[designkl]

@designkl I'm also recording to send to Google Speech to Text. Are you using the beta version of the API, as I thought MP3 was not GA yet?

How is the quality with MP3?

I did use the beta version of the STT API. I really didn't do any side by side comparisons with regards to compressed (mp3) vs. uncompressed (PCM WAV), but from the feedback I've gotten from people who have used other STT APIs, even with the compressed mp3, it's considerably more accurate than the others. And that's without even touching the config file to start adding in custom verbiage. So as much as I wanted to try the Ogg, I just gave up as the mp3 encoding seemed good enough.