В свободное время изучаю китайский язык и делаю приложение для карточек. На Smashing Conference San Francisco несколько недель назад я встретил нескольких человек, делающих то же самое. Кажется, что приложения для флеш-карт - это новая версия приложения todo, которое инженеры любят делать, когда хотят изучить новые технологии.

«Создание собственных карточек и их персонализация значительно улучшат вашу способность запоминать новый материал и узнавать вещи, которые важны именно для вас».

Я разрабатываю свое приложение на основе идеи интервального повторения, и тот факт, что я делаю приложение и делаю карточки своими собственными, помогает мне изучать важные для меня вещи. Как разработчики, я считаю, что мы всегда должны стремиться сочетать наши нетехнические цели с нашими техническими целями. Магия - это место, где соединяются два интереса / страсти!

Я показываю цифровые карточки с упрощенными китайскими иероглифами и их соответствующими английскими переводами, а также Ханью пиньинь, чтобы помочь мне научиться их произносить, и, похоже, это помогает мне их запоминать. Однако я чувствовал, что голоса не хватает - мне нужен был способ услышать все слова, которые поддерживали бы слуховое обучение.

Как поддержать слуховое обучение с помощью Интернета

Я посмотрел, что делают другие - и большинство веб-сайтов / приложений используют MP3 или не используют их вообще. У веб-сайта Duolingo, например, звук есть в приложении, но не на сайте. Я стараюсь максимально уменьшить размер пакета приложения, за исключением данных - моя цель с этим приложением - чтобы оно работало в автономном режиме. Идея множества MP3 для всех возможных звуков немного беспокоила меня с точки зрения размера загрузки, а также необходимости поиска и источника записей!

Итак, я посмотрел на браузеры, которые, кажется, всегда думали об этих вещах до меня, и нашел API веб-речи.

Как и ожидалось, поддержка браузеров была довольно низкой. Поддержка Firefox и Chrome с добавлением небольшого количества Safari, и это было очень экспериментально. Я сторонник прогрессивного улучшения, так что это не было бы концом света, если бы мое приложение воспроизводило звук только в новых браузерах, так что я играл с ним.

Использовать его было довольно просто.

const word = '音乐';
// Feature detect
if (
  window.speechSynthesis &&
  typeof SpeechSynthesisUtterance !== undefined
) {
  const synth = window.speechSynthesis;
  // get all the voices available on your browser
  const voices = synth.getVoices();
  // find a voice that can speak chinese
  const voice = voices.
    filter((voice) => voice.lang.indexOf('zh') === 0)[0];
  // make the browser speak!
  const utterThis = new SpeechSynthesisUtterance(word);
  utterThis.voice = voice;
  synth.speak(utterThis);
}

Хотя это прекрасно работало в моем настольном браузере, когда я загрузил его на мобильный, я наткнулся на загвоздку - флеш-карточная игра не воспроизводила ни одного из тех прекрасных звуков, которые она воспроизводила на моем рабочем столе.

Устранение неполадок с отсутствующими голосами на Android

Я был уверен в своем обнаружении функций, поэтому был немного озадачен тем, что здесь происходило. Я копнул немного глубже и понял, что в моем мобильном браузере нет голоса, который мог бы говорить по-китайски. Я улучшил свой код:

// find a voice that can speak chinese
const voice = voices.
  filter((voice) => voice.lang.indexOf('zh') === 0)[0];
// make the browser speak if it can!
if ( voice ) {
  const utterThis = new SpeechSynthesisUtterance(word);
  utterThis.voice = voice;
  synth.speak(utterThis);
} else {
  const utterThis = new SpeechSynthesisUtterance(word);
  utterThis.voice = voices[0];
  synth.speak('I\'m afraid I cannot speak Mandarin yet.');
}

Я нашел эту полезную веб-страницу для определения голосов, доступных на устройстве:
https://mdn.github.io/web-speech-api/speak-easy-synthesis/

Согласно этой странице, на моем мобильном устройстве были установлены только английский и испанский языки. Обычно мой телефон не работает на китайском языке, и я не просматриваю китайские веб-сайты и не осознавал, что мне нужна эта поддержка до сих пор и для этого конкретного приложения, но мое приложение действительно хотело этого, и у него не было возможности сообщить об этом мне. кроме того, что он сломан.

Установка языковой поддержки

Установка китайского языка была обременительным процессом. Мне пришлось повозиться с настройками Android, добавить китайский язык и перезапустить браузер.

Хотя я или другой разработчик мог это сделать, это был не лучший опыт, если бы я хотел поделиться своим приложением с нетехнической аудиторией, у них не было бы простого способа сделать это, не отправляя им подробные инструкции. . Это меня огорчило.

Мне вспоминается кофемашина Nespresso в нашем офисе, у которой есть функциональные кнопки, которые становятся красными, когда возникает общая проблема, для расшифровки которой требуется руководство. Его интерфейс сбивает с толку всех, кто знает, что он сломан, но не знает, как это исправить.

Признаком полностью продуманного API является тот, который продумал каждый шаг процесса. Это экспериментальный API, так что это не было неожиданностью.

Представьте себе API, который мне понравится

Это меня немного раздражало. Возможности были, но не были приоритетными. Что мне действительно нужно, так это API, который позволил бы мне запрашивать язык и при необходимости заботиться об установке, аналогично тому, как я запрашиваю разрешение для пользователя использовать свое текущее местоположение или отправлять им push-уведомления.

Если бы у моего пользователя не был установлен китайский язык, этот сценарий мог бы предложить им добавить для него поддержку. Они могли сказать «да», и теперь они будут слышать сказанные им слова. Если они скажут «нет», я смогу сообщить им, что они упускают.

Я предполагаю, что это будет выглядеть так:

  window.speechSynthesis.getVoicesForLanguage('zh').then(()=> {
    speakMandarin();
  }, () => {
    notifyUserSoundIsDisabled();
  });

Выводы

API WebSpeech довольно интересен. Он обещает распознавание голоса и преобразование текста в речь, но, как и большинство экспериментальных API-интерфейсов, которые все еще находятся на пути к стандартам, у него есть некоторые области для улучшения.

Как и многое другое, созданное инженерами, я считаю, что это действительно нуждается в доработке, так это подключение разработчиков и конечных пользователей таким образом, чтобы мы могли создавать плавные и красивые впечатления.

Учитывая, что концепция API восходит к 2012 году и появилась в Chrome в 2014 году, я беспокоюсь, что ничего из этого не произойдет в ближайшее время, но похоже, что он может сыграть важную роль в Интернете и предоставить мощную открытую альтернативу нативным приложениям. когда это произойдет.

Надеюсь, мое приложение сможет использовать его, когда оно наконец появится.

дальнейшее чтение

Если вас интересует API, мне пригодились следующие ссылки: