Forme d'onde de synthétiseur
Un panneau de synthé analogique à joues en bois : chaque touche allume sa LED et trace son onde sur l'oscilloscope.
Réglages
Code
<fieldset class="uvq04-osc"><legend>Oscillateur 1</legend><div class="pn"><div class="sc" aria-hidden="true"><svg viewBox="0 0 200 60" preserveAspectRatio="none"><g class="w sin"><path vector-effect="non-scaling-stroke" d="M0 30C8 4 17 4 25 30S42 56 50 30S67 4 75 30S92 56 100 30S117 4 125 30S142 56 150 30S167 4 175 30S192 56 200 30S217 4 225 30S242 56 250 30S267 4 275 30S292 56 300 30"/></g><g class="w tri"><path vector-effect="non-scaling-stroke" d="M0 30L12.5 6L37.5 54L50 30L62.5 6L87.5 54L100 30L112.5 6L137.5 54L150 30L162.5 6L187.5 54L200 30L212.5 6L237.5 54L250 30L262.5 6L287.5 54L300 30"/></g><g class="w saw"><path vector-effect="non-scaling-stroke" d="M0 54L50 6V54L100 6V54L150 6V54L200 6V54L250 6V54L300 6V54"/></g><g class="w sq"><path vector-effect="non-scaling-stroke" d="M0 6H25V54H50V6H75V54H100V6H125V54H150V6H175V54H200V6H225V54H250V6H275V54H300V6"/></g></svg></div><div class="bt"><label><input type="radio" name="uvq04-osc"><i class="led" aria-hidden="true"></i><span class="ky"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12C5 3 9 3 12 12S19 21 22 12"/></svg></span><span class="nm">Sinus</span></label><label><input type="radio" name="uvq04-osc"><i class="led" aria-hidden="true"></i><span class="ky"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12L7 5L17 19L22 12"/></svg></span><span class="nm">Triangle</span></label><label><input type="radio" name="uvq04-osc" checked><i class="led" aria-hidden="true"></i><span class="ky"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 18L12 6V18L22 6V18"/></svg></span><span class="nm">Dent de scie</span></label><label><input type="radio" name="uvq04-osc"><i class="led" aria-hidden="true"></i><span class="ky"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 17V7H12V17H22V7"/></svg></span><span class="nm">Carré</span></label></div></div></fieldset>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Boutons radio
Voir tout : Boutons radioOù l’utiliser
Conçu comme la façade d'un vieux synthétiseur analogique, ce groupe de boutons radio a des joues en noyer, des touches crème avec les icônes sinus, triangle, dent de scie et carré, et une LED rouge au-dessus de chacune. L'onde choisie défile sur un petit oscilloscope à phosphore tracé en SVG, si bien qu'on voit le son choisi. Parfait pour les outils audio et les applis de musique.
La couleur principale allume les LED et la secondaire la trace de l'oscilloscope : ambre et vert ou rouge et cyan restent lisibles. Remplace les quatre options par des filtres, des effets ou des presets, avec un seul mot court par libellé.