web-dev-qa-db-fra.com

Comment créer un visualiseur pour lecteur audio

Il existe de nombreux lecteurs de musique, même les lecteurs audio HTML5, mais comment puis-je leur ajouter un égaliseur? Par égaliseur, je veux dire ceci: image(lien OP vers une image de visualisation audio)

Une idée comment l'ajouter à un lecteur de musique?

Merci d'avance

javascriptjqueryhtml5html5-audiomusic-player
13
Alex

Web Audio API est un outil javascript très utile. Le site Web suivant montre un exemple de visualisation audio avec cette API:

http://css.dzone.com/articles/exploring-html5-web-audio

8
Dylan Kay

Eh bien, peut-être qu'il est trop tard, mais peut toujours aider n'importe qui.

Si vous voulez simplement visualiser le spectre, alors ce n'est pas grave.

Tout d’abord, créez votre AudioContext, puis analysez-le.

Ajoutez un remplisseur ou un noeud de gain, si vous le souhaitez, puis connectez-les en conséquence (c’est-à-dire un à un autre, puis un autre pour durer). Enfin, connectez votre destination audio.

exemple de code:

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');



// here we create our chain
var audio = document.querySelector('audio'),
    audioContext = new AudioContext(),
    source = audioContext.createMediaElementSource(audio),
    analyser = audioContext.createAnalyser();

source.connect(analyser);
analyser.connect(audioContext.destination);

setInterval(function(){
  var freqData = new Uint8Array(analyser.frequencyBinCount);

      analyser.getByteFrequencyData(freqData);

      ctx.clearRect(0, 0, width, height);

      for (var i = 0; i < freqData.length; i++ ) {
        var magnitude = freqData[i];
        ctx.fillRect(i*1.5, height, 1, -magnitude * 2);
      }
 }, 33);

Quelque chose comme celui-ci. Cependant, vous devez être conscient des changements rapides de cette API (c’est pourquoi de nombreux exemples d’API audio Web ne fonctionnent pas correctement).

J'ai créé un lecteur de musique simple avec un égaliseur, vous pouvez le vérifier ici . Vous devez commencer par rechercher quelque chose (même une ligne vierge est ok), puis démarrer la musique - la toile est en bas.

17
Bloomca

Maintenant, il est partiellement pris en charge par les navigateurs. Vous pouvez utiliser API Web Audio pour Google Chrome et les nouveaux safari et Audio Data API pour Firefox.

1
Alexandr Subbotin

À propos, voici un exemple de code réalisant un égaliseur visuel: http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs .

0
cwilso