Keyboard shortcuts and a seek bar for a player of your own, which press the same handlers as the lock screen.
A shortcut of a single key that types a character must work only while the player has the focus, unless the user can turn it off or remap it (WCAG 2.2, §2.1.4). So listen! follows the keys pressed in an element of your choice, e.g. the one that holds the player, and calls the handlers of the Media Session with the details of each action:
(def handlers
(session/element-actions audio {:seekbackward 10 :seekforward 30}))
(session/actions! handlers)
(def stop!
(listen! player audio handlers))
Everything but listen! runs on the JVM too, e.g. to write a seek bar's ARIA attributes into a page on the server.
Keyboard shortcuts and a seek bar for a player of your own, which press
the same handlers as the lock screen.
A shortcut of a single key that types a character must work only while
the player has the focus, unless the user can turn it off or remap it
(WCAG 2.2, §2.1.4). So listen! follows the keys pressed in an element of
your choice, e.g. the one that holds the player, and calls the handlers
of the Media Session with the details of each action:
(def handlers
(session/element-actions audio {:seekbackward 10 :seekforward 30}))
(session/actions! handlers)
(def stop!
(listen! player audio handlers))
Everything but listen! runs on the JVM too, e.g. to write a seek bar's
ARIA attributes into a page on the server.(listen! scope element handlers)(listen! scope
element
handlers
{:keys [keymap] :or {keymap player-keys} :as opts})Call the handlers at the keys pressed while the focus is in scope,
for the media element, with the opts below, and return a function
that stops it.
A handler gets the details of its action, as from the lock screen, e.g. {:action :seekforward}, and the browser does nothing else for that key, e.g. scroll at the space bar. The call leaves alone the keys that belong to something else, i.e. those with Alt, Ctrl or Meta, those that a handler took already, typing in a field, and a space that presses a button. Holding a key down repeats only a seek.
It keeps the handlers it was given, so where they change, e.g. with
each episode, stop it and call it again with the new ones.
Call the `handlers` at the keys pressed while the focus is in `scope`,
for the media `element`, with the `opts` below, and return a function
that stops it.
A handler gets the details of its action, as from the lock screen,
e.g. {:action :seekforward}, and the browser does nothing else for
that key, e.g. scroll at the space bar. The call leaves alone the keys
that belong to something else, i.e. those with Alt, Ctrl or Meta,
those that a handler took already, typing in a field, and a space that
presses a button. Holding a key down repeats only a seek.
It keeps the `handlers` it was given, so where they change, e.g. with
each episode, stop it and call it again with the new ones.
- :keymap, a map from each key to an action, or to a function from
the element's state to the details of one, player-keys by default,
or e.g. seek-bar-keys for a seek bar of its own. An action needs
a handler of the same name, and may be one of your own, e.g.
{"f" :fullscreen} with a :fullscreen handler.(play-or-pause {:keys [paused] :as state})The details of the action that a play/pause key presses for a media
element in state, a map of its :paused: {:action :play} while it's
paused, and {:action :pause} otherwise.
The details of the action that a play/pause key presses for a media
element in `state`, a map of its :paused: {:action :play} while it's
paused, and {:action :pause} otherwise.The shortcuts of listen! by default: a map from each key, as the key of a KeyboardEvent names it, to the action it presses, or to a function from the state of the media element to the details of the action.
The shortcuts of listen! by default: a map from each key, as the key of a KeyboardEvent names it, to the action it presses, or to a function from the state of the media element to the details of the action.
(pointer-seek e {:keys [duration] :as state})The details of a seek to the point of a seek bar that the pointer
event e is at, for a media element in state, a map of its
:duration, e.g. {:action :seekto :seek-time 1830}, or nil while the
duration is unknown or infinite.
The bar is the element that listens for e, its current target. A
point past either end seeks to that end, e.g. as a drag under pointer
capture leaves the bar.
The details of a seek to the point of a seek bar that the pointer
event `e` is at, for a media element in `state`, a map of its
:duration, e.g. {:action :seekto :seek-time 1830}, or nil while the
duration is unknown or infinite.
The bar is the element that listens for `e`, its current target. A
point past either end seeks to that end, e.g. as a drag under pointer
capture leaves the bar.(seek-aria state)(seek-aria {:keys [current-time duration] :as state} locale)The ARIA attributes of a seek bar for a media element in state, a map
of its :current-time and :duration, e.g. from media/state, with the
position in words from value-text in the locale, e.g.
{:role "slider"
:aria-valuemin 0
:aria-valuemax 3600
:aria-valuenow 750
:aria-valuetext "12 minutes, 30 seconds"}
The seek bar needs a name of its own too, e.g. an :aria-label. While the duration is unknown or infinite, it has no maximum.
The ARIA attributes of a seek bar for a media element in `state`, a map
of its :current-time and :duration, e.g. from media/state, with the
position in words from value-text in the `locale`, e.g.
{:role "slider"
:aria-valuemin 0
:aria-valuemax 3600
:aria-valuenow 750
:aria-valuetext "12 minutes, 30 seconds"}
The seek bar needs a name of its own too, e.g. an :aria-label. While the
duration is unknown or infinite, it has no maximum.The keys of a seek bar, as the APG's Media Seek Slider has them: a second for each arrow, 15 for each page, and the start and the end for Home and End.
The keys of a seek bar, as the APG's Media Seek Slider has them: a second for each arrow, 15 for each page, and the start and the end for Home and End.
(seek-by seconds)A function from the state of a media element, a map of its
:current-time, to the details of a seek by seconds from there, e.g.
-15 to go back.
A function from the state of a media element, a map of its :current-time, to the details of a seek by `seconds` from there, e.g. -15 to go back.
(value-text seconds)(value-text seconds locale)The seconds in words for a screen reader, e.g. "12 minutes, 30
seconds" for 750, in the locale, e.g. "12 minutter og 30 sekunder"
in "da". By default it's the language of the page, as the lang of its
html element names it, since the screen reader speaks the page's, or
else the browser's. Where the browser has no Intl.DurationFormat, and
on the JVM, the words are English.
The `seconds` in words for a screen reader, e.g. "12 minutes, 30 seconds" for 750, in the `locale`, e.g. "12 minutter og 30 sekunder" in "da". By default it's the language of the page, as the lang of its html element names it, since the screen reader speaks the page's, or else the browser's. Where the browser has no Intl.DurationFormat, and on the JVM, the words are English.
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |