Javascript lecteur audio avec visualiseur

Programmation JavaScript
, , , , , ,
1

J ai besoin d aide sur lecteur audio sur web affiche le sons. C est a dire affiche amplitude de son: Barre varie en fonction de niveau de son. Merci

2

Désolé, j’ai pas bien compris ta question, mais je pense que tu cherche de ça: (cliquez sur le bouton Run Pen ci-dessous pour exécuter le code) et pour voir le code source correspondant cliquez sur les onglets HTML, CSS et JS.

3

Bonjour, c est ça mais ça c est compliqué.
J ai voulais juste un batton qui monte et que dessant. J ai volai juste son amplitude varie en fonction de son.
Merci beaucoup

4

Si vous travaillez localement. Créer un fichier par exemple nommée test.php qui contient le code source ci-dessous et mettez le dans le dossier www dans mon cas, j’utilise WampServer, même si le code ne contient pas du code PHP, en fait c’est pour éviter l’erreur Cross-origin resource sharing (CORS). N’oubliez pas de modifier le nom du fichier mp3 « track.mp3 » et mettez-le à coté du fichier test.php.

<!DOCTYPE html>
<html>
<head></head>
<body>
   <body>
     <audio src="track.mp3" id="audio" controls>L'élément HTML5 Audio n'est pas supporté</audio>
     <canvas id="canvas" width="800" height="350"></canvas>
   </body>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;

window.onload = function() {
    var audio = document.getElementById('audio');
    var ctx = new AudioContext();
    var analyser = ctx.createAnalyser();
    var audioSrc = ctx.createMediaElementSource(audio);
    // nous devons connecter le MediaElementSource avec l'analyseur 
    audioSrc.connect(analyser);
    analyser.connect(ctx.destination);
    var frequencyData = new Uint8Array(analyser.frequencyBinCount);

    // nous sommes prêts à recevoir des données !
    var canvas = document.getElementById('canvas'),
        cwidth = canvas.width,
        cheight = canvas.height - 2,
        meterWidth = 10, //largeur du spectre
        gap = 2, //écart
        capHeight = 2,
        capStyle = '#fff',
        meterNum = 800 / (10 + 2), //nombre de pièces
        capYPositionArray = []; 
    ctx = canvas.getContext('2d'),
    gradient = ctx.createLinearGradient(0, 0, 0, 300);
    gradient.addColorStop(1, '#0f0');
    gradient.addColorStop(0.5, '#ff0');
    gradient.addColorStop(0, '#f00');
    // loop
    function renderFrame() {
        var array = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(array);
        var step = Math.round(array.length / meterNum);
        ctx.clearRect(0, 0, cwidth, cheight);
        for (var i = 0; i < meterNum; i++) {
            var value = array[i * step];
            if (capYPositionArray.length < Math.round(meterNum)) {
                capYPositionArray.push(value);
            };
            ctx.fillStyle = capStyle;
            //dessiner le sommet, avec effet de transition
            if (value < capYPositionArray[i]) {
                ctx.fillRect(i * 12, cheight - (--capYPositionArray[i]), meterWidth, capHeight);
            } else {
                ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
                capYPositionArray[i] = value;
            };
            ctx.fillStyle = gradient; 
            ctx.fillRect(i * 12, cheight - value + capHeight, meterWidth, cheight);
        }
        requestAnimationFrame(renderFrame);
    }
    renderFrame();
    audio.play();
};
</script>
</body>
</html>

Voici le résultat:

audio-player