Hello I have a snipped of code, I generate some speech based on my element data-audio. Everything works fine, except on mobile phone where the language is “English” even though I set it in Spanish.
So I’ve done some research and found that maybe the language is not supported or the English language is set by default.
I would like to know if you have a solution for me please? I share with you my javascript code.
As you can see I put the default language in Spanish, but it still doesn’t work, so I might need your help. Thank you in advance!
const audioBlocks = document.querySelectorAll(".audio-trigger-button");
// Variable to hold the currently playing utterance
let currentUtterance = null;
let isPlaying = false;
// Function to hide all play buttons
function hideAllPlayButtons() {
audioBlocks.forEach((audioBlock) => {
const listenIcon = audioBlock.querySelector(".audio-icon-listen");
const pauseIcon = audioBlock.querySelector(".audio-icon-pause");
if (listenIcon) {
listenIcon.classList.remove("hidden"); // Show listen icon
}
if (pauseIcon) {
pauseIcon.classList.add("hidden"); // Hide pause icon
}
});
}
// Function to check available voices
function checkAvailableVoices() {
const voices = window.speechSynthesis.getVoices();
voices.forEach((voice) => {
console.log(`${voice.name} - ${voice.lang}`);
});
}
// Call this function when the voices are loaded
speechSynthesis.onvoiceschanged = checkAvailableVoices;
// Add click event listener to each audio block
audioBlocks.forEach((audioBlock) => {
audioBlock.addEventListener("click", function () {
// Get the audio text from the data attribute
const audioText = this.getAttribute("data-audio");
// Get the icons for play and pause
const listenIcon = this.querySelector(".audio-icon-listen");
const pauseIcon = this.querySelector(".audio-icon-pause");
// Hide all play buttons
hideAllPlayButtons();
// Check if the clicked audio block is already playing
if (currentUtterance && this === currentUtterance.audioBlock) {
// If the same button is clicked again, toggle between pause and play
if (isPlaying) {
window.speechSynthesis.pause();
isPlaying = false;
listenIcon.classList.remove("hidden"); // Show listen icon
pauseIcon.classList.add("hidden"); // Hide pause icon
} else {
window.speechSynthesis.resume(); // Resume speaking
isPlaying = true;
listenIcon.classList.add("hidden"); // Hide listen icon
pauseIcon.classList.remove("hidden"); // Show pause icon
}
return; // Exit the function to avoid creating a new utterance
}
// If there's an active utterance, cancel it
if (currentUtterance) {
window.speechSynthesis.cancel();
}
// Check for available voices
const voices = window.speechSynthesis.getVoices();
const spanishVoice = voices.find((voice) => voice.lang === "es-ES");
// Create a new SpeechSynthesisUtterance instance
currentUtterance = new SpeechSynthesisUtterance(audioText);
if (spanishVoice) {
currentUtterance.voice = spanishVoice; // Use the Spanish voice if available
}
currentUtterance.lang = "es-ES"; // Set the language for good measure
currentUtterance.audioBlock = this; // Store reference to the audio block
// Speak the text
window.speechSynthesis.speak(currentUtterance);
isPlaying = true;
listenIcon.classList.add("hidden"); // Hide listen icon
pauseIcon.classList.remove("hidden"); // Show pause icon
// Add event listener for when speech ends
currentUtterance.onend = function () {
isPlaying = false;
listenIcon.classList.remove("hidden"); // Show listen icon
pauseIcon.classList.add("hidden"); // Hide pause icon
currentUtterance = null; // Reset currentUtterance
};
// Add event listener for when speech is paused
currentUtterance.onpause = function () {
isPlaying = false;
listenIcon.classList.remove("hidden"); // Show listen icon
pauseIcon.classList.add("hidden"); // Hide pause icon
};
// Add event listener for when speech is resumed
currentUtterance.onresume = function () {
isPlaying = true;
listenIcon.classList.add("hidden"); // Hide listen icon
pauseIcon.classList.remove("hidden"); // Show pause icon
};
});
});
// Stop any audio when the page is reloaded
window.addEventListener("beforeunload", () => {
if (currentUtterance) {
window.speechSynthesis.cancel();
}
});