Здравствуйте, мне дали задание добавить озвучку ко всем текстам на

всех страницах при ховере. Хотел спросит правильна ли я это сделал и будет ли это влиять на производительность?

Через querySelectorAll получаю весь текст с атрибутом t-speech и даю всем event listener "mouseenter" при ховере беру текст и с помощью speechSynthesis озвучиваю их. Все это находится в _app.tsx

Вот код:
const textToSpeech = (msg: string, locale: string) => {
let speech = new SpeechSynthesisUtterance();

speech.lang = locale;
speech.text = msg;
speech.volume = 1;
speech.rate = 1;
speech.pitch = 1;

window.speechSynthesis.speak(speech);
};

const cancelToSpeech = () => {
window.speechSynthesis.cancel();
};

const App = ({ Component, pageProps }: AppProps) => {
const router = useRouter();
const locale = router.query.locale;

const onMouseEnter = (item: Element) => {
textToSpeech(item.textContent ?? "", locale?.toString() ?? "ru");
};

useEffect(() => {
const speechTextList = document.querySelectorAll("[t-speech=true]");

speechTextList.forEach((item) => {
item.addEventListener("mouseenter", () => onMouseEnter(item));
item.addEventListener("mouseleave", cancelToSpeech);
});

return () => {
speechTextList.forEach((item) => {
item.removeEventListener("mouseenter", () => onMouseEnter(item));
item.removeEventListener("mouseleave", cancelToSpeech);
});
};
}, [router.asPath]);

removeEventListener не делает абсолютно ничего

могу сказать как ускорить процесс удаления

убрать?

исправить

у тебя не срабатывают они

как можно проверить?

Здравствуйте! Ваш подход к реализации функции озвучки текста при наведении мыши кажется довольно прямолинейным и понятным. Вы создали функцию textToSpeech, которая инициирует произнесение текста, и cancelToSpeech, которая прекращает произношение. После этого вы используете эти функции в обработчиках событий mouseenter и mouseleave для элементов, которые поддерживают озвучку. Однако, есть несколько моментов, которые стоит учесть: 1. Перформанс: Ваш текущий подход может влиять на производительность, особенно если на странице много элементов, к которым привязаны обработчики событий. Каждый обработчик создаёт дополнительную нагрузку. Если элементов много, это может привести к замедлению работы страницы, особенно на устройствах с ограниченными ресурсами. 2. Утечки памяти: Важно правильно очищать обработчики событий при размонтировании компонента, чтобы избежать утечек памяти. В вашем случае вы используете анонимные функции в addEventListener и removeEventListener, что делает их фактически разными функциями. Вместо этого нужно использовать именованные функции или сохранить ссылку на анонимную функцию. 3. Доступность: Не забывайте о доступности, так как не все пользователи могут захотеть или смогут воспользоваться озвучкой. Хорошей практикой будет предоставить возможность отключить эту функцию. 4. Оптимизация: Подумайте об оптимизации добавления и удаления обработчиков событий. Например, можно использовать делегирование событий, чтобы уменьшить общее количество обработчиков. 5. Проверка поддержки: Убедитесь, что API речевого синтеза поддерживается во всех целевых браузерах. 6. Обработка ошибок: Логика обработки ошибок может быть полезна для уведомления пользователя, если что-то пошло не так с функцией озвучки. 7. Частота вызовов: Если пользователь быстро наводит мышь на разные элементы, это может вызывать множество вызовов speechSynthesis.speak(). Можно рассмотреть оптимизацию этого аспекта, например, добавив задержку перед началом озвучивания. В целом, важно тестировать такие функции на разных устройствах и в разных условиях для обеспечения стабильной работы и хорошего пользовательского опыта.

кину тогда вариант с сигналом чтоб точно увидели его преимущества const textToSpeech = (msg: string, locale: string) => { let speech = new SpeechSynthesisUtterance(); speech.lang = locale; speech.text = msg; speech.volume = 1; speech.rate = 1; speech.pitch = 1; window.speechSynthesis.speak(speech); }; const cancelToSpeech = () => { window.speechSynthesis.cancel(); }; const App = ({ Component, pageProps }: AppProps) => { const router = useRouter(); const locale = router.query.locale; const onMouseEnter = (item: Element) => { textToSpeech(item.textContent ?? "", locale?.toString() ?? "ru"); }; useEffect(() => { const controller = new AbortController(); const signal = controller.signal; const speechTextList = document.querySelectorAll("[t-speech=true]"); speechTextList.forEach((item) => { item.addEventListener("mouseenter", () => onMouseEnter(item), { signal }); item.addEventListener("mouseleave", cancelToSpeech, { signal }); }); return () => { controller.abort(); }; }, [router.asPath]);

А разве new в эффекте это не плохо?

спасибо за ответ на счет доступности я еще думаю как его сделать пока решение не нашел но это обязательно будет

с чего бы?

понял спасибо