diff --git a/src/components/Player/PlayerControls.tsx b/src/components/Player/PlayerControls.tsx
index 46e70b2..25d32c5 100644
--- a/src/components/Player/PlayerControls.tsx
+++ b/src/components/Player/PlayerControls.tsx
@@ -113,6 +113,10 @@ export default function PlayerControls() {
// Ref value is used to determine, what to do next
function speechCompleteCallback() {
console.log("Speech has ended")
+ // Pause using ref value does not work on Safari. The ref value updated by ref setting function, is not reflected in this callback. Just call setPlayerState("paused") in the respective function please.
+ if (speechEndReasonRef.current === "pause") {
+ setPlayerState("paused")
+ }
if (speechEndReasonRef.current === "forward") {
setSpeakingSentenceIndex((speakingSentenceIndex + 1))
}
@@ -151,6 +155,8 @@ export default function PlayerControls() {
function blurCallback() {
speechSynthesis.cancel()
speechEndReasonRef.current = "pause"
+ // For Safari
+ setPlayerState("paused")
}
// Keyboard press callback
@@ -187,6 +193,7 @@ export default function PlayerControls() {
if (playerState === "playing") {
speechSynthesis.cancel()
speechEndReasonRef.current = "pause"
+ // For Safari
setPlayerState("paused")
}
if (playerState === "paused") {
diff --git a/src/components/Player/VoicesDropdown.tsx b/src/components/Player/VoicesDropdown.tsx
index f1d933b..bfc8776 100644
--- a/src/components/Player/VoicesDropdown.tsx
+++ b/src/components/Player/VoicesDropdown.tsx
@@ -66,7 +66,7 @@ export function VoicesDropdown() {
className="flex items-center justify-between"
onClick={() => handleOptionClick(data)}
>
- {data.name}
+ {data.name} ({data.langWithLocale})
{!data.localService &&
NATURAL
}
diff --git a/src/helpers/setUpWebSpeech/useChooseBestVoice.ts b/src/helpers/setUpWebSpeech/useChooseBestVoice.ts
index dbac35e..5ebc547 100644
--- a/src/helpers/setUpWebSpeech/useChooseBestVoice.ts
+++ b/src/helpers/setUpWebSpeech/useChooseBestVoice.ts
@@ -20,7 +20,7 @@ export function useChooseBestVoice() {
let defaultVoices: Voice[] = []
const voicesOfAutoDetectedLanguage: Voice[] = []
- // Loop through voices on the device
+ // Loop through populated voices
for (const voice of voices) {
// Pick up all voices of auto detected language
if (voice.lang === languageCodeOfArticleToSpeak)
@@ -74,6 +74,7 @@ export function useChooseBestVoice() {
setVoiceToSpeakWith({
default: false,
lang: "en",
+ langWithLocale: "en-US",
localService: true,
name: "Default voice",
value: "default-voice"
diff --git a/src/helpers/setUpWebSpeech/usePopulateVoices.ts b/src/helpers/setUpWebSpeech/usePopulateVoices.ts
index aa6fdb9..9a2e2cc 100644
--- a/src/helpers/setUpWebSpeech/usePopulateVoices.ts
+++ b/src/helpers/setUpWebSpeech/usePopulateVoices.ts
@@ -41,6 +41,7 @@ export function usePopulateVoices() {
default: rawVoice.default,
// Get first two characters for two character language code. Some devices have three character language code before "-" or "_", so taking first two letters is more reliable. Default to English for type safety later on (to circle back).
lang: rawVoice.lang.slice(0, 2) ? rawVoice.lang.slice(0, 2) : `en`,
+ langWithLocale: rawVoice.lang,
localService: rawVoice.localService,
name: rawVoice.name,
value: rawVoice.voiceURI,
diff --git a/src/stores/usePlayerStore.ts b/src/stores/usePlayerStore.ts
index ad8c669..27a6899 100644
--- a/src/stores/usePlayerStore.ts
+++ b/src/stores/usePlayerStore.ts
@@ -4,6 +4,7 @@ export type Item = "rate" | "pitch" | "bgMusicVol"
export type Voice = {
default: boolean,
lang: string,
+ langWithLocale: string,
localService: boolean,
name: string,
value: string,
@@ -45,6 +46,7 @@ export const usePlayerStore = create(
voiceToSpeakWith: {
default: false,
lang: "en",
+ langWithLocale: "en-US",
localService: true,
name: "Default voice",
value: "default-voice"