diff --git a/specs/components/engine/audio/SPEC.md b/specs/components/engine/audio/SPEC.md index 3929a645..f62937f6 100644 --- a/specs/components/engine/audio/SPEC.md +++ b/specs/components/engine/audio/SPEC.md @@ -9,4 +9,13 @@ This component is responsible for playing audio in the browser or web view. This - Seeking should be enabled if possible (obviously not feasible for live streams). - The element should operate in broadcast mode when a group attribute is present. - Broadcasting the audio element allows other browser tabs to monitor its playback progress and state, volume, etc. +- When the broadcast leader tab gets closed, another tab will take the leader role and when that happens; if the audio was playing, the audio must start playing in the tab of the new leader. - Consumers of this custom element must be able to tap into the code that allows for audio visualisations. Though it is not required to work simultaneously on all browser tabs. +- The volume of the audio must be able to be set and persisted across sessions. This value depends on the used `group`. +- The mime type must be set on the audio if provided. +- The element must support a `initial-progress` attribute which can be used to start playing audio from that particular point. +- Audio must be able to preloaded in the background. + +## Implementation specific + +- When using a HTML audio element, use a silent audio file data-uri as the `src` to cancel the loading of any data. diff --git a/specs/components/engine/audio/types.d.ts b/specs/components/engine/audio/types.d.ts index f54dd06c..65a4fb41 100644 --- a/specs/components/engine/audio/types.d.ts +++ b/specs/components/engine/audio/types.d.ts @@ -9,6 +9,7 @@ export type Actions = { seek: ( _: { currentTime?: number; audioId: string; percentage?: number }, ) => void; + state: (audioId: string) => AudioStateReadOnly | undefined; supply: ( _: { audio: Audio[]; play?: { audioId: string; volume?: number } }, ) => void; diff --git a/src/components/engine/audio/element.js b/src/components/engine/audio/element.js index 8bb6baef..28b1f4a4 100644 --- a/src/components/engine/audio/element.js +++ b/src/components/engine/audio/element.js @@ -608,7 +608,7 @@ class AudioEngineItem extends BroadcastableDiffuseElement { hasEnded: signal(false), isPlaying: signal(false), isPreload: signal(this.hasAttribute("preload")), - loadingState: signal(/** @type {LoadingState} */ ("loading")), + loadingState: signal(/** @type {LoadingState} */ ("initialisation")), progress: computed(() => { const currentTime = this.$state.currentTime.value; @@ -653,6 +653,11 @@ class AudioEngineItem extends BroadcastableDiffuseElement { audio.addEventListener("timeupdate", this.timeupdateEvent); audio.addEventListener("waiting", this.waitingEvent); + // Transition from initialisation to loading for non-preload items + if (!this.hasAttribute("preload")) { + this.$state.loadingState.set("loading"); + } + // Setup broadcasting if part of group if (this.hasAttribute("group")) { const actions = this.broadcast(