guest271314 / speechsynthesisrecorder Goto Github PK
View Code? Open in Web Editor NEWGet audio output from window.speechSynthesis.speak() call as ArrayBuffer, AudioBuffer, Blob, MediaSource, MediaStream, ReadableStream, other object or data types
Get audio output from window.speechSynthesis.speak() call as ArrayBuffer, AudioBuffer, Blob, MediaSource, MediaStream, ReadableStream, other object or data types
Chromium does not support capture of monitor devices by default https://bugs.chromium.org/p/chromium/issues/detail?id=1114422.
Workarounds https://github.com/guest271314/captureSystemAudio.
@guest271314 I don't understand the JS code well.
Is there an easy way to save the output audio file without first playing and then recording?
Also, is there a python wrapper around this library that I could not find?
Steps to reproduce:
Operating System: Linux 4.8.0-54-lowlatency
Firefox version: 53.0.3 (32-bit)
Actual results:
The resulting Blob of recorded media is played at HTMLMediaElement contains reverb and input from system microphone. When the page is refreshed and permission is granted again for user media, error Uncaught (in promise) NavigatorUserMediaError {name: "TrackStartError", message: "", constraintName: ""}.
RecordStream option set to Monitor of Built-in Audio Analog Stereo set at OS connection is removed from OS Sound Settings GUI.
Refresh again repeating steps above results in Firefox closing.
If both Chromium and Firefox are tried using above settings, after Firefox closes Chromium receives error Uncaught (in promise) NavigatorUserMediaError {name: "TrackStartError", message: "", constraintName: ""}.
Expected results:
At Chromium 58 MediaRecorder records the output to speakers, without reverb or input from system microphone, and does not remove option from system Sound Setting or close browser.
When setting utteranceOptions.voice
to a "Natural" voice, the resulting audio contains only silence.
For example, these are the default voices that exist on an unconfigured installation of Microsoft Edge:
Microsoft David - English (United States) Microsoft Mark - English (United States) Microsoft Zira - English (United States) Microsoft Natasha Online (Natural) - English (Australia) Microsoft William Online (Natural) - English (Australia) Microsoft Clara Online (Natural) - English (Canada) Microsoft Liam Online (Natural) - English (Canada) Microsoft Sam Online (Natural) - English (Hongkong) Microsoft Yan Online (Natural) - English (Hongkong) Microsoft Neerja Online (Natural) - English (India) (Preview) Microsoft Neerja Online (Natural) - English (India) Microsoft Prabhat Online (Natural) - English (India) Microsoft Connor Online (Natural) - English (Ireland) Microsoft Emily Online (Natural) - English (Ireland) Microsoft Asilia Online (Natural) - English (Kenya) Microsoft Chilemba Online (Natural) - English (Kenya) Microsoft Mitchell Online (Natural) - English (New Zealand) Microsoft Molly Online (Natural) - English (New Zealand) Microsoft Abeo Online (Natural) - English (Nigeria) Microsoft Ezinne Online (Natural) - English (Nigeria) Microsoft James Online (Natural) - English (Philippines) Microsoft Rosa Online (Natural) - English (Philippines) Microsoft Luna Online (Natural) - English (Singapore) Microsoft Wayne Online (Natural) - English (Singapore) Microsoft Leah Online (Natural) - English (South Africa) Microsoft Luke Online (Natural) - English (South Africa) Microsoft Elimu Online (Natural) - English (Tanzania) Microsoft Imani Online (Natural) - English (Tanzania) Microsoft Libby Online (Natural) - English (United Kingdom) Microsoft Maisie Online (Natural) - English (United Kingdom) Microsoft Ryan Online (Natural) - English (United Kingdom) Microsoft Sonia Online (Natural) - English (United Kingdom) Microsoft Thomas Online (Natural) - English (United Kingdom) Microsoft Aria Online (Natural) - English (United States) Microsoft Ana Online (Natural) - English (United States) Microsoft Christopher Online (Natural) - English (United States) Microsoft Eric Online (Natural) - English (United States) Microsoft Guy Online (Natural) - English (United States) Microsoft Jenny Online (Natural) - English (United States) Microsoft Michelle Online (Natural) - English (United States) Microsoft Roger Online (Natural) - English (United States) Microsoft Steffan Online (Natural) - English (United States)
ย
The first 3 voices record as expected, but none of the subsequent "Natural" voices are captured.
Is there an additional step that must be taken in order for these voices to be captured?
error in Chrome 83.
SpeechSynthesisRecorder.js:45 Uncaught TypeError: Failed to set the 'volume' property on 'SpeechSynthesisUtterance': The provided float value is non-finite.
at Function.assign (<anonymous>)
at new SpeechSynthesisRecorder (SpeechSynthesisRecorder.js:45)
at <anonymous>:1:1
run code.
new SpeechSynthesisRecorder({
text: 'The revolution will not be televised',
utteranceOptions: {
voice: 'english-us espeak',
lang: 'en-US',
pitch: 0.75,
rate: 1,
},
})
.start()
.then((tts) => tts.blob())
.then(({ tts, data }) => {
// `data` : `Blob`
tts.audioNode.src = URL.createObjectURL(data);
tts.audioNode.title = tts.utterance.text;
tts.audioNode.onloadedmetadata = () => {
console.log(tts.audioNode.duration);
tts.audioNode.play();
};
});
Choppy playback of recorded media at Firefox.
I see that this does not work on latest version of chrome 71 because chrome 66 onwards, audiocontext() can be called only after user intervention, for example button click. I did that change by adding a button onclick, but then I was hit by DOMException in start method.
Since this was not working on latest chrome 71, I downgraded to chrome 60. I see that this program is recording from microphone instead from speechSynthesis.speak(). I feel the reason is because both audioinput and audiooutput have same deviceId="default". So how can I make it record from speak() ?
We do no need MediaStream
from navigator.mediaDevices.getUserMedia()
when MediaRecorder
stops recording or when SpeechSynthesisUtterance
ended
event has been dispatched.
Just wondering if there is an option of saving the recording to file system
.then(stream => navigator.mediaDevices.enumerateDevices()
.then(devices => {
const audiooutput = devices.find(device => device.kind == "audiooutput");
stream.getTracks().forEach(track => track.stop())
if (audiooutput) {
const constraints = {
deviceId: {
exact: audiooutput.deviceId
}
};
return navigator.mediaDevices.getUserMedia({
audio: constraints
});
}
return navigator.mediaDevices.getUserMedia({
audio: true
});
}))
does not actually select an audio output device https://bugs.chromium.org/p/chromium/issues/detail?id=1114422#c7.
Here you are adding an audio element to the DOM. IMO, an API like this should be less opinionated, in fact the whole audioNode
property could be dropped.
Why do we need to use navigator.mediaDevices.getUser()
and MediaRecorder()
to get audio output of window.speechSynthesis.speak()
?
.then(ab => this.audioContext.decodeAudioData(ab))
Uncaught (in promise) TypeError: Failed to execute 'decodeAudioData' on 'BaseAudioContext': parameter 1 is not of type 'ArrayBuffer'.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.