SphinxKnight/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Test Audio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
    <input id="audio-file" type="file" accept="audio/*">Select audio</input>
    <canvas id="graph"></canvas>
    <script src="oscillos.js"></script>
</body>
</html>

## oscillos.js
const inputElement = document.getElementById("audio-file");
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
inputElement.addEventListener("change",gererLeFichier, false);
const analyser = audioCtx.createAnalyser();

function gererLeFichier(){
    // On récupère le fichier sélectionné
    const file = this.files[0];

    // On lit le fichier pour avoir un ArrayBuffer
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);

    // Lorsque la lecture du fichier par le navigateur
    // est terminée l'évènement loaded est déclenché
    // et permet d'utiliser onload
    reader.onload = function(event){
        const arrBuffer = event.target.result;

        audioCtx.decodeAudioData(arrBuffer).then(function(decodedData) {
            const source = audioCtx.createBufferSource();
            source.buffer = decodedData;
            // On crée l'analyseur pour le son :

            analyser.minDecibels = -90;
            analyser.maxDecibels = -10;
            analyser.smoothingTimeConstant = 0.85;

            source.connect(analyser);

            // Si on ne veut pas que le son soit
            // émis sur les hauts-parleurs, on peut
            // éviter de router jusqu'à la destination
            // et commenter la ligne suivante
            analyser.connect(audioCtx.destination);

            // On démarre la lecture
            source.start();
            visualize();
        });

    };
}


function visualize() {
    const canvas = document.getElementById("graph");
    const canvasCtx = canvas.getContext("2d");
    requestAnimationFrame(visualize);
    const WIDTH = canvas.width;
    const HEIGHT = canvas.height;
    analyser.fftSize = 256;
    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

    const bufferLengthAlt = analyser.frequencyBinCount;
    const  dataArrayAlt= new Uint8Array(bufferLengthAlt);
    analyser.getByteFrequencyData(dataArrayAlt);

    canvasCtx.fillStyle = "rgb(0, 0, 0)";
    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

    const barWidth = (WIDTH / bufferLengthAlt) * 2.5;
    let barHeight;
    let x = 0;
    for(let i = 0; i < bufferLengthAlt; i++) {
        barHeight = dataArrayAlt[i];
        canvasCtx.fillStyle = "rgb(" + (barHeight+100) + ",50,50)";
        canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
        x += barWidth + 1;
    }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Test Audio</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
	</head>
	<body>
	<input id="audio-file" type="file" accept="audio/*">Select audio</input>
	<canvas id="graph"></canvas>
	<script src="oscillos.js"></script>
	</body>
	</html>
	const inputElement = document.getElementById("audio-file");
	const audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)();
	inputElement.addEventListener("change",gererLeFichier, false);
	const analyser = audioCtx.createAnalyser();

	function gererLeFichier(){
	// On récupère le fichier sélectionné
	const file = this.files[0];

	// On lit le fichier pour avoir un ArrayBuffer
	const reader = new FileReader();
	reader.readAsArrayBuffer(file);

	// Lorsque la lecture du fichier par le navigateur
	// est terminée l'évènement loaded est déclenché
	// et permet d'utiliser onload
	reader.onload = function(event){
	const arrBuffer = event.target.result;

	audioCtx.decodeAudioData(arrBuffer).then(function(decodedData) {
	const source = audioCtx.createBufferSource();
	source.buffer = decodedData;
	// On crée l'analyseur pour le son :

	analyser.minDecibels = -90;
	analyser.maxDecibels = -10;
	analyser.smoothingTimeConstant = 0.85;

	source.connect(analyser);

	// Si on ne veut pas que le son soit
	// émis sur les hauts-parleurs, on peut
	// éviter de router jusqu'à la destination
	// et commenter la ligne suivante
	analyser.connect(audioCtx.destination);

	// On démarre la lecture
	source.start();
	visualize();
	});

	};
	}


	function visualize() {
	const canvas = document.getElementById("graph");
	const canvasCtx = canvas.getContext("2d");
	requestAnimationFrame(visualize);
	const WIDTH = canvas.width;
	const HEIGHT = canvas.height;
	analyser.fftSize = 256;
	canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

	const bufferLengthAlt = analyser.frequencyBinCount;
	const dataArrayAlt= new Uint8Array(bufferLengthAlt);
	analyser.getByteFrequencyData(dataArrayAlt);

	canvasCtx.fillStyle = "rgb(0, 0, 0)";
	canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

	const barWidth = (WIDTH / bufferLengthAlt) * 2.5;
	let barHeight;
	let x = 0;
	for(let i = 0; i < bufferLengthAlt; i++) {
	barHeight = dataArrayAlt[i];
	canvasCtx.fillStyle = "rgb(" + (barHeight+100) + ",50,50)";
	canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
	x += barWidth + 1;
	}
	}