La notation rythmique textuelle (du type "Bas Haut Bas Bas") pose un problème cognitif majeur pour les élèves débutants. Pour faciliter l'apprentissage de la biomécanique du poignet, il est indispensable de passer à une interface visuelle interactive.
En tant que créateur de contenu pédagogique (blogueur, professeur, webmaster), vous savez que garder l'attention de vos lecteurs sur une partition est un défi. L'aller-retour continu de la main droite est un mouvement fluide, et la notation sur votre site web doit refléter ce naturel de lecture et d'exécution.
Pour vous aider à moderniser vos articles de cours et vos tablatures, L'Atelier du Groove met à disposition des widgets HTML/CSS légers, sans dépendance lourde, prêts à être intégrés sur n'importe quel CMS (WordPress, Ghost, pages statiques) pour aider vos élèves à s'entraîner efficacement.
Ce nouveau lecteur a été pensé pour s'insérer discrètement entre deux paragraphes de votre cours de guitare. Avec son design "Dark Mode" épuré et ses repères visuels clairs (flèches rondes cliquables), il permet à l'élève d'interagir immédiatement avec la pulsation sans surcharger la page.
Vous êtes libre de copier ce code source et de l'utiliser sur vos projets commerciaux ou personnels, à la seule condition de conserver la mention légale et le lien SEO présents dans le pied de page du widget.
Copiez simplement le bloc ci-dessous dans l'éditeur HTML de votre site web. Le script intégré et le style "inline" garantissent que ce widget interactif ne cassera pas le design de votre propre site.
<!-- DEBUT DU MINI-LECTEUR RYTHMIQUE INTERACTIF -->
<div style="font-family: sans-serif; background-color: #1a1a1a; padding: 15px 25px; border-radius: 12px; text-align: center; max-width: 400px; width: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.3); margin: 20px auto;">
<div style="color: #a3a3a3; font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px;">Motif de Strumming</div>
<div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
<!-- Temps 1 -->
<div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
<span style="color: #525252; font-size: 12px; font-weight: bold;">T1</span>
<button onclick="toggleGroove(this)" style="background-color: #262626; border: 1px solid #404040; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; cursor: pointer; padding: 0;">↓</button>
</div>
<!-- Temps 2 -->
<div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
<span style="color: #525252; font-size: 12px; font-weight: bold;">T2</span>
<button onclick="toggleGroove(this)" style="background-color: #262626; border: 1px solid #404040; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; cursor: pointer; padding: 0;">—</button>
</div>
<!-- Temps 3 -->
<div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
<span style="color: #525252; font-size: 12px; font-weight: bold;">T3</span>
<button onclick="toggleGroove(this)" style="background-color: #262626; border: 1px solid #404040; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; cursor: pointer; padding: 0;">↓</button>
</div>
<!-- Temps 4 -->
<div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
<span style="color: #525252; font-size: 12px; font-weight: bold;">T4</span>
<button onclick="toggleGroove(this)" style="background-color: #262626; border: 1px solid #404040; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; cursor: pointer; padding: 0;">↑</button>
</div>
</div>
<div style="font-size: 11px; color: #737373; border-top: 1px solid #333; padding-top: 10px; margin-top: 5px;">
Outil webmestre par <a href="https://lab-guitare.soochrys.com/" target="_blank" style="color: #3b82f6; text-decoration: none;">L'Atelier du Groove</a>
</div>
</div>
<script>
function toggleGroove(element) {
if (element.innerText === '↓') { element.innerText = '↑'; }
else if (element.innerText === '↑') { element.innerText = '—'; }
else { element.innerText = '↓'; }
}
</script>
<!-- FIN DU MINI-LECTEUR RYTHMIQUE INTERACTIF -->