Uncaught DOMException: Failed to set the 'duration' property on 'MediaSource'

[waymorphood]

I am using SpeechSynthesizer for TTS

Intermittently the voice does not emit audio and I see this in the console.log:

SpeakerAudioDestination.js?38ca:132 Uncaught DOMException: Failed to set the 'duration' property on 'MediaSource': The 'updating' attribute is true on one or more of this MediaSource's SourceBuffers.
at privMediaSource.onsourceopen (webpack-internal:///./node_modules/microsoft-cognitiveservices-speech-sdk/distrib/es2015/src/sdk/Audio/SpeakerAudioDestination.js:138:51)

Once this happens, every subsequent call to synthesize (speatkTextAsync) generates same error.

[waymorphood]

I've narrowed this down. Our application uses SpeechToText (startContinuousRecognitionAsync) and then performs Text To Speech (speakTextAsync), both using cognitiveservices SDK. The above error only happens when we use STT and TTS

[KenjiPcx]

I was experiencing the same thing, I was adding tts to a Next.js app and this happened because my AudioConfig initialization was outside my "synthesizeSpeech" function/component. It works fine when I moved all the logic into the function.

If your situation is the same as mine, try moving all your tts logic into one function like this

const synthesize = () => {
    if (!inputBox.current) return;

    const audioConfig = AudioConfig.fromDefaultSpeakerOutput();
    const speechSynthesizer = new SpeechSynthesizer(speechConfig, audioConfig);
    speechSynthesizer.speakTextAsync(
      inputBox.current.value,          // the value from my input box
      (result) => {
        if (result) {
          speechSynthesizer.close();
          return result.audioData;
        }
      },
      (error) => {
        console.log(error);
        speechSynthesizer.close();
      }
    );
  };