Audio Web

var ind_tab = 0;
var width, height;
var isPlaying = false;
var circles = [];
var max = 256;

$('document').ready(function () {

    var player = document.getElementById('player');

    // gestion progression
	width = 360;
    height = 360;

    //max width cirle//
    var circleMaxWidth = (width * 0.66) >> 0;

    circlesEl = document.getElementById('circles');
     // gestion progression
    var nivBar = 0;

    //initialisation de la valeur de la progress bar
    var proBar = document.getElementById('barre');

    initialized = true;

    //initialisation de la valeur de la progress bar
    //var proBar = document.getElementById('barre');
    proBar.value = 0;

    // initialisation d un contexte audio pour analyser le son
    var ctx = new AudioContext();
    var source_audio = ctx.createMediaElementSource(player);


    var analyseur = ctx.createAnalyser();

    // on fait le lien entre la source et l'analyseur
    source_audio.connect(analyseur);

    source_audio.connect(ctx.destination);
    // pour récuperer les fréquences
    var frequencyData =  new Uint8Array(analyseur.frequencyBinCount);

    count = analyseur.frequencyBinCount;

    //creation des noeuds de frequence//
    for (var i = 0; i < count; i++) {

                var node = document.createElement('div');
                node.style.width = node.style.height = (i / count * circleMaxWidth) + 'px';
                node.classList.add('circle');
                circles.push(node);
                circlesEl.appendChild(node);

            }
    // initialisation pour le dessin
    canvas = document.getElementById('dessin_freq');
    //ctx_dessin = canvas.getContext('2d');

    // fonction pour faire avancer la barre de progression
    player.ontimeupdate = function () {
        if (player.currentTime < player.duration) {
            nivBar = Math.trunc(player.currentTime * 100 / player.duration);
            proBar.value = nivBar;
        } else {
            proBar.value = 0;
        }
    };

    // fonction pour jouer le son
    $('#joue').on('click', function (e) {
        e.preventDefault();
        player.play();
        player.volume = 0.5;
        isPlaying = true;
        running = true;
                window.requestAnimationFrame(lit_freq);

    }
    );

    // fonction pour faire une pause dans le son
    $('#pause').on('click', function (e) {
        e.preventDefault();
        player.pause();
        isPlaying = false;
        console.log("pause");
    }
    );

    // fonction pour arreter la lecture
    $('#stop').on('click', function (e) {
        e.preventDefault();
        player.pause();
        player.currentTime = 0;
        proBar.value = 0;
        isPlaying = false;
    }
    );

    // fonctions pour gérer le volume
    $('.volume').on('click', function (e) {
        //e.preventDefault();
        var niv_vol = Math.abs((e.offsetX / $(this).width()));
        player.volume = niv_vol.toFixed(2);
        // j'agis sur l'element suivant le input = le span        
        $(this).next().text(Math.round((e.offsetX / $(this).width()) * 100));
    }
    );

    var renderFrame = function(frequencyData) {
          
                var circle = circles[ind_tab];
                circle.style.cssText = '-webkit-transform:scale(' + ((frequencyData[ind_tab ] / max)) + ')';
            
        };

    // fonction pour lire et afficher la frequence
    var lit_freq = function () {

        var xDepart = 5;

        analyseur.getByteFrequencyData(frequencyData);

        renderFrame(frequencyData);

        // j efface desssins précedents
        //canvas.width = canvas.width;
       
            	// no need to store this anywhere, the reference is enough
                //destroy circle...

        	//frequences en bar//
            // il y a 1023 colonnes dans le tableau frequence, 
            // j'affiche tous les multiples de 10 jusqu'à 1000
            /**if ((i % 10) === 0) {
                var pasY = frequence[ind_tab, i];
                var yFin = yfixe - pasY;

                // pose le crayon à y fixe et x toujours décalé vers la droite (addition)
                /**ctx_dessin.beginPath();
                ctx_dessin.moveTo(xDepart, yfixe);
                //prépare ligne jusqu'à même position x mais y fixe - la valeur de la fréquence
                ctx_dessin.lineTo(xDepart, yFin);
                ctx_dessin.strokeStyle= "#c4c4c4";
                ctx_dessin.lineWidth="20";

                // dessine
                ctx_dessin.stroke();

                xDepart = xDepart + pasX;**/
            
        

        ind_tab++;
        if (isPlaying) {
            window.requestAnimationFrame(lit_freq);
        }
        
   }

  

});