<astl-audio>

A sound between paragraphs in the browser's own player, with an optional title and an optional transcript that the student opens under it, its lines as written. Nothing is graded or stored. Under a Content Security Policy, the file's host needs media-src.

Generated from packages/components/src/audio/: the manifest, the message catalogs, the editor descriptor and the fixtures.

Property	Value
Tag	`<astl-audio>`
Display	`block`: stands between paragraphs
Graded	no: nothing to answer
Slot kinds	none (what they mean)
Element version (`v`)	1
Message namespace	`astl.audio`
Editor label	Audio

Live example

The fixture audio-basic, played with the English UI and graded in the browser. Try it, then press "Check".

At the bakery

Listen to Anna at the bakery. Open the transcript if you need it.

Anna: Good morning! Two rolls, please. Baker: Here you are. Anything else? Anna: No, thank you. Have a nice day!

<astl-doc lang="en">
  <h2>At the bakery</h2>
  <p>Listen to Anna at the bakery. Open the transcript if you need it.</p>
  <astl-audio id="bakery" label="Anna buys bread" src="https://assets.astrolabe.test/audio/fixtures/audio-basic/bakery.mp3">
    <astl-transcript>
      Anna: Good morning! Two rolls, please.
      Baker: Here you are. Anything else?
      Anna: No, thank you. Have a nice day!
    </astl-transcript>
  </astl-audio>
</astl-doc>

Attributes

Visibility: public attributes stay in the view, private ones exist only in the answer key (students never get them), derived ones are written by the compiler.

Attribute	Meaning
`id` public, required id	Source id, unique in the document. Views carry an opaque id instead. Common to all components.
`v` public integer: >= 1	Element format version. Optional in sources (absent = 1); the compiler always writes the current one. Common to all components.
`style-template` public string	A look by name, from the style templates the host registers (the `component` scope); it wins over the document's. More: Looks. Common to all components.
`label` public string	The title, shown above the player: it also names the player. Inspector: "Title (optional)".
`src` public, required url	The sound file, in a format browsers play (mp3 plays in all of them). Before Play only its metadata loads. Inspector: "Sound file".

Children

Child	Meaning
`<astl-transcript>` public, text content 0 to 1 per element	What is said, as plain text: each line stays a line (one per speaker, say). Closed until the student opens it.

Variants

One presentation: this component has no variants.

Scoring

Not graded: no slots and no scoring.

Issue codes

Reported in the namespace astl.audio, on top of the document issues. Errors block compiling; warnings do not.

Code	Messages
`AUDIO_TRANSCRIPT_EMPTY` error params `id`	English: Audio {id} has an empty transcript. Write what is said, or remove the transcript. Polish: Nagranie {id} ma pustą transkrypcję. Wpisz, co słychać w nagraniu, albo usuń transkrypcję.

Starters

The insert menu lists <astl-audio> under "Components", where it inserts the default template. It has no named starters.

Entry	English	Polish
Components	Audio A sound in the browser's player, with an optional title and transcript.	Nagranie Dźwięk w odtwarzaczu przeglądarki, z opcjonalnym tytułem i transkrypcją.

Templates of astl-audio

As the descriptor writes them: {{id}} becomes a fresh id, {{t:key}} a message in the author's locale.

Default template:

<astl-audio id="{{id}}" label="{{t:template.label}}"><astl-transcript>{{t:template.transcript}}</astl-transcript></astl-audio>

Accessibility

Pattern: the browser's audio player, labelled by the title; the transcript is a native disclosure (details and summary).
Keys: Tab, Enter, Space.

What every element must keep: Accessibility.

Looks

CSS parts: audio, title, player, transcript. How to reach them: Looks.

Authors pick a look for one element with style-template; it wins over the document's. Built-in templates for <astl-audio>: playful, notebook.

Editor

Property	Value
Label	Audio (`editor.label`)
Description	A sound in the browser's player, with an optional title and transcript. (`editor.description`)
Icon	`speaker-high`
Id prefix	`audio`: new elements get `audio-1`, `audio-2`, ...

Inspector fields, in order:

Field	Edits	Label	Help
`attribute`	attribute `label`	Title (optional)	Shown above the player. It also names the player for screen readers.
`attribute`	attribute `src`	Sound file	An mp3 file plays in every browser.
`text-list`	`<astl-transcript>` children	Transcript	What is said, as plain text: each line stays a line. Students open it under the player.

All messages

Every key of astl.audio: ui.* for students (messages/ui/<locale>.json, the only strings the element loads), issue codes, editor.* and template.* for authors (messages/<locale>.json).

12 keys in English and Polish

Key	Messages
`ui.transcript`	English: Transcript Polish: Transkrypcja
`AUDIO_TRANSCRIPT_EMPTY`	English: Audio {id} has an empty transcript. Write what is said, or remove the transcript. Polish: Nagranie {id} ma pustą transkrypcję. Wpisz, co słychać w nagraniu, albo usuń transkrypcję.
`editor.label`	English: Audio Polish: Nagranie
`editor.description`	English: A sound in the browser's player, with an optional title and transcript. Polish: Dźwięk w odtwarzaczu przeglądarki, z opcjonalnym tytułem i transkrypcją.
`editor.title`	English: Title (optional) Polish: Tytuł (opcjonalnie)
`editor.titleHelp`	English: Shown above the player. It also names the player for screen readers. Polish: Widoczny nad odtwarzaczem. Nazywa też odtwarzacz dla czytników ekranu.
`editor.src`	English: Sound file Polish: Plik dźwiękowy
`editor.srcHelp`	English: An mp3 file plays in every browser. Polish: Plik mp3 odtwarza się w każdej przeglądarce.
`editor.transcript`	English: Transcript Polish: Transkrypcja
`editor.transcriptHelp`	English: What is said, as plain text: each line stays a line. Students open it under the player. Polish: To, co słychać, jako zwykły tekst: każdy wiersz zostaje wierszem. Uczniowie otwierają ją pod odtwarzaczem.
`template.label`	English: Title of the recording Polish: Tytuł nagrania
`template.transcript`	English: Type what is said in the recording. Polish: Wpisz, co słychać w nagraniu.