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))
A seek bar is one of two kinds, and each has functions of its own:
A screen reader on a phone adjusts a slider with a swipe, which a range input always follows, so a range input is the safer kind.
Everything but the functions of events runs on the JVM too, e.g. to write a seek bar's 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))
A seek bar is one of two kinds, and each has functions of its own:
- A range input, <input type="range">, which the browser draws, moves
with the keys, the pointer and touch, and describes to a screen
reader. The functions range-attributes and range-seek only add the
position and the seek that the input asks for.
- An element of your own, which needs all of that from you:
slider-attributes gives it the slider role, slider-keys its keys for
listen!, and slider-seek the seek at the pointer.
A screen reader on a phone adjusts a slider with a swipe, which a range
input always follows, so a range input is the safer kind.
Everything but the functions of events runs on the JVM too, e.g. to
write a seek bar's 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. slider-keys for a seek bar of your 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.
(range-attributes state)(range-attributes {:keys [current-time duration] :as state} locale)The attributes of a range input that seeks in 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.
(range-attributes {:current-time 750 :duration 3600})
;; => {:min 0 :max 3600 :step 1 :value 750
;; :aria-valuetext "12 minutes, 30 seconds"}
The input needs a name too, e.g. a label. While the duration is unknown or infinite, the maximum is the position. A browser moves a value past the maximum back to it, and keeps it there when the maximum grows, so a maximum of 0 before the metadata would leave the input at the start of an episode that resumes later on.
The attributes of a range input that seeks in 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.
(range-attributes {:current-time 750 :duration 3600})
;; => {:min 0 :max 3600 :step 1 :value 750
;; :aria-valuetext "12 minutes, 30 seconds"}
The input needs a name too, e.g. a label. While the duration is unknown
or infinite, the maximum is the position. A browser moves a value past
the maximum back to it, and keeps it there when the maximum grows, so a
maximum of 0 before the metadata would leave the input at the start of
an episode that resumes later on.(range-seek e)The details of the seek that the input or change event e of a range
input asks for, e.g. {:action :seekto :seek-time 1830 :fast-seek
true}, for the same handler as the lock screen's scrubber.
The input event comes while the pointer drags, so it asks for a fast seek, which lands near the point but sooner, and the change event at the end lands on the point.
The details of the seek that the input or change event `e` of a range
input asks for, e.g. {:action :seekto :seek-time 1830 :fast-seek
true}, for the same handler as the lock screen's scrubber.
The input event comes while the pointer drags, so it asks for a fast
seek, which lands near the point but sooner, and the change event at
the end lands on the point.(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.
(slider-attributes state)(slider-attributes {:keys [current-time duration] :as state} locale)The ARIA attributes of a seek bar of your own 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 of your own 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 that's an element of your own, for listen!, 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. A range input has keys of its own.
The keys of a seek bar that's an element of your own, for listen!, 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. A range input has keys of its own.
(slider-seek e {:keys [duration] :as state})The details of a seek to the point of a seek bar of your own 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 of your own 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.(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 |