Java, UX, HTML, CSS, WEB-design

Улучшение UX имен с помощью Vocalizer.js


  • Атиф Азам

  • 0 Комментарии

Улучшение UX имен с помощью Vocalizer.js

  • 8 минут чтения

  • UX-дизайн, вдохновение, UX

Краткое резюме ↬

Мы все сталкивались имена, которые трудно произносить. У меня самого сложное имя, и я постоянно слышу разные варианты произношения своего имени, Атиф. Чтобы решить мою собственную проблему с именами, я создал плагин Javascript под названием Vocalizer. В этой статье я расскажу, что такое Vocalizer и несколько способов его использования. Ранее в этом году я изменил дизайн своего сайта-портфолио. В ходе этого процесса я решил добавить функцию, которая обучала посетителей тому, как произносить мое имя. Однажды я открыл приложение «Голосовые заметки» на своем iPhone, нажал «Запись» и попросил жену назвать мое имя. Затем я встроил небольшую кнопку на целевую страницу после своего имени. При нажатии на эту кнопку будет воспроизводиться аудиофайл с моим именем.

Мы все сталкивались имена, которые трудно произносить. У меня самого сложное имя, и я постоянно слышу разные варианты произношения своего имени, Атиф. Чтобы решить мою собственную проблему с именами, я создал плагин Javascript под названием Vocalizer. В этой статье я расскажу, что такое Vocalizer и несколько способов его использования.

Как это началось

Ранее в этом году я изменил дизайн своего сайта-портфолио. В ходе этого процесса я решил добавить функцию, которая обучала посетителей тому, как произносить мое имя. Однажды я открыл приложение «Голосовые заметки» на своем iPhone, нажал «Запись» и попросил жену назвать мое имя. Затем я встроил небольшую кнопку на целевую страницу после своего имени. При нажатии на эту кнопку будет воспроизводиться аудиофайл с моим именем.

Кнопка аудио произношения, которую я добавил на свой сайт.
Кнопка аудио произношения, которую я добавил на свой веб-сайт (большой предварительный просмотр)

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

Еще после прыжка! Продолжить чтение ниже ↓
  • The Rainbow Spreadsheet: инструмент для совместного исследования UX в области бережливого производства
  • Lean UX: выход из бизнеса с результатами
  • Стать лучшим фасилитатором

В течение следующих нескольких недель я потратил время на преобразование своей единственной реализации в многоразовый плагин. Прежде чем опубликовать его, я наткнулся на компанию под названием NameShouts, которая представляет собой звуковой инструмент для произношения с хранилищем более 70 000 произношений имен. Я обратился к ним. для доступа к их API, внедрил его в свой плагин и открыл его исходный код.

Как использовать вокализатор

Vocalizer — это простой и легкий плагин JavaScript, облегчающий доступ к труднопроизносимым именам. Если вы не знаете, как произнести определенное имя, Vocalizer покажет вам, как это сделать. Или, если вы человек с незнакомым именем, Vocalizer показывает другим, как его произносить.

Более подробное представление о том, как выглядит реализация Vocalizer.
Крупный план того, как выглядит реализация Vocalizer (большой предварительный просмотр)

Преимущество использования API NameShouts заключается в максимально быстрой реализации. В простейшем случае для его добавления на веб-сайт требуется всего два шага.

Во-первых, вы должны включить библиотеку Javascript перед закрытием </body> тег в коде вашего сайта:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vocalizer/1.0.0/vocalizer.min.js">

Далее все, что вам нужно сделать, это заключить свое имя в <span> тег с указанными атрибутами:

<span class="vocalizer" data-source="auto">NAME</span>

Примечание. Последняя версия Vocalizer.js доступна на CDNJS, или вы можете загрузить и использовать файлы со своего собственного сервера.

Как вы могли заметить, data-source атрибут установлен на auto в примере выше. Этот атрибут определяет источник аудиофайла.

Когда data-source установлен на auto, библиотека будет использовать API NameShouts. Этот вариант полностью бесполезен. Vocalizer будет автоматически искать список имен NameShouts и передавать аудиофайлы со своих серверов.

Альтернативный вариант — вручную записать и использовать собственный аудиофайл вместо API. В этом сценарии data-source Атрибут должен быть установлен на путь к вашему аудиофайлу. Например:

<span class="vocalizer" data-source="assets/audio/daenerys.mp3">Daenerys</span>

Есть вероятность, что в библиотеке NameShouts нет произношения вашего имени, и в этом случае вам следует использовать собственную аудиозапись, иначе Vocalizer не будет выполнять свою работу!

Как это работает

Фактический исходный код Vocalizer.js состоит примерно из восьмидесяти строк кода. Позвольте мне объяснить, что именно происходит под капотом.

Когда пользователь заключает свое имя в <span> тег с классом vocalizer, функция Javascript сохраняет это имя в строку:

var name = document.getElementsByClassName('vocalizer');
var names = [];

for (var i = 0; i < name.length; i++) {
  var data_source = name[i].getAttribute("data-source");
  names[i] = name[i].innerHTML.toLowerCase().replace(/W/g,'')
  var request = buildRequests(names[i]);
  fetchAudio(data_source, request, i);
}

Мы выполняем это внутри цикла на случай, если на странице несколько раз используется Vocalizer.

Затем условное проверяет data-source Атрибут, чтобы узнать, решите ли вы использовать NameShouts API для получения произношения или используете свой собственный аудиофайл:

var data_source = name[i].getAttribute("data-source");

if (data_source == 'auto') {
  /* code for using NameShouts API */
}
else {
  /* code for using your own audio file */
}

То buildRequest() Функция, которую мы вызываем внутри этого цикла, возвращает путь к конечной точке на основе имени пользователя.

function buildRequests(n) {
  return request="https://www.nameshouts.com/api/names/"+n;
} 

Оттуда мы передаем запрос в fetchAudio() функционировать и сделать нашу xmlHttpRequest к API NameShouts.

var xhr = new XMLHttpRequest();
xhr.open('GET', request, true);
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var audioPath = JSON.parse(xhr.responseText).message[names[i]][0]["path"];
        var audio = new Audio(BASE_URL+audioPath+'.mp3');
        audio.playbackRate = 0.75;
        name[i].addEventListener('click', function() {
          audio.play();
        }, false);
      } else {
        console.error(xhr.statusText);
      }
  }
}
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.send(null);

API NameShouts возвращает объект JSON, содержащий имя аудиофайла, соответствующее вашему имени. Оттуда мы объединяем базовый URL-адрес NameShouts (где хранятся аудиофайлы) и путь к аудиофайлу.

Если имя, на которое вы ориентируетесь, не существует в API NameShouts, плагин выдаст ошибку.

Выходом из этой ситуации будет запись и привязка собственного аудиофайла. Настройка data-source Атрибут пути к файлу обозначает ваш собственный аудиофайл. В этом случае мы просто создаем Audio элемент на основе пути к файлу из data-source:

var audioPath = sourceType;
var btn = document.getElementsByClassName('vocalizer');

var audio = new Audio(audioPath, function() {
  'Error!';
});

В интерфейсе после целевого имени появляется кнопка аудио. Косметика добавляется с помощью стилей CSS на псевдоэлемент. :after на <span> тег.

Наконец, мы добавляем событие клика к звуковой кнопке:

btn[i].addEventListener('click', function() {
  audio.play();
}, false);

Другие варианты использования

Пример: блоги и новостные публикации

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

Пример того, как Vocalizer может использоваться новостными изданиями, такими как Vox.com.
Пример того, как Vocalizer может использоваться новостными изданиями, такими как Vox.com (Изображение предоставлено) (Большой предварительный просмотр)

Представьте, что вы просматриваете новости на Vox.com и видите имя политического деятеля или региона мира с незнакомым вам именем. В этой ситуации Vocalizer может обучить вас произношению. Теоретически, это лучше подготовит вас к обсуждению текущих событий и проблем. Никто не хочет показаться неосведомленным.

Пример: платформы социальных сетей

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

Возможное использование на веб-сайтах социальных сетей, таких как LinkedIn.
Возможное использование на веб-сайтах социальных сетей, таких как LinkedIn (Изображение предоставлено LinkedIn) (большой предварительный просмотр)

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

Без моего ведома, Facebook недавно развернул аналогичную функцию, которая автоматически генерирует звук для произнесения имен.

Функция Facebook, отображающая произношение имен
Функция Facebook, отображающая произношение имен (Изображение предоставлено) (Большой предварительный просмотр)

Приятно видеть, что основные платформы сосредотачиваются на таких функциях доступности. К сожалению, нет гарантии, что автоматически сгенерированное воспроизведение будет корректным. Инструмент произношения Facebook искажает мою фамилию.

Проблемы

С каждым потенциальным решением есть проблемы. Vocalizer сталкивается с собственными проблемами. Основная проблема заключается в том, что два человека с одним и тем же именем не всегда произносят свое имя одинаково.

Часто язык происхождения человека диктует произношение его имени. Например, имя Хосе по-испански произносится как HOH-SEH. По-французски то же имя произносится JOO-ZE. Текущая реализация Vocalizer не обслуживает эти обстоятельства, если вы не решите использовать пользовательскую запись.

Повышение доступности

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

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

Для чего это — я надеюсь, что Vocalizer поможет познакомить людей с именами из других культур или национальностей.

Будущее вокализатора

Есть несколько функций и улучшений, которые я хотел бы внести в будущие версии Vocalizer.js:

  • Языковая поддержка имен с альтернативным произношением
  • Более изящная обработка ошибок реализации
  • Добавлен запасной вариант для ситуаций, когда имени нет в API NameShouts.
  • Возможность легко настраивать стили аудиокнопок

Чтобы еще больше развить эту идею, я запустил бесплатную веб-версию Vocalizer на Vocalizer.io.

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

Вывод

Исследование 2014 года показало, что люди с легко произносимыми именами считаются «более надежными». Я создал Vocalizer, чтобы решить проблему, которая существовала всю мою жизнь. Теперь я надеюсь, что это окажется полезным для других, помогая им решить ту же проблему.

Спасибо за прочтение! Пожалуйста, не стесняйтесь твитнуть мне если у вас есть какие-либо вопросы, комментарии или отзывы.

Сокрушительная редакция
(вф, аа, ил)




Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Улучшение UX имен с помощью Vocalizer.js

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Улучшение UX имен с помощью Vocalizer.js

Название: Улучшение UX имен с помощью Vocalizer.js . Краткое описание: ⭐ Атиф Азам . Дата публикации: 01.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»