Article original : How making hundreds of hip hop beats helped me understand HTML and CSS
Par Lawrence Yeo
Il était 2 heures du matin un samedi soir, et j'étais debout tard en train de travailler sur un nouveau projet.
En tant que beatmaker, vous pourriez penser que mon écran ressemblait à quelque chose comme ceci :
_[Crédit image](https://www.propellerheads.se/support/user/reason/mac-troubleshooting/how-can-i-change-themes-in-reason-9/" rel="noopener" target="blank" title=")
Mais au lieu de cela, il ressemblait à ceci :
Source : Mon écran @ 2 heures du matin ce samedi soir
Plutôt que de programmer des kicks et des snares, j'essayais de construire une barre de navigation collante sur mon site web. Oui, ce n'est pas tout à fait du machine learning ou de l'IA, mais pour moi, c'était une assez grosse affaire.
Vous voyez, je ne me suis jamais considéré comme un développeur web. J'ai quelques amis qui en vivent. Mais chaque fois qu'ils ouvraient leurs éditeurs de code pour me montrer sur quoi ils travaillaient, cela ressemblait simplement à l'un de ces GIF qui bouclent éternellement sur eux-mêmes.
Un peu comme ceci, mais avec beaucoup moins de moustache.
Naturellement, je me levais et je pensais, Dieu merci, je n'ai pas à faire ça. Je suis juste un gars qui fait des tonnes de beats toute la journée !
Eh bien... cette pensée fut de courte durée.
Soundcloud, Spotify et Bandcamp ont rendu infiniment plus facile pour les musiciens de faire connaître leur travail au public. Mais la musique est maintenant dispersée sur tant de plateformes qu'il est difficile pour les auditeurs de trouver exactement ce qu'ils veulent.
Il était clair pour moi que j'avais besoin d'un site web pour servir de plaque tournante centrale à mon travail. Tout comme mes musiciens préférés, je voulais une page web avec une belle barre de navigation et une grande image héroïque de moi-même ne regardant pas dans la caméra.
Un hommage à mes héros.
J'ai d'abord essayé d'utiliser Squarespace, mais je n'aimais pas devoir commencer avec un modèle, puis travailler dans les limites de blocs prédéterminés.
Et les thèmes étaient trop communs. Vous cliquiez sur votre-artiste-préféré.com, pour atterrir sur le même modèle Squarespace que vous aviez déjà vu des centaines de fois.
Je voulais construire quelque chose à partir de zéro — même si je n'avais aucune connaissance préalable de HTML et CSS.
Je voulais me lancer un défi.
Alors j'ai acheté un cours Udemy, j'ai téléchargé Brackets et j'ai commencé les leçons.
Et... wow. J'ai été immédiatement accro.
Juste un mois ou deux plus tard, mon site web était en ligne, et il était entièrement fait à partir de zéro.
Trebles and Blues _Trebles and Blues est un beatmaker basé à Los Angeles qui s'inspire de multiples sources créatives._www.treblesandbluesmusic.com
Alors... qu'est-ce qui m'a fait aimer autant cette expérience ?
Voici quelques-unes des choses que j'ai trouvées particulièrement cool :
- La philosophie « transformer un truc en diamant » : la capacité à construire du contenu brut en HTML (peu importe à quel point il peut paraître nul), puis à l'embellir en CSS
- La recontextualisation des ressources existantes : prendre des images, des polices d'icônes, etc., de n'importe où et les manipuler pour qu'elles s'adaptent à votre récit
- L'utilisation d'outils externes : la disponibilité des plug-ins jQuery que je pouvais utiliser pour améliorer la page
Après avoir pris du recul et y avoir réfléchi un peu, il était logique que j'aie autant apprécié.
Ces mêmes éléments sont fermement intégrés dans le processus de création de beats également !
Cela peut sembler improbable, mais il est devenu très clair pour moi qu'il existait un lien fort entre le développement web et la production musicale. Prenons le temps d'explorer davantage cette connexion.
Un aperçu du processus de création de beats
Pour ceux d'entre vous qui ne sont pas familiers avec la production hip hop, je vais simplifier le processus en trois étapes suivantes :
- Batterie
- Sampling
- Instrumentation
À des fins d'exercice, je vais déconstruire le beat suivant, intitulé « Clear Skies Ahead » (tiré de ma page Soundcloud) :
Je l'ai choisi parce qu'il est assez simple en structure, les fichiers sources sont toujours intacts, et... c'est un beat plutôt chill ?.
Je vais passer en revue chacune des étapes en utilisant cette chanson, et détailler comment HTML et CSS sont plus hip hop que vous ne l'auriez jamais imaginé.
Explorer les connexions
Similarité #1 : Faire les batteries est comme construire du contenu en HTML et le styliser plus tard en CSS.
_Crédit photo : [Nam Bui](http://nambuidesign.com/" rel="noopener" target="blank" title=")
Je veux souligner deux caractéristiques clés de HTML :
- HTML fournit une structure. HTML fournit l'architecture de la page. Dans un document HTML typique, nous avons des balises
<html>,<head>,<body>,<footer>qui délimitent clairement chaque section, ainsi que des appels à tous les fichiers CSS nécessaires et aux plug-ins jQuery. - HTML héberge le contenu qui sera stylisé plus tard. Bien que HTML soit responsable du contenu d'une page, nous codons tout de manière à ce qu'il soit facile de le styliser plus tard. L'aperçu initial peut sembler vraiment nul maintenant, mais nous le préparons pour une future embellissement via CSS.
Les batteries d'un beat ont également des caractéristiques très similaires :
- Les batteries fournissent une structure. Elles sont la fondation de la chanson. Elles forment le groove qui portera l'auditeur.
- Les batteries hébergent des sons qui seront stylisés plus tard. Elles manquent généralement de caractère au début. C'est habituellement lorsque les effets appropriés sont appliqués qu'elles prennent vraiment vie.
Écoutons les batteries initiales pour le beat de référence, « Clear Skies Ahead ». Le motif brut se compose de kicks, de snares et d'une boucle de break de batterie :
Cela sonne... okay. La structure est là, le groove est là, mais il manque de caractère. Le kick sonne de manière jarring. Le snare sonne creux. Et le break de batterie se cache en arrière-plan.
Nous devons donc le styliser et l'embellir !
Pour renforcer les basses fréquences du kick, j'ai appliqué un égaliseur dessus. Cet effet me permet d'ajuster les différentes fréquences d'un son. Pour donner plus de vie au snare, j'ai ajouté un effet de réverbération pour qu'il résonne. Pour donner de la présence au break échantillonné, j'ai utilisé un effet appelé stereo imager pour l'élargir à travers le beat.
Cela peut être l'équivalent d'assigner un élément div avec les classes « equalizer », « reverb » et « stereo-imager » aux différentes sections en HTML :
<div class="equalizer"> <h2>Kicks</h2> <p>The "boom"</p></div>
<div class="reverb"> <h2>Snare</h2> <p>The "bap"</p></div>
<div class="stereo-imager"> <h2>Drum Break</h2> <p>"Boom-bap"</p></div>
Ensuite, nous pouvons ajuster les styles des classes en conséquence dans CSS :
.equalizer { font-weight: bolder;}
.reverb { text-shadow: 1px 1px blue;}
.stereo-imager { letter-spacing: 1px;}
Voici l'équivalent sonore du style des batteries (avec les effets traités) :
Comme vous pouvez l'entendre, les batteries prennent vraiment vie une fois que les effets appropriés ont été appliqués. De même, le contenu de votre page web ne peut être présenté qu'après avoir été correctement stylisé en CSS.
Similarité #2 : Échantillonner une chanson est comme recontextualiser des images et des polices d'icônes pour s'adapter à un nouveau récit.
Quels que soient vos opinions sur l'échantillonnage, c'est un pilier de la culture hip hop. J'adoooore ça, et je trouve que c'est une manière incroyable de donner une nouvelle vie à des œuvres d'art préexistantes.
Il existe une technique dans le hip hop appelée « chopping », dans laquelle vous prenez une vieille chanson, la découpez en petits morceaux et les rejouez dans une nouvelle séquence pour créer une toute nouvelle chanson.
En utilisant « Clear Skies Ahead » comme exemple, le clip ci-dessous détaille le processus en 3 étapes :
- Identifier la chanson à échantillonner (« dig » pour l'échantillon) — commence à 0:00
- Arranger une nouvelle séquence avec les tranches découpées — commence à 0:13
- Ajouter les effets nécessaires et les incorporer dans le beat — commence à 0:24
La construction d'une page web suit la même philosophie.
Disons que vous construisez une page très simple de quatre images centrées qui changent d'opacité lorsque vous passez la souris dessus. Le même processus en 3 étapes s'applique ici également :
- Identifier les images à utiliser
Vous pouvez utiliser Unsplash ou l'un de ces magnifiques sites de photos libres de droits pour trouver des images que vous aimez.
- Arranger les images en HTML dans une séquence qui correspond à un récit
<div class="box"> <img src="spring.jpg" alt="spring"> <img src="summer.jpg" alt="summer"> <img src="fall.jpg" alt="fall"> <img src="winter.jpg" alt="winter"></div>
- Ajouter les effets nécessaires en CSS pour finaliser la page
.box img {
/* Redimensionner les images */ width: 50%; height: auto;
/* Centrer les images */ display: block; margin-left: auto; margin-right: auto;
/* Espacer les images */ margin-bottom: 30px;
}
img:hover {
opacity: 0.5; transition: 0.3s;
}
Ce processus de recherche active de ressources, de réarrangement et de stylisation selon vos préférences est universel dans le hip hop et le développement web.
Similarité #3 : Ajouter un instrument virtuel est comme ajouter un plug-in jQuery pour améliorer la page.
Pour finaliser ce beat, je veux ajouter un son de basse sub grave qui rassemblera tout. Il agira comme la colle qui arrondit les basses fréquences dans le beat et le remplit.
« Mais que faire si je n'ai pas de basse ? Et même si j'en avais une, je ne saurais pas comment en jouer ! »
Et c'est là que les instruments virtuels interviennent. Ils se présentent sous la forme de sons stock ou de plug-ins tiers, et ils vous permettent d'accéder à des sons qui seraient autrement difficiles à obtenir. Ils vous permettent de créer un son de synthé sans module synthétiseur réel, un son de violon sans instruments à cordes réels, et ainsi de suite.
Pour « Clear Skies Ahead », j'ai ajouté l'instrument virtuel qui contenait la basse sub, je l'ai enregistré et je l'ai appliqué au beat existant :
Cette philosophie d'utilisation d'un instrument externe est comme utiliser un excellent plug-in jQuery pour votre site. Ils permettent tous deux d'accéder facilement à une fonctionnalité qui serait autrement difficile à créer soi-même.
Pour illustrer cela sur ma page web, insérons une galerie d'images qui peut afficher les quatre images saisonnières de mon exemple précédent. Au lieu d'en construire une à partir de zéro, utilisons jQuery et un plug-in au design attrayant. J'utiliserai Swipebox :
Pour les lecteurs mobiles, consultez mon JSFiddle ici.
Dans les deux scénarios, j'ai utilisé des ressources externes qui ont été intégrées de manière transparente dans chaque plateforme. Les deux étaient facilement accessibles et permettaient des expériences plus riches pour le visiteur et l'auditeur.
Pensées finales
Bien que je ne code que depuis quelques mois, j'ai créé des centaines et des centaines de beats au cours des six dernières années. Lorsque j'ai pris conscience des fortes similitudes entre les deux, j'ai pu tirer parti de mon expérience de musicien pour devenir un meilleur développeur web.
Et cela me conduit à ma dernière pensée :
Pour créer une expérience d'apprentissage amusante, trouvez comment une passion existante se connecte au nouveau sujet que vous étudiez.
Cela rend les concepts plus faciles à comprendre, et cela puise également dans le pot d'excitation que vous avez déjà pour vos passions ou hobbies existants.
Dans mon cas, comprendre le lien entre HTML/CSS et la production musicale a grandement accéléré ma courbe d'apprentissage et a rendu l'expérience vraiment amusante. Lorsque je construisais mon site, je suis entré dans des états de flow qui rappelaient ce que je ressentais pendant mes sessions de création de beats.
Comment vos passions existantes s'alignent-elles avec un nouvel ensemble de compétences que vous apprenez ? Elles peuvent sembler complètement différentes au premier abord, mais prenez le temps de regarder un peu plus profondément.
Si des compétences apparemment sans rapport comme la création de beats et l'écriture de code peuvent bien s'associer, vous devriez pouvoir trouver une connexion tout aussi forte entre vos divers intérêts également !
Hé, je m'appelle Lawrence, et je crée des beats sous le nom de Trebles and Blues. Je viens de sortir un nouvel EP, Set It Off, qui est disponible maintenant. Pour plus de musique, n'hésitez pas à consulter ma page Soundcloud.