[Résolu] Visualizer audio (Lecture d'un son (au clic) et visualiseur (

Question

CargoBobMan

21 Sep 2022 à 12:12

Bonjour, j'aimerais faire un mix de ces deux codes https://www.youtube.com/watch?v=NWY89IO4w_0&t=1837s&ab_channel=YaoKevin et https://codepen.io/nfj525/pen/rVBaab
Je m'explique, j'aimerais le visuel du codepen avec les barres de couleurs en fonction de la musique mais avec le système de la vidéo youtube où quand on clic ça lance direct sans avoir à sélectionner un fichier. Si quelqu'un peut m'aider car je ne maitrise pas du tout le .js, Merci Smiley biggrin

(Si je ne suis pas clair n'hésitez pas à me demander)

Sûrement quelques chose à modifier dans le .js du coup :


window.onload = function() {
  
  var file = document.getElementById("thefile");
  var audio = document.getElementById("audio");
  
  file.onchange = function() {
    var files = this.files;
    audio.src = URL.createObjectURL(files[0]);
    audio.load();
    audio.play();
    var context = new AudioContext();
    var src = context.createMediaElementSource(audio);
    var analyser = context.createAnalyser();

    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var ctx = canvas.getContext("2d");

    src.connect(analyser);
    analyser.connect(context.destination);

    analyser.fftSize = 256;

    var bufferLength = analyser.frequencyBinCount;
    console.log(bufferLength);

    var dataArray = new Uint8Array(bufferLength);

    var WIDTH = canvas.width;
    var HEIGHT = canvas.height;

    var barWidth = (WIDTH / bufferLength) * 2.5;
    var barHeight;
    var x = 0;

    function renderFrame() {
      requestAnimationFrame(renderFrame);

      x = 0;

      analyser.getByteFrequencyData(dataArray);

      ctx.fillStyle = "#000";
      ctx.fillRect(0, 0, WIDTH, HEIGHT);

      for (var i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i];
        
        var r = barHeight + (25 * (i/bufferLength));
        var g = 250 * (i/bufferLength);
        var b = 50;

        ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
        ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);

        x += barWidth + 1;
      }
    }

    audio.play();
    renderFrame();
  };
};

Bongota

21 Sep 2022 à 13:30

Bonjour,
je n'ai pas la réponse à ta question précise, mais je peux te signaler un scrip simple qui a beaucoup d'options. Celle du lien ci-dessous concerne justement la vidéo.
https://wavesurfer-js.org/example/video-element/index.html
Toutes les options :
https://wavesurfer-js.org/examples/
Tous ces script de visualisation de formes d'onde ne sont que le pâle reflet d'une forme d'onde en temps réel. Dans le meilleur des cas, il reproduisent un instantané, figé, de la forme d'onde du fichier musical, comme SoundCloud, en autres exemples.
Je recherche un script pour mettre sur un site une forme d'onde en temps réel d'un fichier musical. Apparemment, ça ne court pas les rues et je crois que ce serait plutôt complexe à mettre en œuvre.

CargoBobMan

21 Sep 2022 à 13:59

Bongota a écrit :
Bonjour,
je n'ai pas la réponse à ta question précise, mais je peux te signaler un scrip simple qui a beaucoup d'options. Celle du lien ci-dessous concerne justement la vidéo.
https://wavesurfer-js.org/example/video-element/index.html
Toutes les options :
https://wavesurfer-js.org/examples/
Tous ces script de visualisation de formes d'onde ne sont que le pâle reflet d'une forme d'onde en temps réel. Dans le meilleur des cas, il reproduisent un instantané, figé, de la forme d'onde du fichier musical, comme SoundCloud, en autres exemples.
Je recherche un script pour mettre sur un site une forme d'onde en temps réel d'un fichier musical. Apparemment, ça ne court pas les rues et je crois que ce serait plutôt complexe à mettre en œuvre.

Super merci j'essaierai d'intégrer mais bon. N'est-ce pas possible de modifier les lignes du .js pour que au lieu que le fichier soit charger quand on choisit dans nos fichier pc, qu'il soit pré-sélectionner et qu'il soit dans les fichiers du site ? c'est ça que j'aimerais faire car c'est un site public et les gens n'auront pas le fichier mp3..

parsimonhi

Modérateur

21 Sep 2022 à 17:38

Bonjour,

CargoBobMan a écrit :
N'est-ce pas possible de modifier les lignes du .js pour que au lieu que le fichier soit charger quand on choisit dans nos fichier pc, qu'il soit pré-sélectionner et qu'il soit dans les fichiers du site ?

En supposant qu'on a un fichier audio s'appelant xxx.mp3 dans le même dossier que la page contenant ton script, on peut modifier ton code comme suit pour déclencher la lecture d'un morceau stocké sur le serveur. J'ai utilisé un bouton pour déclencher l'action initiale, mais ça pourrait être tout autre chose.

Note : j'ai modifié ton exemple a minima. Je n'ai pas chercher à le rendre plus robuste bien qu'il en ait probablement besoin, en particulier en ce qui concerne la gestion des évènements.

<!doctype html>
<html>
<head>
<style>
#button {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
}

#canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#audio {
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: calc(100% - 20px);
}
</style>
</head>
<body>
<div id="content">
  <input type="button" id="button" value="Click me">
  <canvas id="canvas"></canvas>
  <audio id="audio" controls></audio>
</div>
<script>
window.onload = function() {
  
  var button = document.getElementById("button");
  var audio = document.getElementById("audio");
  
  button.onclick = function() {
    audio.src = "xxx.mp3";
    audio.load();
    audio.play();
    var context = new AudioContext();
    var src = context.createMediaElementSource(audio);
    var analyser = context.createAnalyser();

    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var ctx = canvas.getContext("2d");

    src.connect(analyser);
    analyser.connect(context.destination);

    analyser.fftSize = 256;

    var bufferLength = analyser.frequencyBinCount;
    console.log(bufferLength);

    var dataArray = new Uint8Array(bufferLength);

    var WIDTH = canvas.width;
    var HEIGHT = canvas.height;

    var barWidth = (WIDTH / bufferLength) * 2.5;
    var barHeight;
    var x = 0;

    function renderFrame() {
      requestAnimationFrame(renderFrame);

      x = 0;

      analyser.getByteFrequencyData(dataArray);

      ctx.fillStyle = "#000";
      ctx.fillRect(0, 0, WIDTH, HEIGHT);

      for (var i = 0; i < bufferLength; i++) {
        barHeight = dataArray[i];
        
        var r = barHeight + (25 * (i/bufferLength));
        var g = 250 * (i/bufferLength);
        var b = 50;

        ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
        ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);

        x += barWidth + 1;
      }
    }

    audio.play();
    renderFrame();
  };
};
</script>
</body>
</html>

Amicalement,

CargoBobMan

21 Sep 2022 à 22:30

parsimonhi a écrit :
Bonjour,

En supposant qu'on a un fichier audio s'appelant xxx.mp3 dans le même dossier que la page contenant ton script, on peut modifier ton code comme suit pour déclencher la lecture d'un morceau stocké sur le serveur. J'ai utilisé un bouton pour déclencher l'action initiale, mais ça pourrait être tout autre chose.

Note : j'ai modifié ton exemple a minima. Je n'ai pas chercher à le rendre plus robuste bien qu'il en ait probablement besoin, en particulier en ce qui concerne la gestion des évènements.

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
#button {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
}

#canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

#audio {
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: calc(100% - 20px);
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="content"&gt;
  &lt;input type="button" id="button" value="Click me"&gt;
  &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;audio id="audio" controls&gt;&lt;/audio&gt;
&lt;/div&gt;
&lt;script&gt;
window.onload = function() {
  
  var button = document.getElementById("button");
  var audio = document.getElementById("audio");
  
  button.onclick = function() {
    audio.src = "xxx.mp3";
    audio.load();
    audio.play();
    var context = new AudioContext();
    var src = context.createMediaElementSource(audio);
    var analyser = context.createAnalyser();

    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var ctx = canvas.getContext("2d");

    src.connect(analyser);
    analyser.connect(context.destination);

    analyser.fftSize = 256;

    var bufferLength = analyser.frequencyBinCount;
    console.log(bufferLength);

    var dataArray = new Uint8Array(bufferLength);

    var WIDTH = canvas.width;
    var HEIGHT = canvas.height;

    var barWidth = (WIDTH / bufferLength) * 2.5;
    var barHeight;
    var x = 0;

    function renderFrame() {
      requestAnimationFrame(renderFrame);

      x = 0;

      analyser.getByteFrequencyData(dataArray);

      ctx.fillStyle = "#000";
      ctx.fillRect(0, 0, WIDTH, HEIGHT);

      for (var i = 0; i &lt; bufferLength; i++) {
        barHeight = dataArray[i];
        
        var r = barHeight + (25 * (i/bufferLength));
        var g = 250 * (i/bufferLength);
        var b = 50;

        ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
        ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);

        x += barWidth + 1;
      }
    }

    audio.play();
    renderFrame();
  };
};
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Amicalement,

Merci beaucoup !! ça fonctionne comme je l'imaginais !! MERCI ! je vais le modifier pour ajouter des boutons play pause et mute ! (je vous tiens au jus pour vous dire si j'ai bien réussi !)
Modifié par CargoBobMan (21 Sep 2022 - 22:30)

CargoBobMan

23 Sep 2022 à 16:26

Ceci fonction merci beaucoup.

Sujet clos

JavaScript, DOM et API Web HTML5

[Résolu] Visualizer audio (Lecture d'un son (au clic) et visualiseur (