Grund: vad module-audio är

module-audio är en blocks-variant som visar ljudinnehåll i kort med omslagsbild, rubrik, brödtext och inbyggd spelare.

Tekniskt använder modulen samma basrenderare som module-blocks, men med fokus på items[].audio för uppspelning. Det ger en enhetlig struktur för design och layout samtidigt som innehållet är optimerat för ljudcase.

Den passar bra för poddklipp, förklarande voice-over, kundröster eller annat ljudmaterial där varje kort behöver tydlig kontext.

Val 1: datamodell och kärnnycklar

Top-level är blocks med module_type: module-audio. Vanliga sektionsfält är section_title, section_description, columns, id, aria_label och bakgrundsobjektet.

I korten används främst:

  • items[].title och items[].text_html för copy
  • items[].image.* för cover
  • items[].audio.* för ljudkälla och a11y-label
  • items[].display och display_below_desktop_class för visning

Kompilatorn normaliserar items[] till block1..blockN, så template kan rendera upp till tolv block konsekvent.

Val 2: media i kortet (audio, image, video)

Den primära varianten är audio.src (utan filändelse). I template renderas då ett <audio> med två source-format: .m4a och .mp3.

image.src används som omslag. Bildfält får automatiskt srcset, sizes och fallback från bildmanifestet, medan alt och title styr tillgänglighet och metadata.

Eftersom module-audio delar blocks-renderare kan även video-fält samexistera. Overlay/play-knappen läser både video- och audio-labels för en enhetlig media-UI.

Val 3: layout, tabs/slider och appearance

Som blocks-familj stödjer module-audio tre layoutlägen: flow, tabs och slider. Om ingen layout anges normaliseras den till flow.

Vid tabs används tabs_settings (position, mobilposition, startindex). Vid slider används slider_settings (loop, pilar, pagination, autoplay, intervall).

Design/customization sker via appearance-tokens på sektion och kortnivå. Dessa blir auto_class/auto_style i builden och kan kombineras med globala designvariabler utan manuell CSS per kort.

Val 4: kompilator- och playerbeteende

Build-steget sätter blocks.is_one_column utifrån columns, vilket påverkar hur video-källor väljs och hur mediahantering beter sig i korten.

Client-scriptet initBlockMedia() kopplar overlay/play-knapp till ljudspelaren. Klick på knappen eller kortets media-yta togglar play/pause, och kortet får state när uppspelning startat.

Viktig implementationdetalj: i aktuell template är <audio preload="none"> hårdkodat. Fältet items[].audio.preload finns i docs-modellen men används inte direkt i renderingen just nu.

Val 5: schema, SEO och AI-optimering

Rekommenderad schema-struktur för module-audio är ItemList för sektionen och AudioObject per spår. För poddflöden kan du byta till PodcastSeries/PodcastEpisode.

Håll stabila @id-mönster, till exempel #audios och #audio-.... Matcha alltid title/text_html i kortet mot schemafält som name och description.

För starkare AI/SEO-signal: använd tydliga alt-texter på coverbilder och lägg gärna transkript i närliggande textsektioner när innehållet är viktigt för sökbarhet.