Bonjour, actuellement sur un projet en freelance, j'ai une petite page qui dans le futur va contenir beaucoup de pistes audios et avec une animation de ce genre (voir photo ci-dessous) :

Pour cela, ne sachant pas du tout comment m'y prendre j'ai suivi un tutoriel sur youtube qui datais de 2013 donc obsoléte et j'ai du changer quelques trucs mais dans l'ensemble c'était ok !. Donc pour une piste audio c'est nickel cela fonctionne, mais dans mon cas je vais avoir une 20aines de pistes audios et je ne sais pas du tout comment faire fonctionner le script JS pour toutes les pistes audio. Peut etre avec des boucles créer l'audio le canvas etc. Voici le code HTML :

<div id="mp3_player" class="mp3_player">
  <p class="titre-audio">Titre doublage ici </p>
  <div id="audio_box">
  </div>
  <canvas id="analyser_render">
                                    
  </canvas>
  <p class="description-audio"><span class="letter">L</span>orem, ipsum dolor sit amet consectetur adipisicing elit. Officiis cumque totam ducimus temporibus architecto, tempora animi quae. Facilis laudantium quidem beatae corrupti necessitatibus rem, accusamus officiis consectetur ut adipisci maiores?</
</div>

Voici le code JS associé :

let audio = new Audio();
audio.src = 'maquette/test.ogg';
audio.controls = true;
audio.loop = false;
audio.autoplay = false;

let canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;

function frameLooper()
{
    window.requestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    ctx.clearRect(0,0, canvas.width, canvas.height);
    ctx.fillStyle = "#00CCFF";
    bars = 100;
    for(let i = 0; i < bars; i++)
    {
        bar_x = i*3;
        bar_width = 2;
        bar_height = -(fbc_array[i] / 2);
        
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}

function initMp3Player()
{
    document.getElementById('audio_box').appendChild(audio);
    context = new AudioContext();
    analyser = context.createAnalyser();
    canvas = document.getElementById('analyser_render');
    ctx = canvas.getContext('2d');
    
    source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
}

window.addEventListener("load", initMp3Player, false);

Voila, pour toutes idées ou aides, vous serez la bienvenue !

Merci

UP! personne n'a une idée ?

Ben tu fais un menu déroulant avec tes pistes audio. et quand l'utilisateur séléctionne une piste tu appelles ton script avec en parametre

le nom. et tu le mets dans ton 

audio.src = 'maquette/test.ogg';

-
Edité par floutime 17 juillet 2019 à 19:24:50

Merci de ton aide, cependant une liste déroulante ne vas pas avec les besoins du projets :/, car les pistes audios doivent s'afficher 3 par lignes (il doit y en avoir une vingtaine).