Au secours ??

Bonjour, voici un page sur laquelle je liste tous les points de doutes et les problèmes que je rencontre en travaillant sur le projet de diplôme, dans l'espoir que quelqu'un (Corentin ou Julien au vu de la technicité de la plupart des points) puisse peut-être m'éclairer.

Sommaire :

• Accès aux fichiers sur Ateliers.web
• PHP ou Python ???
• Infinite Canvas & Node/Three.js
• Waveforms & navigateurs

Ateliers web

En mettant en ligne la template Spore sur les Ateliers Web, je me suis rendu compte que toute la partie audio était cassée.
"Le « Content-Type » HTTP « text/html » n’est pas géré. Le chargement de la ressource média url_ateliers_web_etc a échoué"

Il me semble que c'est parce que dans le JS, les fichiers mp3 sont récupérés comme ça : "url": "../sounds/XXXXX.mp3"
J'ai besoin de remonter dans l'arborescence puisque le fichier JS est dans un dossier js/script.js, ça marche en local et sur Herd mais pas en ligne.

Selon l'erreur, le navigateur cherche le fichier ici : ......../5dgm/lelio/sounds/GENESE.mp3

L'adresse devrait être : ......../5dgm/lelio/spore/sounds/GENESE.mp3

Maxime disait que ça lui était déjà arrivé sur les Ateliers Web à cause d'une protection qui empêche de remonter dans l'arborescence(??), mais honnêtement c'est possible que l'erreur soit très très bête et vienne de moi.......

so weird. Le chemin vers les fichiers devrait être déterminé depuis la page HTML. Soit "url": "sounds/GENESE.mp3".
Il faudrait par ailleurs que tu normalises (→ slugify) les noms de fichiers "JETLAG (feat. NeS).mp3" → "jetlag--feat.-nes-.mp3" (une bibliothèque python fait ça : python-slugify)

PHP ou Python

Maintenant que la template Psilo est construite (cf dernière question plus bas), il faut que je passe à la partie accumulation d'images. Je sais positionner des images aléatoirement quand elles sont intégrées directement dans le HTML, mais quand il faut les récupérer depuis un dossier c'est différent.

Je voulais juste avoir une discussion/confirmation à ce sujet avant de me lancer là-dedans : est ce qu'il vaudrait mieux utiliser PHP pour injecter les images dans le HTML avec une boucle foreach, ou le faire directement en python avec une boucle qui dupliquerait une balise img pour chaque image dans le dossier ?
Même question pour l'ajout de div pour chaque track (pour chaque fichier mp3 -> dupliquer la div track "modèle"), et chaque album sur la page index (pour chaque dossier -> dupliquer la div release "modèle").

Ma réponse actuellement, confirmez moi si c'est la bonne piste :
Je suis presque sûr que pour les images ce sera du PHP, parce que ça intervient au chargement de la page, et que ça n'a pas vraiment d'intérêt de créer les balises img directement dans le fichier HTML.
Par contre pour les div il vaudrait mieux le faire en Python pour que ce soit plus facile pour les utilisateur·ices de s'y retrouver et de faire des modifications dans le HTML une fois la page générée.

À priori, tout en python !

ça n'a pas vraiment d'intérêt de créer les balises img directement dans le fichier HTML

Si, bien au contraire ! Tu ne veux pas rendre dépendant tes artistes de PHP et ça te permet d’écrire un fichier HTML stable, complet, fini
Tu peux aussi vouloir les écrire dans une variable js (mais toujours en python :)

https://radicalweb.design/ressources/python/files/#lister-le-contenu-dun-dossier

Infinite canvas

Pour essayer de reproduire l'effet sur une template, j'ai téléchargé cet exemple. MAIS c'est une architecture Node.js, donc j'y connais + comprends rien de rien, alors j'ai vite abandonné. Pour l'instant c'est en stand by en attendant de chercher si d'autres solutions similaires existent en JS simple.

c’est surtout écrit en TypeScript avec React. Et ça, c’est le mal…

(28/04 : J'ai rdv avec Corentin demain pour en discuter et fouiller du côté de Three.js)

une solution three js sera lourde aussi, mais ça semble une bien meilleure option.
Demo time !: https://ateliers.esad-pyrenees.fr/stolon/inertia-creeps

Cauchemardesque

Waveforms

Sur la template Psilo, les morceaux affichent leur spectre audio grâce à la fonction "waveforms" de AmplitudeJS qui crée un SVG.
La première fois que la waveform est créée, elle est mise en cache (où, aucune idée, la doc le précise pas) pour ne pas à être recréée à chaque rechargement de la page.

Sur Firefox

Sur Chrome

Ça marche nickel sur Chrome & Edge (y'a un problème d'affichage du background sur la progress bar, c'est pour ça qu'elle s'affiche en gris, mais c'est un autre problème).

Malheureusement pas sur Firefox, je crois que c'est à cause des règles de chargement/lecture automatique sur les navigateurs.
Je cite l'alerte : "Un AudioContext n’a pas pu démarrer automatiquement. Il doit être créé ou repris après un geste de l’utilisateur sur la page." et je suppose que c'est ça qui empêche l'audio d'être analysé et la waveform créée.
J'ai essayé de créer un AudioContext en JS et de le relancer au clic sur la page, ça "marche", le context affiche "running" dans la console, mais les waveforms ne se créent pas pour autant.
Pendant mes tests j'ai réussi à en générer 2, mais j'ai absolument AUCUNE idée de comment c'est arrivé, et maintenant elles sont là et marchent à chaque fois.

J'ai envoyé un message sur le Discord de ServerSideUp / AmplitudeJS pour poser la question mais pas encore de réponse, ça a plus l'air d'être très actif là bas :(

=> la solution à ça serait de pre-load les audios (suggéré par Corentin), donc pouvoir afficher les waveforms et aussi les temps de durée des morceaux qui actuellement ne s'affichent que quand un morceau est actif (sinon c'est 00:00).
Pour l'instant c'est flou je vois pas trop comment faire donc je le laisse de côté et je pars sur autre chose.