leaonline / easy-speech Goto Github PK
View Code? Open in Web Editor NEW🔊 Cross browser Speech Synthesis also known as Text to speech or TTS; no dependencies; uses Web Speech API
Home Page: https://leaonline.github.io/easy-speech/
🔊 Cross browser Speech Synthesis also known as Text to speech or TTS; no dependencies; uses Web Speech API
Home Page: https://leaonline.github.io/easy-speech/
Something we've noticed while testing EasySpeech is that playback with same content on M1 mac plays back at a faster rate than the same exact test on other laptops (given the exact same TTS settings). Anyone else seen this?
I recognized that (even in your demo), that the Google Voices (e.g. Google UK English Male) can't read very long text.
When I truncate my text to 4053 charactes it works. With 4054 it doesn't.
Here's the text: (4054 characters long. To make it work, just remove one character)
How forward-thinking marketing leaders are setting the course for growth 600+ senior marketers shared their take on the state of marketing today. We’ve distilled their insights here. Deep dive into emerging trends shaping the market and consumer behavior, and the strategies set to leverage them for growth. Uncover how AI and machine learning can play into marketing, the importance of prescriptive analytics and data-driven decision-making, how consumers’ drive towards sustainability interacts with brand purpose, and when to prioritize long-term vs short-term investments. Reasons to be cheerful: marketing’s emerging optimism in the face of adversity Macroeconomic and geopolitical risks continue to present a challenging scenario for businesses. But emerging technologies, diverse revenue streams and changes in consumer behavior all present opportunities for positive change. GfK’s new research shows that 78% of CMOs are optimistic about the future. And progressive, forward-thinking marketing leaders have every reason to be upbeat. Leading-edge technology is elevating the function’s customer-facing and back-office operations. Real-time insights and prescriptive data analytics are gaining traction. Investment in AI and related innovative technology is growing as use cases proliferate. And as ESG concerns move to the forefront of board discussions, CMOs have a chance to become champions of the consumer-critical sustainability agenda. Each holds importance in the boardroom and offers CMOs a platform to increase their strategic influence. Indeed, they have a unique opportunity to position themselves ever closer to the heart of their organization and instigate positive change. “I see a massive correlation among CMOs that embrace technology and those that are optimists,” says Gonzalo Garcia Villanueva, global CMO at NielsenIQ. “We’re also seeing companies better understand the need to strategically invest in their brand for long-term growth – and this extends to sustainability too. Purpose and the bottom-line are converging and this is a positive for marketers.” 78% of senior marketers say they are optimistic about the future Optimism across markets Certain sectors continue to prove their resilience despite ongoing economic uncertainty. The technology and durables market is representative of a new post-Covid, digital buying cycle, likewise the retail sector. Both are bouncing back as consumers look to make purchases postponed during the pandemic. “Consumers are making more time to evaluate what they spend their money on,” reports one senior marketing leader at L’Oréal. “This is an opportunity for ecommerce because it enables consumers to survey their spending. As a brand, we have a duty to ensure that they have all the information they need.” Market leaders have adjusted by investing in digital-first activations and campaigns. This strategy builds closer connections with consumers in the virtual arenas they increasingly inhabit. It also offers better customer experiences that deliver long-term value. These can be further optimized through data insights and generative AI that underpin greater personalization and automation. “Marketers are increasingly leading the charge towards data maturity, becoming ever more sophisticated in how data is used,” says Gonzalo Garcia Villanueva, global CMO at NielsenIQ. “Advanced data capabilities that help organizations make better decisions to prepare for whatever comes next will be a key marker of success in the future.” CMOs that can make the business case for adopting analytics and more innovative technology - and then make the most of it - will be in an enviable position. Those that can’t, will find themselves trapped in a cycle of reactive, short-term activity that erodes their margins and brand value over time. Advanced data capabilities that help organizations make better decisions to prepare for whatever comes next will be a key marker of success in the future. Most marketers show impressive confidence in their ability to justify marketing investment
Is this a known thing?
It there any variable I can check to get this max length?
First, cool project!
Second, after reading about it, I was expecting something like
EasySpeech.speak({ text: "Bonjour mon ami", language: "fr" })
to work out of the box, but it does not seem to be a feature.
Or am I missing something?
I was really attracted by this: "It will not only detect, which features are available but also loads an optimal default voice, based on a few heuristics" that I read here: https://dev.to/jankapunkt/cross-browser-speech-synthesis-the-hard-way-and-the-easy-way-353
[x] I have read the FAQ section and have checked
that none of it describe the issue I'm about to report.
Describe the bug
I played it and paused it. After leaving it for 10 seconds, when I again want to resume it, it didn't work / speak.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
It should again play even after waiting for 10-20 seconds or moving out to new tab after pausing and coming back to play it
Desktop (please complete the following information):
[x] I have read the FAQ section and have checked
that none of it describe the issue I'm about to report.
Describe the bug
Since the goal of this library is cross platform and cross browser speech synthesis, I was expecting it to work on mobile MS Edge as well. (All other tested browsers are just fine: mobile chrome, firefox, desktop chrome, firefox, edge)
However, even the demo sample does not (or no longer?) work with mobile Edge since no voices are found.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Working speech synthesis on mobile Edge.
This might very well also be a browser issue - maybe you have more insights on that?
Screenshots
n/A
Smartphone (please complete the following information):
Additional context
Yes, I read the FAQ.
Yes, I installed voices on Android system level.
Still, Edge does not resprect these settings.
I found at least one more reddit adressing the very same issue - it used to work in the past but is broken now:
https://www.reddit.com/r/edge/comments/1498gcn/any_idea_why_on_android_edge_the_voices_from/
MDN example is down as well:
https://mdn.github.io/web-speech-api/speak-easy-synthesis/
I really hope to get more insights here. Thanks in advance!
Interesting discovery with Safari, and possibly other browsers on ipad. Seems like if the speech is delayed after the user interaction (i.e. click) the speech won't work.
For example, if the first action is some audio from webaudio api, followed by speech, the speech won't play even if part of the same call stack.
Solution thanks to https://github.com/scp93ch seems to be to quickly play a volume=0 speech before the music or other audio, and this seems to "prime the pump" so later the speech will work. Maybe something to implement direct into your library but either way figured I'd let you know.
[x] I have read the FAQ section and have checked
that none of it describe the issue I'm about to report.
Describe the bug
I have a single button which will trigger play when we click it for first time, when we click it second time, it will pause it, when we click it third time, it will resume. When I double click this button, it still plays but doesn't stop again even after clicking the button again.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
It should stop playing
Desktop (please complete the following information):
Describe the bug
Voice codes changed. My language mapping is no longer working. It's not really an issue as I can edit my mapping, but if this keeps changing, then it might be an issue in the future.
To Reproduce
...
Expected behavior
...
Screenshots
This is my language mapping before.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
not sure why the codes would change as it's standardized by Web Speech API, doesn't it?
this is the correct mapping as of today.
The voice has been updated so this is no longer an issue. Just wondering how the voices code mapping changed. Was this changed on teh Web API side or from this library?
I want to add this library as a script tag on the html, I don't use npm. How can I do it? Something like
<script src="./easy-speech.min.js"></script>
Thanks!
After installing and importing the package, I get:
There are types at '.../node_modules/easy-speech/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'easy-speech' library may need to update its package.json or typings.
I'm not entirely sure, but I think changing the exports
field to this should work:
"exports": {
".": {
"import": {
"types": "./dist/index.d.ts",
"default": "./dist/EasySpeech.js"
}
}
},
When brave shields are up, the list of voices is never seen.
Nonetheless, an utterance can speak.
.speak may need some option like "do it anyway!" even when the voices array is empty.
At first, this is not an EasySpeech-specific issue. I have the same issue even when I use "window.speechSynthesis.getVoices()" directly.
On the same PC, same Edge browser, when different users get the voices list, one gets 326 while another gets 48. The 48 is part of 326.
It puzzled me. For some reason, some online voices seem only available to some users. But I still couldn't figure out the reason. Of course, I have no solution yet.
Any ideas?
Currently on FF100 64bit Ubuntu the onvoiceschanged
event never gets dispatched. In such case we need to add a configurable timeout that should allow to continue the execution / cancellation of loading.
[x] I have read the FAQ section and have checked
that none of it describe the issue I'm about to report.
Describe the bug
The boundary
event doesnt fire on Chrome whereas its working perfectly on Edge.
To Reproduce
EasySpeech.speak({
text: myText,
voice: myVoice,
pitch: 1,
rate: 1,
volume: 1,
// there are more events, see the API for supported events
boundary: event => {
console.log(event);
},
end: event => {
this.startIndex = null;
this.endIndex = null;
}
});
Expected behavior
It should work properly across the browers.
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
The end
event is messy in Safari.
Describe the solution you'd like
By adding window.
before the variable utterance
it works perfectly in Safari.
I worked on it in a fork, if you think it can be helpful, I will love to contribute.
[X] I have read the FAQ section and have checked
that none of it describe the issue I'm about to report.
Describe the bug
A clear and concise description of what the bug is.
On the initial load of the page in latest Chrome on Windows 10 (not mobile), all the google voices available load, but not the 3 microsoft voices. But if users refresh the page, the 3 microsoft voices appear.
Additional context
[Add any other context about the problem here]
(https://longislandcw.github.io/morsebrowser/easysp23/).
Click/expand More Settings accordion-> check expert settings, check voice, and then see the list in "choose speaker..." (note that all non-english google voices are hidden from the user).
Brave and Edge seem ok, ie the microsoft voices load without need to refresh.
I use TypeScript.
It would be nice to have the Type Declarations files (d.ts) to the project.
I'll open a PR with that.
Hello.
The speak method of the W3C SpeechSynthesis API is responsible for queuing a SpeechSynthesisUtterance for text-to-speech (TTS). Therefore, window.speechSynthesis.speak(utterance) allows new text to be played without interrupting the currently playing speech.
However, when the EasySpeech.speak method is called, the current speech stops and the new text is played.
It seems that EasySpeech.speak should operate in a way similar to window.speechSynthesis.speak, adding the new SpeechSynthesisUtterance to the queue without interrupting the currently playing speech.
Or, is there a way for EasySpeech.speak to not interrupt the currently playing speech?
The demo should include the option to list voices from all languages
Describe the bug
Any voices with "(natual)" fail to be used to speak
To Reproduce
Steps to reproduce the behavior:
In your online demo, try to pick up any voice with "(natual)", such as "Maisie". Then nothing is spoke out while other non-natual voices work.
I tested on Microsoft Edge v.121.
Expected behavior
All voices can be used.
Desktop (please complete the following information):
I tried to following
// Get the voices available
const voices = window.speechSynthesis.getVoices();
const textToSpeak = "This project was created, because it's always a struggle to get the synthesis part of Web Speech API running on most major browsers.";
// Create a new SpeechSynthesisUtterance object
const utterance = new SpeechSynthesisUtterance(textToSpeak);
// Find the voice that includes "Maise"
let maiseVoice = voices.find(voice => voice.name.includes("Maisie"));
if (maiseVoice === undefined)
maiseVoice=voices[0];
// Set the voice and other parameters
utterance.voice = maiseVoice; // Use the first voice available
utterance.pitch = 1;
utterance.rate = 1;
// Speak the text
window.speechSynthesis.speak(utterance);
in https://playcode.io/1699188. The voice works well.
So this must be a new bug for a few months ago every voice worked.
Close all chrome windows, and try to get voices, no voices will be loaded, onvoiceschanged
never dispatches
Refresh the page -> voices load, onvoiceschanged
will be dispatched.
EasySpeech should be available for multiple targets (umd, amd, esm etc.).
Is your feature request related to a problem? Please describe.
U'd like this library to be used with as many CDN services as possible
Describe the solution you'd like
Prepare to use with at least the following CDN providers:
This may include additional (non-breaking!) changes in the package.json
On top, the docs should extend the installation guide by the CDNs
Hi, this is a really, really, really great project. We use it now in LiaScript to generate the default TTS output for courses. I tested it on KaiOS, which seems to have a TTS-support, with the standard API and good voices (the demo from MDN works fine). However, easy-speech does not support this OS/Browser.
Maybe it would be possible to add another unknown - system, next to android, safari, etc. that allows to access the API, when the browser supports TTS and also offers some voices?
I know, why supporting edge-case feature-phones? But, they have a larger market share in India than IPhone ...
https://www.kaiostech.com/developers/
It would be great to add this support to easy-speech ...
Kind regards ...
I'm currently running Chrome version 105.0.5195.102 on mac OS, and the resumeInfinity fix causes certain strings to hold up the queue. Disabling the fix seems to allow it to run correctly, with both shorter and longer strings.
I'm not sure on the reason, besides the fact that a quick pause and resume seems to prevent any 'end' events from firing, preventing the next item in the queue from starting. It also seemed to be more of an issue with slightly longer strings - I assume resumeInfinity only gets called when processing a longer string?
Hi @jankapunkt thanks for your great work here in this project.
This issue i'm filling up here is more about speechSynthesis itself, not the EasySpeech library. Just would like to know if you or anyone have any clue on what can be done in this particular case.
Problem is that the following snippet works well on Desktop Chrome but not on Mobile Chrome (Android):
var to_speak = "The text we want browser to pronounce, long enough to be able to pause it.."
var utterance = new SpeechSynthesisUtterance(to_speak)
utterance.lang = 'en-US'
window.speechSynthesis.speak(utterance)
// Then pause and resume:
window.speechSynthesis.pause()
window.speechSynthesis.resume()
According to this comment: https://github.com/jankapunkt/easy-speech/blob/045f6aa4e4c0eea5cd2088e8c8c569968d0ef702/index.js#L797
..it looks like this is a known issue.
But even using window.speechSynthesis.cancel()
I could not workaround that.
I'm pretty convinced that being able to workaround that, it will be possible to invoke pause and resume using EasySpeech.pause()
AND EasySpeech.resume()
abstractions.
On the DEMO users can apply sliders to change rate, pitch and volume. It seems they don't work correctly.
Demo code is in the docs
folder.
Robots/crawlers seem to not support web speech api and thus may raise errors. We need a solution to get around this, either via code or via documentation. User-specific implementation is favoured before inernals.
We don't have a clear and understandable FAQ
We should have some FAQ.md
that is in the top-level of the repository. It should explain some important concepts and provide answers to common questions.
Most important it should clearly show what's OS-level (and thus not being influenced by this library), what's browser-specific and what can be influenced by this library.
Using the wiki, but that is problematic as it's not shipped with the NPM package, while the FAQ can be shipped and is offline-readable.
We should also link any issue that is related to this in the FAQ, no matter whether it's open or closed.
These are common issues that may arise but are locked on the OS-level so we can't do a thing about it.
Good practices to tackle them are
These are issues that are specific to the browser and may only be changed by the vendor
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.