SI28 - P20

Rapport de projet SI28 :

LE BITUME avec une plume

Projet musical interactif sur le rappeur Booba

PIRAPAKARAN Krishshanth
MAKHLOUTI Sabri

Professeur : [Link]
SI28 - P20

(I)Note d’intention 3
1) Public cible 3

2) Objectifs 3

3) Objectif bonus (non réalisé par faute de temps) 3

(II)Cahier des charges 4

1) Structure du site 4

2) Choix des outils pour la réalisation du projet 5

3) Ressources médias 7

(III)Scénario 8
1) Interface 8

2) Charte graphique 10

2) Récapitulatif des extraits présentés sur le site 11

3) Descriptions des projets de l’artiste 12

(IV)Conclusion 14
SI28 - P20
(I) Note d’intention

1) Concept

Créer une interface interactive sur les musiques du rappeur Booba pour
découvrir ou redécouvrir ses musiques de ses débuts (années 2000s) à nos
jours.

-Frise chronologique avec les différentes années (2000 à 2020) à scroller pour
pouvoir naviguer à travers les époques. (un peu le même concept que http://
[Link]/dev/pixelspace/pixelspace_solarsystem.html)

-Chaque page correspondra à un projet de l’artiste et comportera plusieurs

mots disposés en vrac sur l’écran.

- Passer la souris sur un des mots lance un extrait de musique de

Booba qui comporte le mot et on montre les paroles de la
musique à l’utilisateur.

- Arrière plan changeant au fil des années avec les différentes

couverture de la pochette de chaque projet.

2) Public cible

Cette expérience interactive s’adresse à un public non habitué au rap mais aussi à des personnes
qui apprécient déjà la musique de l’artiste.

3) Objectifs

- Permettre de montrer aux personnes qui ont une idée préconçue du rap français une autre
image du rap (recherche dans les paroles etc.)

- Permettre aux fans de rap et de Booba de redécouvrir grâce à cette interface les classiques
mais aussi des sons moins connus du rappeur à l’aide d’une navigation interactive.

- Booba est un artiste présent dans le paysage du rap français depuis 20 ans, il y a donc
plusieurs générations qui l’ont écouté. Ce projet peux permettre aux anciennes générations
de découvrir ce que l’artiste produit maintenant mais également l’inverse.

4) Objectif bonus (non réalisé par faute de temps)

Créer un espace quizz où l’interface proposera des phrases tirées de musiques de Booba et où
l’utilisateur devra essayer de retrouver le titre de la musique en question. (s’adressant aux
personnes écoutant déjà du rap et l’artiste en question).
 SI28 - P20

(II) Cahier des charges

1) Structure du site

A. Interface d’accueil

La page d’accueil du site sera simple. Nous mettrons le titre en gros suivi de deux cadres : un
pour une petite biographie rapide du rappeur Booba et un autre pour expliquer le contenu du
site.

Pour rentrer dans le coeur du site il suffira à l’utilisateur de scroller vers la droite et ainsi débuter
le voyage dans le temps.

LE BITUME avec une plume

Biographie rapide

Explication du contenu

INTERFACE D’ACCUEIL

B. Navigation avec le scrolling

La suite du site sera basé sur le principe d'une frise chronologique. Cette expérience interactive
doit pouvoir être assimilable à un voyage dans le temps. Après la page d’accueil, l’utilisateur
arrivera dans les années 2000s et plus il avancera vers la droite en scrollant plus il avancera dans
le temps année par année jusqu’à l’année 2020.

2002 2006 2010 2015 2020

Accueil

FRISE CHRONOLOGIQUE DU SITE

SI28 - P20

Pour chaque année nous aurons un arrière plan différent (cover des différents projets) et des
mots disposés en vrac sur la page.

mot t2 mot 10 mo
1 mo mot 3 t1 t 12
1 mo

mo
mo
mo

13
t4

t t 14 mot 15
t6 mo
t5
mo

mot

18
mot 17
7

mot 16
mot
ot

ot
8
m

m
INTERFACE DE L’ANNÉE N INTERFACE DE L’ANNÉE N+1

C. Dimension d’interactivité

Nous avons déjà une interaction entre l’interface et l’utilisateur grâce au scrolling qui lui permet
de naviguer où bon lui semble. Mais nous allons aller plus loin en mettant en place une
expérience sonore et visuelle unique pour chaque (!!) mot présent sur l’intégralité du site.
Lorsque l’utilisateur va passer la souris sur un des mots l’idée est qu’une « bulle » pop sur l’écran
et qu’un extrait de la musique qui contient ce mot se lance. De plus une photo de la pochette de
l’album/single concerné s’affichera avec les paroles de l'extrait en question.

2) Choix des outils pour la réalisation du projet

paroles - paroles -paroles - paroles

-paroles - paroles -paroles - paroles

mot m

INTERACTION AVEC UN MOT

A. Google Drive

Nous avons décidé d’utiliser un drive pour capitaliser toutes les informations
nécessaires à la réalisation du projet. Choix classique et efficace pour avancer en
binôme.
SI28 - P20

B. Excel
Excel nous a permis de constituer la base de données contenant l’intégralité des
données qui sont implémentées dans le site. Une fois l’architecture du site
réalisée il suffit de venir piocher les informations nécessaires dans l'Excel pour
compléter le code du site. Ainsi pour chaque ligne du tableau nous avons un
mot auquel sont associés : la date de sortie du morceau, le nom du morceau, le
nom de l’album, une photo de la pochette de l’album, les temps de l’extrait
concerné dans la musique, les paroles qui seront mises sur le site ainsi qu’un lien vers la page
youtube du morceau (pour le téléchargement).

EXTRAIT DE LA BASE DE DONNÉES

C. Sublime Text

C’est l’éditeur choisi pour coder le site. Il est très utile car on peut choisir le langage pour la
syntaxe donc il est facile de basculer entre HTML/CSS/Javascript

D. [Link] & Youtube

Nous avons utilisé ces deux outils pour télécharger les extraits correspondant à chaque mot.
[Link] est très utile car il permet de télécharger seulement une partie d’une vidéo
Youtube. Par conséquent les temps de passage que nous avons noté dans la base de donnée sur
Excel nous serviront à télécharger précisément les quelques secondes d’extrait voulues pour
chaque passage.

E. Rapgenius
Site très complet qui propose les paroles pour un grand nombre de
chansons à travers le monde. Il nous a été très utile pour récupérer
les paroles correspondants aux passages des morceaux que nous
SI28 - P20

avons téléchargé mais également pour rédiger les descriptions de chaque projet que nous avons
inclus dans le site.

3) Ressources médias

Pour ce projet trois types de ressources sont utilisées tout au long de l’interface :

- L’image : à chaque défilement l’utilisateur se retrouve sur une page avec un arrière-plan
différent avec la cover du projet concerné en fond. Changer d’arrière-plan à chaque fois
permet d’avoir l’impression de naviguer dans des univers différents : chaque album à une
coloration différente que ça soit visuellement ou musicalement et l’évolution du rappeur se
ressent aussi beaucoup à travers l’évolution des covers de projet.

- Le son : c’est ici la ressource qui est, à notre sens, la plus importante. On est ici sur un projet
interactif musical donc il est primordial d’avoir du contenu auditif. A chaque fois que
l’utilisateur passe la souris sur un mot il accède à un contenu différent. Au final il y a à peu
près 10 extraits par « page » et plus d’une centaine d’extraits de musiques sur l’ensemble du
projet.

- Le texte : Pour chaque mot du site nous avons dans la petite fenêtre qui s’ouvre les paroles
qui vont avec l’extrait diffusé. Pour chaque projet nous avons également fait le choix de
rajouter un petit descriptif en bas de page. Ces descriptions sont plus à titre anecdotique et
n’entrent pas réellement dans le cadre de l’interactivité mais elles font aussi partie du site.
SI28 - P20
(III) Scénario

1) Interface

Le site se présente horizontalement, le scroll se fait donc horizontalement, de plus, chaque

album est représenté par un bloc des dimensions suivantes :

- 100% de la page en vertical

- 50% de la page en horizontal.
Chaque bloc est décomposé en trois zones :

- Zone supérieure pour le titre (1)

- Zone centrale dans laquelle les mots sont disposés en vrac (2)
- Zone inférieure dans laquelle on trouve des informations sur le projet (3)

3
SI28 - P20

Pour faire comprendre à l’utilisateur que le défilement est horizontal, nous avons donc décidé
de faire un bloc d’accueil pour accueillir l’utilisateur.

ACCUEIL DU SITE

Ce bloc informe de la structure du site, son but et lui signale également que la variable sonore
est importante pour apprécier le site dans son ensemble.

Lorsque l’utilisateur passe sa souris sur un mot un pop-up apparait pour donner des
informations sur le morceau en cours. Ici voici ce qui s’affiche lorsqu’on survole avec la souris
le mot « glock » :

Nom du morceau en cours

Paroles du morceau en
cours
SI28 - P20

2) Charte graphique
Les couvertures des différents albums étant toutes très différentes dans le style et les couleurs,
nous devions trouver un moyen d’uniformiser le site afin de ne pas casser le fondu temporel
attendu avec une frontière graphique trop marquée. Ainsi, nous avons choisi de mettre un fond
noir sur la totalité de la page et de rajouter les couvertures avec 50% d’opacité.

SANS OPACITÉ AVEC OPACITÉ

SANS OPACITÉ

AVEC OPACITÉ
SI28 - P20

Cela permet également de mettre en valeur les mots qui seront en blancs et
qui attireront l’œil de l’utilisateur. Les mots sont en inscris sous une petite
couche graphique en CSS indiquant à l’utilisateur qu’il est en train
d’interagir avec le site quand il passe la souris sur un mot.

Enfin, après de nombreux essais, nous avons choisi une police assez sobre (Neutron,
téléchargée sur [Link] que nous avons également retouché avec de
l’opacité pour donner un côté sombre au site et ainsi créer une véritable ambiance dans laquelle
nous plongeons l’utilisateur.

2) Récapitulatif des extraits présentés sur le site

Projet Année Musiques

Intro, Pas le temps pour les regrets, L’effort de paix, La le=re, Si tu kiffes pas,
Mauvais Oeil 2000
92i, HLM 3, Le silence n'est pas un oubli
Ma définiGon, Indépendant, Ecoute bien, Repose en paix, DesGnée, Le bitume
Temps Mort 2002 avec une plume, Sans rature, Nouvelle école, Strass et paille=e, De mauvaise
augure
Tallac, Le mal par le mal, N 10 ,Hors-saison, La faucheuse, Mon son, Alter ego,
Panthéon 2004
Avant de parGr
Mauvais garçon, Garde la pêche, Le Duc de boulogne, Boulbi, Ouest Side, Ouais
Ouest Side 2006
Ouais, Pitbull, Le météore, Gun in hand, Couleur ébène, Outro
Garcimore, le D.U.C, Me and you, Du biff, Hustlin (French Remix) a Rick Ross,
Autopsie Vol.2 2007
113 - On sait l'faire (Clip officiel) a. Le Rat Luciano, Booba, Tout et tout de suite
Izi monnaie, B20BA, Illegal, Salade tomate oignons, Bad boy street, Game over,,
0.9 2008
Soldats, R.A.S, Marche ou crève, 0.9
A3, Double poney, La vie en rouge, Rats de villes, Reste en chien feat La Fouine,
Autopsie Vol.3 2009
Foetus, Maman dort feat Mokobé, Bienvenue dans le Texas feat Tony Parker
Les derniers seront les premiers, Caesar palace, Ma couleur, Abracadabra,
Lunatic 2010
Killer,, LunaGc, Jour de Paye, Comme une étoile, Paradis, Réel, Fast Life
Autopsie Vol.4 2011 Bakel City Gang, Vaisseau mère, Scarface, Paname, A4, Cruella, Pigeons
Maki Sall Music, Tombé pour elle, Caramel, Kalash, O G, Jimmy, Rolex, 2pac,
Futur 2012
Futur
D.U.C, Tony Sosa, Caracas, LVMH, Temps mort 2.0, 3G, La mort leur va si bien,
[Link] 2015
OKLM
Nero Nemesis 2016 Walabok, Zer, 92i Veyron, Validée, Comme les autres, 4G, GénéraGon Assassin
Friday, Drapeau Noir, Trône, Ca va aller, Nougat, PeGte fille, DKR,
Trône 2017
E.L.E.L.E.P.H.A.N.T
SI28 - P20
Projet Année Musiques

Banlieue (Rim'K), Paris c'est loin (Damso), Rouge et bleu (Kalash), Call of
Bitume (Rim’K), Même Tarif (Alonzo), Here (ChrisGne and the queens),
Feats —
Infréquentables (Dosseh), Oh, bah oui (Lacrim), Madrina (Maes), Médicament
(Niska)

13 Projets 122 Extraits

3) Descriptions des projets de l’artiste

Description
Projet

Mauvais Œil est le premier album studio sorti en septembre 2000 du groupe
Lunatic composé de Booba et Ali. L’album est un succès et la performance de
Mauvais Oeil
Booba fait l’unanimité. C’est à partir d’ici que le rappeur commence à monter les
marches et à construire sa légende dans le rap français.
Après la sortie de Mauvais Oeil Booba sort l’album Temps Mort en solo. Des
rimes dures, des punchlines inoubliables et des lyrics crues résument bien le thème
Temps Mort du projet. Classique inévitable du rap français, le projet est certifié disque d’or
après quelques mois à une ère ou le streaming n’existait pas et où le disque d’or
était acquis à 100 000 ventes physique.
Deuxième album solo du rappeur sorti 2 ans après le premier, il s’impose une
Panthéon nouvelle fois avec un disque d’or obtenu 1 mois après sa sortie. Sur les 13 titres on
retiendra surtout le son “n°10”, classique du rap français.
Troisième album solo de l'artiste, Ouest Side est devenu un classique du rap
Ouest Side français ; sorti le 12 Février 2006, il sera certifié disque de platine avec 500.000
exemplaires vendus ce qui est un score phénoménal à l’époque.
Deuxième volet de la série de mixtapes Autopsie sortie le 22 janvier 2007 sur le
Autopsie Vol.2
label Tallac Records. Elle s'est vendue à environ 50 000 exemplaires.
4ème album solo du rappeur mais surement le moins reconnu de Booba. C’est un
peu un album de transition qui marque le début de l’utilisation de l'autotune dans
0.9
ses musiques. Malgré un succès moins important que les précédents l’album est
tout de même certifié disque d’or.
SI28 - P20
Description
Projet

La saga Autopsie continue. Ce troisième volet de la série comporte des inédits

parmi lesquels un bon nombre de remixes et d'instrumentaux. On retrouve aussi
Autopsie Vol.3
des sons en solo d’autres artistes que Booba met en avant grâce à sa visibilité. On
retrouve notamment Dosseh ou encore le très controversé Despo Rutti.
5ème album studio solo sorti au au début de la décennie, le titre de l'album est un
hommage au nom de l'ancien groupe de Booba qu'il formait avec Ali. Composé de
Lunatic
nombreux classique tels que “Comme une étoile” ou encore “Ma couleur” connu
de tout fan de rap français qui se respecte, le projet est certifié double platine.
Le quatrième volume de la série de mixtapes “Autopsie”, et aussi le plus court. On
retrouve de nombreux visages familiers de l’entourage du rappeur. On découvre
Autopsie Vol.4
également de nouveaux artistes en featuring comme Shay et surtout Kaaris avec
qui le rappeur est désormais en froid.
Sixième album solo du Duc le projet est certifié disque d’or dès la première
semaine et est désormais triple platine. Ce projet est sans doute celui qui,
étrangement, fait le moins l’unanimité dans la carrière légendaire du rappeur. Très
Futur
inspiré du rap américain on y retrouve une utilisation parfois abusive de l’autotune.
Cependant cet album est surement un des plus important pour l’évolution de la
carrière du rappeur car il prend un nouveau tournant musical après cet album.
Projet annoncé presque un an avant sa sortie, le nom du 7ème album fait référence
à son surnom “le Duc”. On peut considérer cet album comme marquant le début
[Link] d’une nouvelle phase dans la carrière du rappeur. En réécoutant Temps Mort on se
rend compte du chemin parcouru depuis les années 2000. Tout semble différent
mais le rappeur conserve son ADN.
Nom de la peinture noire mat de Lamborghini mais faisant également référence au
nom de la déesse grecque de la colère et de la vengeance, Nero Nemesis est le nom
Nero Nemesis du 8ème album du rappeur. On y retrouve le son “Validée” qui est encore présent
dans les playlist d’été ou encore “Pinocchio” qui lance la carrière du rappeur
Damso.
Neuvième et dernier album en date de Booba sorti le 1er décembre 2017. Trône
est encore très écouté presque 3 ans après sa sortie. L’album fait une première
semaine à 61 500 ventes et bat absolument tous les records en rentrant dans
Trône
l’histoire. Disque d’or en moins d’une semaine et triple platine 4 mois après sa
sortie, le projet est actuellement à 480 000 ventes .. bientôt diamant ! (500 000
ventes)
SI28 - P20

(IV) Conclusion

Le projet semblait compliqué à réaliser au départ car il demandait de bonnes

connaissances en développement web alors qu’aucun de nous n’était formé à ce sujet, de plus
Krish étant en branche Ingénierie Mécanique, il n’était pas prédisposé à prendre une place
importante dans ce genre de projet.

Toutefois, nous nous sommes rendu compte en commençant le projet qu’une grande
partie de documentation était nécessaire et qu’il était possible de déléguer certaines parties du
développement même à un débutant en informatique. Nous avons passé la moitié du projet à
nous documenter sur la programmation web et développer l’architecture du site et l’autre moitié
à remplir la (très) longue base de données des morceaux puis à l’implémenter dans le code.

De plus, notre vision du site a beaucoup évolué au fur et à mesure de l’avancement. En effet,
nous voulions initialement faire une vraie frise chronologique année par année mais nous avons
finalement trouvé plus pertinent de regrouper les morceaux par albums, nous avons également
rajouté un album non prévu initialement à la suite d’une demande d’un de nos camarades de
TD (remarque qui était très pertinente). L’architecture du site a aussi beaucoup subi de
changements avant que nous tombions d’accord sur le modèle final.

Enfin, il y a également des choses que nous n’avons pas pu réaliser par manque de
temps mais également à cause du déroulement un peu particulier de ce semestre : nous aurions
voulu améliorer l’esthétique, plus travailler sur les animations ou encore développer une
nouvelle partie du site en incluant un espace « quizz » sur la carrière de l’artiste.

Nous avons beaucoup appris de cette expérience que ce soit en développement de

projet, en programmation informatique et nous avons plus généralement appris à être le plus
efficace possible pour exécuter des tâches répétitives. Même si ce semestre de SI28 a été
particulier nous avons pris un réel plaisir à allier notre passion commune qui est le rap à un
projet dans le cadre scolaire.