Ismaël GUNANTO
DA & Production phonographique
DA & Production phonographique
Expérience interactive et développement web
Ce projet s’inscrit dans le cadre d’une Situation d’Apprentissage et
d’Évaluation (SAE) réalisée au cours de la troisième année de BUT MMI
à l’Université de Toulon, entre décembre 2025 et mai 2026. L’objectif
était de concevoir une expérience immersive et interactive de
médiation culturelle autour d’un courant artistique ou d’un artiste.
Dans ce cadre, j’ai choisi de développer un jeu vidéo web
centré sur l’univers du grunge et sur le métier de producteur
phonographique. Ce choix s’inscrit dans une volonté de valoriser une
approche artistique de la musique, en mettant en avant les processus
de création plutôt que le simple résultat final. Le projet vise ainsi
à proposer une expérience à la fois ludique et pédagogique, permettant
à l’utilisateur de comprendre les enjeux artistiques et techniques
liés à la production musicale.
Le développement du projet
a été réalisé individuellement, en mobilisant des compétences en
direction artistique, production audiovisuelle et développement web.
L’ensemble du dispositif a été conçu comme une expérience interactive
complète, combinant narration, interactivité et création multimédia.
Ce projet consiste en la création d’une expérience interactive prenant
la forme d’un jeu vidéo web, visant à plonger l’utilisateur au cœur
d’une séance d’enregistrement en studio. L’objectif est de proposer
une forme de médiation culturelle autour du grunge et du métier de
producteur phonographique, en donnant à voir et à expérimenter les
mécanismes de création musicale.
L’expérience repose sur un système de construction progressive
d’un morceau à partir de stems superposables (batterie, basse,
guitare, voix). L’utilisateur est amené à faire des choix à chaque
étape clé de la production : tempo, riff, section rythmique, ligne de
basse, puis interprétation vocale. Ces choix s’organisent sous la
forme d’un arbre de décisions, structuré par un algorithme, permettant
de générer plusieurs combinaisons musicales cohérentes. Chaque
décision influence directement la direction artistique du morceau,
mettant en évidence l’impact de paramètres simples sur l’identité
sonore finale.
Pour enrichir cette exploration, le projet s’appuie sur
différentes références issues de la scène grunge, notamment des
groupes comme Nirvana, Soundgarden, Alice in Chains et The Smashing
Pumpkins. Ces influences permettent de proposer plusieurs directions
artistiques, chacune caractérisée par des choix sonores spécifiques,
tout en restant dans une esthétique globale cohérente.
L’expérience intègre également une dimension narrative :
l’utilisateur est guidé par des échanges avec les musiciens et
l’ingénieur du son, qui accompagnent la progression de la session.
Cette médiation par le dialogue permet de transmettre des
connaissances de manière progressive et contextualisée, en lien direct
avec les choix effectués.
Sur le plan formel, le projet combine des séquences animées
réalisées sous Blender, représentant l’environnement du studio, et une
interface interactive qui permet au joueur d’agir sur le déroulement
de l’expérience. Cette alternance entre vidéo et interaction renforce
l’immersion tout en structurant le gameplay.
En combinant approche ludique, narration interactive et
manipulation directe des éléments musicaux, le projet propose une
manière accessible de comprendre comment se construit un morceau. Il
invite l’utilisateur à ne plus seulement écouter la musique, mais à en
expérimenter activement les logiques de fabrication.
AC12.01 – Conception d’un dispositif interactif • AC14.03 – Logique algorithmique et gestion des combinaisons
La direction artistique du projet s’inscrit dans une volonté de
retranscrire fidèlement l’esthétique du grunge, tout en la rendant
lisible et exploitable dans une expérience interactive. Elle repose
sur un équilibre entre brutalité visuelle, spontanéité et immersion
dans l’univers du studio d’enregistrement.
Un travail de moodboard a permis de poser les bases
graphiques du projet, en s’appuyant sur des références issues de la
scène grunge, notamment autour de groupes comme Nirvana ou Alice in
Chains. L’esthétique recherchée s’inspire de leur univers visuel : un
style volontairement négligé, des silhouettes marquées (cheveux longs,
vêtements amples), et une ambiance globale brute et organique.
Cette intention se traduit graphiquement par l’utilisation
de dessins au crayon aux traits nerveux, donnant une sensation
d’énergie et d’instabilité. Les éléments visuels ne cherchent pas la
perfection, mais au contraire une forme d’irrégularité contrôlée, en
cohérence avec les valeurs du grunge. Les typographies faites à la
main participent à cette approche, en renforçant l’aspect humain et
spontané du projet, loin des standards trop lisses du design numérique
classique.
L’intégration de textures papier vient appuyer
cette direction en apportant de la matière et une dimension presque
tactile à l’interface. Ces textures permettent de créer un contraste
avec les éléments numériques et renforcent l’idée d’un projet ancré
dans une démarche artisanale.
L’univers du studio
d’enregistrement constitue un autre pilier de la direction artistique.
Les éléments de décor — racks, consoles, amplificateurs, instruments —
sont intégrés dans les animations et les interfaces afin de situer
clairement l’action. Ce choix permet de renforcer l’immersion et de
donner du sens aux interactions proposées à l’utilisateur, en les
inscrivant dans un environnement crédible. Enfin, cette direction
artistique est pensée en cohérence avec le fonctionnement du projet :
les phases animées réalisées sous Blender permettent de poser une
ambiance visuelle forte, tandis que l’interface conserve une certaine
simplicité pour garantir la lisibilité du gameplay. L’ensemble vise à
créer une expérience cohérente où l’esthétique ne se limite pas à un
habillage, mais participe pleinement à la compréhension et à
l’immersion dans le processus de création musicale.
Exemple : Moodboard du projet
AC13.02 – Direction artistique • AC13.03 – Production graphique • AC33.01 – Démarche artistique personnelle
La production visuelle du projet repose sur un processus hybride
mêlant techniques traditionnelles et outils numériques, afin de
conserver une esthétique brute tout en permettant une intégration
fluide dans un environnement interactif.
La première étape a consisté en la création graphique des
éléments visuels : décors, personnages et objets (instruments,
matériel de studio, interfaces). Ces éléments ont été réalisés à la
main sous forme de dessins au crayon, en cohérence avec la direction
artistique définie. Les dessins ont ensuite été photographiés, puis
retravaillés sur Photoshop à travers un travail de découpage, de
détourage et d’ajout de textures papier, afin d’harmoniser l’ensemble
et de renforcer l’aspect organique.
Une fois ces éléments
préparés, ils ont été intégrés dans un environnement 3D via Blender.
Le décor a été construit selon une logique de juxtaposition de
surfaces 2D dans un espace 3D, permettant de simuler de la profondeur
tout en conservant l’aspect graphique initial. Cette méthode offre un
bon compromis entre richesse visuelle et légèreté technique.
L’animation a ensuite été réalisée en plusieurs étapes.
Les personnages ont été animés dans Blender, notamment pour les
mouvements de corps et les déplacements dans l’espace. Les expressions
faciales (mouvements de bouche, sourcils) ont été traitées séparément
sur Krita, afin d’obtenir un rendu plus précis et expressif, puis
réintégrées dans les scènes. Un travail spécifique a également été
mené sur les mouvements de caméra, pour dynamiser les plans et
renforcer l’immersion dans l’univers du studio.
Les
différentes scènes ont ensuite été exportées sous forme de plans
animés, puis assemblées dans Premiere Pro. Le montage a été structuré
en plusieurs séquences correspondant aux étapes du gameplay
(introduction, tempo, guitare, batterie, basse, voix, mix, outro).
Cette organisation permet de créer des modules vidéo cohérents,
facilement intégrables dans l’application interactive.
L’ensemble de ce processus vise à produire une expérience
visuelle immersive, où chaque élément — du trait initial jusqu’au
montage final — participe à la cohérence artistique et au bon
déroulement de l’interaction.
AC13.04 – Production multimédia • AC23.05 – Intégration de médias • AC24.01 – Développement d’un dispositif interactif
La production musicale du projet repose sur une approche à la fois
structurée et modulaire, pensée pour s’adapter aux contraintes de
l’interactivité. L’idée de départ était d’utiliser une seule
progression d’accords commune, déclinée en plusieurs interprétations
caractéristiques du grunge, afin de permettre une recomposition
dynamique du morceau en fonction des choix de l’utilisateur.
Quatre directions artistiques distinctes ont ainsi été
définies, chacune inspirée de stéréotypes du genre, avec des
variations au niveau du tempo, des textures de guitare, des
rythmiques, des lignes de basse et de l’interprétation vocale. Ces
quatre versions constituent une base cohérente, pensée pour pouvoir
être fragmentée en stems indépendants (batterie, basse, guitare) tout
en restant compatibles entre elles. L’ensemble fonctionne comme un
système modulaire, où les éléments peuvent s’assembler librement, à la
manière d’un puzzle sonore.
La phase de production a
impliqué un travail de composition, d’enregistrement et de MAO. Les
différentes parties instrumentales et vocales ont été enregistrées
puis ajustées avec une attention particulière portée au timing, afin
de garantir une synchronisation parfaite entre les stems, quelle que
soit leur combinaison.
Un travail de mixage a ensuite été
réalisé sur chaque piste, en mobilisant des outils tels que la
compression, l’égalisation, la saturation ou la reverb, dans le but
d’obtenir un rendu homogène tout en conservant les spécificités de
chaque style. Cette étape était essentielle pour assurer la cohérence
globale du projet, malgré la multiplicité des combinaisons possibles.
Les pistes ont ensuite été exportées individuellement,
puis recombinées pour générer l’ensemble des variantes du morceau. Au
total, 16 combinaisons ont été produites, correspondant aux
différentes possibilités offertes par le système interactif.
En parallèle, des voix dédiées à la narration et aux
dialogues ont été enregistrées, mixées puis exportées, afin
d’accompagner l’utilisateur dans sa progression. L’ensemble de ce
processus vise à proposer une expérience sonore fluide et cohérente,
où la modularité technique sert directement l’exploration artistique.
AC14.02 – Développement web • AC24.03 – Interactions utilisateur • AC24.05 – Optimisation des performances
Le développement du projet repose sur la mise en place d’une structure
interactive permettant de relier les différents médias produits
(vidéos, images, sons) au sein d’un parcours utilisateur cohérent.
L’expérience est construite autour d’un arbre de choix, qui guide la
progression tout en laissant une part de liberté à l’utilisateur.
La structure globale suit une logique séquentielle,
alternant entre phases narratives et interactions : une vidéo
d’introduction pose le contexte, suivie d’une série d’étapes
correspondant aux éléments de la production musicale (tempo, guitare,
batterie, basse, voix). Chaque étape est introduite par une vidéo,
puis suivie d’un choix interactif influençant la suite de
l’expérience. Une fois ces étapes complétées, l’utilisateur accède à
un mode libre, lui permettant de modifier l’ensemble de ses choix
avant de déclencher un export final, matérialisé par une vidéo de mix
puis une outro.
Le développement technique s’appuie sur un
socle simple en HTML, CSS et JavaScript. Le HTML structure les
différentes sections de l’application, tandis que le CSS reste
volontairement minimal, la majorité de l’identité visuelle étant
portée par les images et vidéos issues de la production visuelle. Le
JavaScript joue un rôle central en assurant la logique interactive :
gestion des choix, navigation dans l’arbre décisionnel, déclenchement
des médias et mise à jour dynamique de l’interface.
L’ensemble des contenus (vidéos, pistes audio, éléments
graphiques) a ensuite été assemblé et intégré dans l’application, avec
une attention particulière portée à la fluidité de navigation et à la
cohérence entre les différentes étapes.
Dans une logique
d’efficacité et d’optimisation du temps de production, certains
scripts ont été générés avec l’aide de ChatGPT, à partir d’une
conception préalable clairement définie. Ces bases ont ensuite été
modifiées et ajustées manuellement, afin de répondre précisément aux
attentes du projet, corriger certains comportements et affiner les
interactions. Cette approche hybride a permis de gagner en rapidité
tout en conservant une maîtrise du fonctionnement global de
l’application.
AC14.02 – Développement web • AC24.03 – Interactions utilisateur • AC24.05 – Optimisation des performances
La narration du projet a été pensée comme un fil conducteur permettant
de donner du sens à l’expérience interactive, tout en accompagnant
l’utilisateur dans la découverte du processus de création musicale.
Une première phase d’écriture a permis de poser les bases du projet à
travers une prémisse, une note d’intention, ainsi que des synopsis
courts et longs, définissant le cadre narratif et les enjeux de
l’expérience.
L’écriture s’est ensuite concentrée sur les dialogues, qui
jouent un rôle central dans la médiation culturelle. Les échanges avec
les musiciens et l’ingénieur du son permettent de guider l’utilisateur
à chaque étape, en apportant des informations contextualisées sur les
choix à effectuer. Cette approche permet d’intégrer des contenus
pédagogiques de manière fluide, directement liés à l’action, plutôt
que sous forme de contenus explicatifs isolés.
En
parallèle, un travail spécifique a été mené sur les textes d’interface
(UI), afin de garantir une bonne compréhension des interactions.
Chaque élément textuel a été pensé pour être à la fois clair, concis
et cohérent avec l’univers du projet, en évitant une sur-explication
qui viendrait nuire à l’immersion.
La conception UX repose
sur une volonté de proposer une expérience accessible et progressive,
structurée par l’arbre de choix. L’utilisateur est guidé étape par
étape, tout en conservant une liberté de décision sur les éléments
musicaux. Le passage à un mode libre en fin de parcours permet
d’approfondir l’exploration, en offrant la possibilité de modifier
l’ensemble des paramètres avant la finalisation.
Enfin, la
conception des interfaces s’inscrit dans la continuité de la direction
artistique : elles sont pensées comme des espaces d’interaction
simples et lisibles, venant s’intégrer naturellement aux séquences
vidéo. L’objectif est de trouver un équilibre entre immersion
narrative et efficacité d’usage, afin que l’interface accompagne
l’expérience sans jamais en détourner l’attention.
AC21.04 – Expérience utilisateur • AC23.04 – Storytelling • AC22.01 – Conception d’un dispositif narratif
La gestion du projet s’est appuyée sur la méthode AGILE, permettant
d’organiser efficacement les différentes phases de production tout en
conservant une certaine flexibilité. Cette approche était
particulièrement adaptée à la nature du projet, qui combine plusieurs
domaines (audio, visuel, développement, narration) nécessitant une
coordination constante.
Une première étape a consisté à établir une liste
exhaustive des tâches à réaliser, en les classant par domaines :
production audio, vidéo, animation, dessin, direction artistique, UX,
développement, etc. Cette structuration a permis d’avoir une vision
globale du projet et d’identifier les dépendances entre les
différentes étapes.
Le travail a ensuite été organisé en
sprints, chacun correspondant à une phase spécifique de la création
(conception, production visuelle, production musicale, développement,
intégration). Ce découpage a permis de se concentrer sur des objectifs
précis à court terme, tout en assurant une progression continue du
projet.
Pour optimiser ce processus, certains outils
d’aide à l’organisation ont été mobilisés, notamment ChatGPT, utilisé
pour générer rapidement des tableaux de planification, des listes de
tâches structurées et des synthèses. Ces éléments ont ensuite été
centralisés et ajustés dans des documents de travail, notamment via
Google Docs, facilitant le suivi et la mise à jour des informations
tout au long du projet.
Cette organisation a permis de
maintenir une cohérence globale malgré la diversité des tâches, tout
en favorisant une gestion du temps efficace. Elle a également
contribué à structurer la production de manière professionnelle, en se
rapprochant de méthodes utilisées dans des contextes réels de gestion
de projet multimédia.
AC25.01 – Gestion de projet • AC35.01 – Pilotage d’un projet complexe
La réalisation de Grunge Experience m’a permis de mener un projet
complet, de la conception à la mise en ligne, en passant par la création
graphique, l’animation, la production musicale et le développement web.
Cette approche pluridisciplinaire m’a amené à travailler sur l’ensemble
de la chaîne de production d’une expérience interactive, tout en
maintenant une cohérence artistique entre les différents médias
utilisés.
Le projet présente néanmoins plusieurs limites. Certaines animations
restent perfectibles, notamment la synchronisation entre les mouvements
des personnages et les éléments sonores ou vocaux. L’optimisation
générale du site pourrait également être améliorée afin de réduire les
temps de chargement et de garantir une expérience plus fluide sur des
connexions moins performantes. Enfin, la version application développée
avec Electron reste encore instable sur certains aspects de l’interface
et nécessiterait davantage de temps de test et de correction pour
atteindre un niveau de fiabilité équivalent à la version web.
Malgré ces difficultés, ce projet a constitué une importante montée en
compétence. Sur le plan technique, il m’a permis d’approfondir mes
connaissances en JavaScript et de mieux comprendre la logique de
développement d’une application interactive. J’ai également renforcé mes
compétences en intégration web, en animation 3D, en montage vidéo, en
production audio et en optimisation de workflow entre plusieurs
logiciels.
Au-delà des compétences techniques, ce projet m’a surtout appris à gérer
un processus de production complexe sur une durée relativement courte.
J’ai dû anticiper les contraintes des étapes suivantes dès la phase de
conception, organiser efficacement mes ressources, établir des priorités
et faire des arbitrages pour respecter les délais. Cette expérience m’a
permis de développer une approche plus méthodique de la gestion de
projet et une meilleure compréhension des liens entre direction
artistique, contraintes techniques et expérience utilisateur.
Avec davantage de temps, les prochaines évolutions porteraient
principalement sur l’amélioration des animations, une meilleure
synchronisation audio-visuelle, l’optimisation des performances, l’ajout
de contenus plus variés et une compatibilité renforcée sur l’ensemble
des navigateurs et supports.