Componenten / Maatwerk / Geluid

GXJ Sound-knop

Gecentreerde knop bovenin: dunne golflijn + OFF/ON. Live op deze pagina, script /sound/gxj-sound.js.

MaatwerkGeluid1 instellingensound-button

Voorbeeld

Instellingen

Laden…

<div class="gx-stage">
  <button class="gx-soundbtn" type="button" data-gx="sound" aria-pressed="false" aria-label="Geluid Off">
    <svg viewBox="0 0 56 22" aria-hidden="true">
      <path d="M0 11 C7 9 7 13 14 11 S21 9 28 11 35 13 42 11 49 9 56 11"/>
    </svg>
    <span>Off</span>
  </button>
</div>
<pre class="gx-snippet">
  <code>&lt;script src="/sound/gxj-sound.js" data-top="16" data-top-m="58" defer&gt;&lt;/script&gt;</code>
</pre>

Instellingen

Alles wat je kunt variëren. Ook als query in de URL en als options in de MCP-tool get_component.

Sleutel	Instelling	Waarden	Standaard
`style`	Stijl	`blend` `pill`	`blend`

Richtlijnen

Toegankelijkheid

Start altijd uit (geen autoplay); aria-pressed meldt de stand.
Geluid laadt pas bij de eerste klik (geen 1,7 MB bij binnenkomst).

Wel

data-top als de navigatie in het midden staat.

Niet

Een tweede audio-element: alles via window.GXJSound.

Verwant

PlatenspelerDraaiende plaat met spectrumring, seekbalk, play en volume. Bedient hetzelfde geluid als de knop bovenin (custom element gx-disc).