CngxAudio
projects/common/audio/event-mode/audio.directive.ts
Import#
import { CngxAudio } from '@cngx/common/audio'
Description#
Event-mode audio binder. Maps DOM events on the host to earcons via the
event:earcon grammar — a pure DOM-event-to-sound directive with no state
coupling (that is [cngxAudioStatus]'s job).
<button [cngxAudio]="'click:tap'">Save</button>
<a [cngxAudio]="'pointerenter:notification, click:complete'">Open</a>Playback is skipped when the element is disabled ([audioDisabled]), when
the engine is muted / reduced-motion-gated / autoplay-not-armed, or when the
same earcon is still within the debounce window. [audioVolume] scales just
this element's plays.
The listener set is derived from the grammar, not fixed: 'click:tap'
registers one DOM listener, and rebinding [cngxAudio] at runtime adds the
newly named events and removes the dropped ones. Binding happens on the first
change detection after the input settles rather than at construction, so an
event dispatched programmatically before the host's first tick is missed.
Listeners are registered outside Angular's event dispatch. In a zoneless app
that means they schedule no change detection; under zone.js the patched
addEventListener still triggers a tick, so there the saving is registration
cost alone. Either way the engine's lastPlayed and status are signals, so
anything a template binds to them stays current.