Načti data z API a vyrenderuj pro každý sound effect 🎵 tlačítko, které ho přehraje ▶.

export type Sound = {
    name: string,
    url: string
}

Base adresa API: https://materialy.jakub.dev/soundboard-api/

MethodPathRequestResponseExample Response
GET/Sound[][
{
“url”: “sounds/amogus.mp3”,
“name”: “Amogus”
},
{
“url”: “sounds/glorp.mp3”,
“name”: “Glorp”
}
]

Ukázka

Jedno statické tlačítko soundboardu a načtení dat z API.

Kód zkus vymyslet sám*a, ale můžeš se inspirovat, když Ti to nepůjde.

Další featury

Když máš hotový základ - všechny tlačítka se načítají z API a přehrávají zvuk - programuj dál.

  1. Counter přehrání jednotlivých zvuků
  2. Counter přehrání všech zvuků dohromady
  3. Uložení counterů do paměti prohlížeče
    • Aby si dal*a F5 a counter zůstal
  4. Ovládání hlasitosti pro všechny tlačítka najednou
  5. Možnost přehrávání sound effectu vícekrát najednou (výzva 🔥)

Bonus

Pošli PRko a přidej nějaký zvuk 😊