Как сделать слухач
Обновлено: 02.07.2024
Очень доходчивая статья о том, как работает делегирование событий в JavaScript и как не запутаться в слушателях событий.
Чтобы понять делегирование событий в JavaScript, вам сначала надо понять работу слушателей самих событий (ну или event listeners).
Я не очень люблю описывать вещи словами из их названия, но тут уж некуда деваться, слушатели событий следят за срабатыванием самих событий на странице. Вот, собственно и всё.
Событием в JavaScript можно назвать то, что “происходит с HTML элементом”, а происходить с ним может много чего.
Вот некоторые популярные JavaScript события:
change — срабатывает тогда, когда что-то поменялось в HTML элементе.
click — когда пользователь кликает на элемент.
mouseover — когда пользователь наводит мышь на HTML элемент.
mouseout — когда пользователь отводит мышку от элемента.
keydown — когда пользователь кликает на клавиатуру.
load — когда браузер заканчивает загрузку страницы.
Чтобы добавить слушатель событий к HTML элементу, вы можете использовать addEventListner() метод.
Первая часть кода это то, что мы будем слушать, в нашем случае это просто HTML элемент. Но в JavaScript можно слушать просто неописуемое изобилие вещей на странице и не только. Это может быть HTML элемент на странице, это может быть сам документ или это может быть окно браузера. В общем, это объект высшего порядка в client-side JavaScript который охватывает почти всё. Но всё же, в большинстве случаев это HTML элементы. Вторая часть кода это уже сам слушатель.
Вот как работает eventListener :
Когда пользователь кликает на HTML элемент, с id disnay-character , то слушатель событий срабатывает и вызывает функцию showCharactersName .
Слушатели событий выставляются после загрузки страницы. Так что, когда вы впервые открываете сайт, браузер скачивает, считывает и выполняет JavaScript.
В коде выше, при загрузке страницы, слушатель событий находит HTML элемент с id disnay-character и выставляет на него слушатель события по клику.
Вся эта конструкция будет успешно работать, если элемент уже существует на странице. Но что происходит со слушателем событий, когда элемент добавляется в DOM уже после загрузки страницы?
Делегирование событий
Именно оно решает эту проблему. Чтобы понять принцип его работы, нам надо посмотреть ниже на список персонажей Disney.
У этого списка есть довольно простой функционал. Именно для наших нужд мы можем добавить несколько персонажей в этот список и проверить боксы рядом с именем персонажа.
Этот список также является динамическим. Инпуты (Mickey, Minnie, Goofy) были добавлены уже ПОСЛЕ загрузки страницы и следовательно, на них не были прикреплены слушатели событий.
Давайте посмотрим на этот код:
Но давайте посмотрим на HTML при загрузке страницы:
А теперь давайте взглянем на HTML после загрузки страницы (из локального веб-хранилища, API запроса и т.п.):
Если вы захотите кликнуть на инпуты персонажей — Mickey, Minnie, or Goody), то вы наверное ожидали бы увидеть всплывающее окно с надписью “hi!”, но так как они не были загружены на страницу при её инициализации, то и прослушиватели событий НЕ БЫЛИ добавлены на эти элементы и само собой ничего не произойдёт.
Как же пофиксить эту проблему?
Суть делегирования событий в том, что вместо прослушивания изменений на инпутах напрямую, нам нужно прослушивать HTML элемент, который был бы на странице при изначальной загрузке.
В нашем примере это список ul с классом characters , который появляется при загрузке страницы. Мы можем повесить слушатель событий прямо на него.
Лучше рассматривать делегирование событий, как ответственных родителей и нерадивых детишек. В этом случае родители это просто боги, а детям приходиться слушать всё, что говорят их родители. Прекрасный аспект тут в том, что если бы мы добавили больше детей (или инпутов), то родители бы остались такими же в правах — они были с самого начала или другими словами, прямо с загрузки страницы.
Давайте прикрепим слушатель событий:
Теперь у нас есть слушатель событий на ul , а не на каждом отдельном потомке. Так что же тогда произойдет, если мы кликнем на инпут после того, как загрузилась страница и выведем в консоль event.target ?
event.target это отсылка к объекту, на котом сработало событие. Или другими словами, он указывает на HTML элемент на котором сработало событие.
Событие в нашем случае это клик. Объект на котором отработало событие это .
** label рассматривается, как часть объекта input — поэтому мы видимо их обоих**
Console.log(event.currentTarget)
Если мы выведем в консоль event.currentTarget — то увидим мы кое что другое.
event.currentTarget указывает на данную цель события, так как сам ивент уходит дальше в DOM. Он всегда ссылается на элемент к которому был прикреплен eventListener . В нашем случае этим элементом являлся неупорядоченный список characters , так что это то, что мы увидим в консоле.
Пишем делегирование событий в JavaScript
Так как теперь мы знаем, что event.target указывает на элементы на которых отработало событие и также мы знаем, какой элемент нам нужно слушать, решение проблемы с делегированием для нас не является проблемой.
В общем, код выше говорит нам то, что если элемент на котором отработал клик не является инпутом, то мы выходим из функции.
А если этот элемент является инпутом, то тогда мы выводим в консоль event.target и выполняем последующий JavaScript код на этом узле потомке.
Очень важно, что теперь мы можем быть уверены в том, что пользователь кликнул нужный узел потомок, пусть даже инпуты не были добавлены в DOM после начальной загрузки страницы.
Event Bubbling (Всплытие событий)
Если вы хотите завершить чтение на этом моменте — то смело это делайте. Мы уже узнали основы делегирования событий. Но для глубокого понимания того, почему оно работает, нам нужно понять Event Bubbling.
Что происходит на самом деле при клике?
Всякий раз, когда пользователь кликает, этот самый клик отдаётся вверх на самую высь DOM и отрабатывает событие клика на всех элементах родителя по которому был сделан клик. Вы не всегда видите эти клики, так как вы не всегда слушаете (с eventListener ) клики на этих элементах, но как бы то ни было, но такое “всплытие” действий имеет место быть.
Это называется Event Bubbling (Всплытие событий) или распространением события.
Это означает то, что всякий раз, когда вы кликаете на один из наших инпутов в DOM, вы по сути прокликиваете весь документ.
Но вернемся к нашему примеру с делегированием события:
Вернёмся к нашему примеру с делегированием событий — у нас был только один слушатель события и он был выставлен на неупорядоченный список с классом characters . Тем не менее, мы кликнули на потомка этого родительского HTML элемента, элемент input, который запустил прослушиватель событий, который привязали к списку.
В силу наличия всплытия событий, вы можете повесить eventListener на одном родительском HTML элементе, который находится выше потомков и этот прослушиватель событий будет срабатывать всякий раз, как заданное событие случиться на любом из его дочерних элементов — даже если они были добавлены после первоначальной загрузки страницы.
В завершение. А зачем использовать делегирование событий?
Без делегирования событий, вам бы пришлось перепривязывать событие по клику на каждый новый input , добавленный на страницу. Делать такую писанину довольно проблематично и обременительно. Во первых, такой подход значительно увеличит количество слушателей событий на вашей странице и их большое количество увеличит объем памяти, потребляемое вашей страницей. Что приведет к снижению производительности, что само по себе уже плохо. Во вторых, могут произойти проблемы с утечкой памяти из-за циклической привязки и отвязки слушателей событий, и удаления элементов из DOM. Но это уже выходит за рамки данной статьи.
С недавних пор в интернете открыли моду на трансляции. Одновременно с развитием видеостриминга, новую волну популярности переживает радио. Правда, теперь это интернет-радио — ведь голос и музыка передаются не только по FM-волнам, но и через интернет. Можно называть это как угодно — подкаст или аудиострим, главное, что все это можно сделать в виде собственно радиостанции. Рассмотрим, какие преимущества есть у этого решения и как собрать рабочий вариант настоящей станции на коленке.
В мире существует множество проводных и беспроводных технологий, по которым выполняется передача данных. В первую очередь мы представляем Wi-Fi или Bluetooth, хотя на самом деле история информационных сетей начинается намного раньше. Первая в мире проводная сеть и, соответственно, технология передачи информации по ней появились в 1832 году, когда русский ученый Павел Шиллинг испытал первый в мире электромагнитный телеграф. Через несколько лет эти фантастические по тем меркам технологии позволили ученым добиться передачи по проводам не только азбуки Морзе, но и даже голоса. Так или иначе, люди поняли, что можно загнать информацию в провод и передавать на любое расстояние.
Потом и этого оказалось мало: когда проводные технологии перестали справляться с большим потоком данных и окутали улицы километрами медных нитей, пришло время заменить их на что-то более емкое и современное. Например, радио, которое служит человеку и по сей день.
Альтернативные сети
Например, нельзя выйти в сеть и транслировать что-либо без разрешения спецслужб. Для этого необходимо зарегистрировать оборудование в Минцифры России, получить разрешение на передачу данных, уникальный позывной и еще много всего. В этом нет ничего удивительного — радиосигнал имеет ограниченный диапазон, а некоторые частоты заняты важными государственными и военными службами. Поэтому приходится получать целый ворох разрешений и лицензий только для того, чтобы занять свободный канал и не мешать другим.
Для чего пригодится свое радио
Радио в любом исполнении можно считать одним из способов соединиться с миром. С помощью текстового блога автор делится мыслями, рассказывает о жизни или пишет инструкции — почему бы не делать то же самое с помощью голосовых обращений. Тем более, можно комбинировать все платформы и занимать внимание подписчиков сначала интересной статьей, а потом захватывающим рассказом. И вообще, радио можно считать почти живым общением, а это уже другой уровень ведения блога.
Стать RDJ проще, чем работать видеоблогером — сразу освобождаемся от рутины монтирования и других обязанностей, которые нужны для поддержания видеоблога. Поэтому радио можно использовать как своеобразную альтернативу YouTube: подписчики будут слушать любимых ведущих там, где просмотр видео невозможен, например в дороге.
С другой стороны, можно просто запустить плейлист по заявкам: каждую неделю менять список музыкальных композиций, за которые голосуют слушатели. В общем, интернет-радио —инструмент универсальный и очень гибкий.
Интернет-радио не требует:
- Дорогостоящего софта — можно установить бесплатные плагины и начать транслировать без вложений;
- Разрешения на трансляцию в сети;
- Сертификации — вместо выделенной волны используется IP-адрес;
- Приемопередаточного оборудования — для нашего проекта хватит домашней техники;
- Цензуры (только не стоит слишком увлекаться свободой действий);
- Радиоприемников — достаточно смартфона с выходом в интернет.
Что нужно для интернет-радиостанции
Потребуется много таких доработок и оптимизаций для старта. Другими словами — долго, здорово, интересно, но не для простого пользователя. Поэтому мы воспользуемся вторым вариантом: спихнем все самое сложное тому, кто любит трудности, а себе оставим только самое интересное — включить и петь!
Поднимаем свое радио на коленке за пять минут
Поиск и настройка платформы
В интернете есть много ресурсов и платформ, которые позволяют быстро создать свой сайт. То же самое и с подключением радио — достаточно найти подходящего провайдера, выбрать тарифный план и подключиться.
Один из таких сервисов называется Radioheart — его используют известные бренды для трансляции своего радио в магазинах и салонах. Он позволяет пропустить шаги с настройкой сервера и сразу перейти к использованию готового софта — то, что нужно для новичка.
Регистрируемся на сайте через соцсети или электронную почту:
И попадаем на первую страницу личного кабинета:
Для тестирования имеется демо-режим и возможность подключить бесплатный хостинг с ограничениями. То, что нужно для первой радиостанции. Подключаемся:
После активации профиля откроется главная страница с хостингами, один из которых нужно выбрать мышкой:
И попасть в админку:
Здесь есть все, что нужно для начала трансляции, включая готовые ссылки на основной аудиопоток. Данные, указанные в красном поле, понадобятся для настройки передающего устройства.
Хост: основной сервер, на котором крутится наш поток.
Порт: 8000 (стандартный порт для подключения к хосту).
Маунт: уникальное имя потока, который находится на сервере.
Логин/пароль: автоматически заданы системой и в бесплатном тарифе не меняются.
Конфигурация серверной части нашей радиостанции завершена. Переходим к выбору и настройке программы-диджея.
Выбор и настройка софта
Платформа Radioheart умеет как принимать сигнал со студийного компьютера с помощью программ, подобных Icecast, так и работать с собственной панелью Radioheart AIR. Фирменный софт доступен платным пользователям, поэтому мы воспользуемся одним из популярных автодиджеев — RadioBOSS.
RadioBOSS имеет начальный набор функций и инструментов для трансляции потоков с музыкой или же подключения ведущего с настоящим микрофоном и целой эфирной сеткой. Это своего рода комбайн, который собирает аудиоресурсы и управляет ими. Он умеет создавать списки воспроизведения с рекламными вставками, почасовыми блоками, ротацией, перекрестным затуханием, автоматическим выравниванием звука и другими функциями для комфортного вещания.
Скачиваем программу с официального сайта и устанавливаем: открываем, соглашаемся, что пробный период составляет 150 включений (каждое продолжительностью по 5 часов), и переходим в настройки, чтобы подключить плеер к серверу:
Затем открываем мастер настройки:
В следующем окне необходимо внимательно перенести информацию из администраторской панели Radioheart в поля программы:
Для трансляции нужно подобрать файлы в правильном формате: бесплатный тарифный план Radioheart позволяет транслировать поток в 128 Кбит/с, поэтому исходные файлы лучше держать в аналогичном качестве.
С помощью программы можно передавать не только готовые записи, но и голос в прямом эфире, как это делают настоящие станции. Для этого придется добавить пару дополнительных железок: звуковую карту, хорошие наушники и качественный микрофон, желательно с поп-фильтром против паразитных звуков.
Что касается рабочих станций, то для любительских трансляций или коммерческих радиосводок будет достаточно среднего по мощности компьютера. Это двух- или четырехъядерный процессор, хотя бы 8 Гб оперативной памяти и любая видеокарта, даже встроенная.
Эксперимент в рамках нашего материала стерпит любые условия, поэтому будет достаточно трансляции пары музыкальных композиций на любой конфигурации. Главное, чтобы соединение было стабильным.
Смотрим в левую часть рабочего окна программы, где находится встроенный менеджер файлов:
Запускаем музыку и проверяем, что программа подключилась к нашему серверу:
Отправляемся за ссылкой на страницу своей станции и проверяем звук:
Музыка играет, радио работает! Не верите? Послушайте сами!
Игра или работа?
Сам себе редактор, сам себе сценарист, ведущий, звукооператор — романтика домашнего RDJ. Остается разобраться с технической стороной вопроса и начать транслировать. Тем более, порог вхождения в сегмент интернет-радио довольно низкий — качественный микрофон, пара железок для компьютера и хорошее соединение. Прибавим к этому уникальные темы и тексты — остальное сделали за нас.
Конечно, инструкция адаптирована для создания личного радиоблога. Но когда проект должен вещать в масштабах края или целой страны, то и условия будут совершенно другие. В этом случае будет и свой сервер, и дорогое оборудование, и даже специальный кабинет для записи эфира. Соответственно, если личное интернет-радио можно расценить как игру или хобби, то настоящий ресурс с десятками тысяч слушателей вряд ли будет крутиться на одном компьютере и готовой платформе-хостинге. Но это уже совсем другая история.
Я знаю, что в JavaFX есть слушатели, и я уверен, что Java. Но я не понимаю, как их реализовать.
У меня есть логическая переменная, которая изменяется в моей программе. Каждый раз, когда логическое значение изменяется, я хочу, чтобы функция myFunc() была запущена.
Это можно сделать легко?
и всякий раз, когда вы хотите изменить флаг типа boolean, вы должны сделайте это с помощью этого метода.
Если вы используете JavaFX 2, то он предоставляет готовые решения для архитектуры компонентов JavaBeans и Шаблона дизайна наблюдателя. Кроме того, это дает большую гибкость связывания состояния переменных привязками свойств. В приведенном ниже коде показаны события изменения свойств и привязка переменных свойств. Конечно, вы можете обернуть аксессоры свойств, чтобы скрыть детали, как getFlag() и setFlag() ниже, и используйте их в остальной части приложение.
Я на всю жизнь запомнил, как скучно мне было на некоторых школьных уроках. Я сидел прямо перед учителем, но лучше слышал не преподавателя, а Сашку с последней парты. И не потому, что Сашка говорил громче. Нет. Учительница иногда орала, как резаная, но Сашку всё равно было слышно лучше. И даже когда предмет был интересный, и учитель рассказывал красиво, моё внимание постоянно куда-то улетало. Но однажды.
Я разгадал ее загадку, когда сам стал педагогом. Наталья Сергеевна умело использовала простые правила сторителинга, чтобы удерживать внимание аудитории. Тогда об этом искусстве в России ещё не говорили, но англичанка интуитивно использовала его приемы, которые я теперь тоже взял на вооружение.
Что же это за приёмы?
1. Неожиданный вопрос
3. Внимание к деталям
Детали всегда привлекают. Артур Конан Дойл на деталях выстроил сотни захватывающих приключений, от чтения которых невозможно оторваться.
Если при разборе литературного произведения вы будете обращать внимание детей на такие подробности, оно запомнится им лучше, оживет и останется в их воображении.
4. Резкий звук
Резкие звуки действительно мгновенно привлекают внимание всей аудитории. Но использовать их часто нельзя, так как информация, которая последует за ними, будет восприниматься публикой как тревожная.
5. Аудиоэффекты
Почему бы не включить фоном аудио с кваканьем, когда вы рассказываете детям о жизни лягушек? Или запись свистящего шума вьюги, когда на географии рассматриваете климат Арктики? А на уроке истории, посвящённом Европе начала ХХ века, к месту будет звучать музыка Вагнера.
Любой аудиоэффект не просто привлечет внимание к вашему выступлению, но и поможет слушателям запомнить факты истории, о которых вы рассказываете.
Аудиоэффекты — это не обязательно включенные в компьютере или в телефоне файлы. Это ещё и ваши действия и звуки. Если на уроке в начальной школе вы изобразите голосом падение астероида в мезозойскую эру, внимание слушателей вам будет обеспечено.
На школе юных журналистов, фото из личного архива
6. Вовлечение слушателя
Стройте ваши уроки по принципу иммерсивного театра, в котором зрители активно участвуют в спектакле: включайте, погружайте учеников в ваш рассказ, чтобы они проживали его как актеры.
Читайте также: