How to save output to file and download

[TwinMist]

Hi, I am no coder, and wondering if someone could help me. using the synthesis.html https://github.com/Azure-Samples/cognitive-services-speech-sdk/blob/master/samples/js/browser/synthesis.html How can i save the output that is currently played though the speaker to also a file and also let to user to download the file saved. i would be very greatful for some help thanks

[glharper]

@TwinMist Thanks for using Speech SDK and writing up this issue. For browsers, there's not an easy way to do direct file writing because of the security separation between the browser and the client file system. I would suggest an approach along these lines, but how you'd like to actually create a file and present it for download is up to you. Each audio sample from the callback is playable, so I can't tell you how to combine them all into one file. You can set the desired audio format using speechConfig.speechSynthesisOutputFormat = SpeechSDK.SpeechSynthesisOutputFormat.; (See here for all available formats)

const speechConfig = SpeechSDK.SpeechConfig.fromSubscription(subscriptionKey, serviceRegion);
// For audio voice output
speechConfig.setProperty(SpeechSDK.PropertyId.SpeechServiceConnection_TranslationVoice, "en-US");
const synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);
let buffers = new ArrayBuffer[];
synthesizer.synthesizing = (s, e) => {
 let newData = e.result.audioData;
 let audioSize = newData === undefined ? 0 : newData.byteLength;

 if (audioSize > 0) {
 // each newData is a playable audio sample, with appropriate headers (in the case of .wav and .ogg files) added.
 buffers.push(newData);
 }
};
synthesizer.speakTextAsync(
 "<YOUR_TEXT_HERE>",      
 function (result) {
  window.console.log(result);
  if (result.reason === SpeechSDK.ResultReason.SynthesizingAudioCompleted) {
   // do something here to collect ArrayBuffers in buffers and present to user as downloadable file
  } 
 },
 function (err) {
  window.console.log(err);
 });

[TwinMist]

OK bit lost, is there a way after the audio is played it then just prompts the user to download and save it? are you able to modify the code @ https://github.com/Azure-Samples/cognitive-services-speech-sdk/blob/master/samples/js/browser/synthesis.html in order to achieve this. thanks

[glharper]

@TwinMist Using the Speech SDK library, there is not a SDK method to prompt the user to download and save a synthesis result, no. You'll have to add code along the lines of this Stack Overflow answer.

[TwinMist]

would you be able to implement this into the code for me, iam using this for a project up unable to do it thanks in advance

[trrwilson]

@TwinMist please take a look at the PR from @yulin-li above -- this demonstrates a pattern for saving the output to a file. At a high level:

• Use a custom audio stream callback to buffer the chunks of audio as they become available
• Once synthesis is complete,
  • assemble the buffered chunks into a blob
  • use a hidden with a URL pointing to that blob to initiate a download

There are doubtlessly other approaches that will work well, too, but the gist will be the same -- it becomes the more general question of "how do you download dynamic data in a browser environment" with the dynamic data in this case being the sum total of the bytes of audio from the synthesis request.

Just want i wanted my thanks

[TwinMist]

when downloaded the voice is different to the one selected and played when you start synthesis is this possible to match? thanks sorted speechConfig.speechSynthesisVoiceName = voiceOptions.value; was missing from downloadButton.addEventListener function

[glharper]

@TwinMist Corrected the sample to include voice selection. Thanks again for using Speech SDK.