Audio Web pour visualiser et interagir avec les formes d'onde

Comment puis-je écrire un programme JavaScript pour afficher une forme d'onde d'un fichier audio? Je veux utiliser le Web de l'Audio et de la Toile.

J'ai essayé ce code:

(new window.AudioContext).decodeAudioData(audioFile, function (data) {
   var channel = data.getChannelData(0);
   for (var i = 0; i < channel; i++) {
       canvas.getContext('2d').fillRect(i, 1, 40 - channel[i], 40);
   }
});

Mais le résultat est loin de ce que je veux (à savoir, l'image n'est pas lisse, depuis que je suis de dessin avec des rectangles). Je veux un look lisse comme cette image:

Audio Web pour visualiser et interagir avec les formes d'onde

Tous les conseils sur la façon de mettre en œuvre la forme d'onde?

InformationsquelleAutor katspaugh | 2012-03-01
  1. 9

    Vous pouvez être intéressé par AudioJedit. C'est un projet open source hébergé sur GitHub. Il ont un petit côté serveur node.js script pour le chargement des fichiers audio, mais toutes les interactions avec l'audio mis en œuvre en JavaScript côté client. Je pense que c'est similaire à ce que vous recherchez.

    • Vadim, c'est presque ce que je voulais. Ils ne génèrent pas de forme d'onde graphiques (il est chargé de SoundCloud), mais il est facile d'ajouter avec RealtimeAnalyserNode. Merci beaucoup!
    InformationsquelleAutor Vadim Baryshev
  2. 42

    Lancé ma propre bibliothèque, après tout: wavesurfer.js.

    Il dessine une forme d'onde à partir des données PCM et cherche régions de l'audio en cliquant sur elle.

    Audio Web pour visualiser et interagir avec les formes d'onde

    • Comment puis-je tracer la forme d'onde de locaux des fichiers audio (qui ne sont pas hébergées sur le serveur, mais sont disponibles dans un autre répertoire de mon PC). Est-il possible avec votre js ?
    • oui, il est possible de tracer des fichiers en utilisant le Fichier API (dev.w3.org/2006/webapi/FileAPI).
    • Je suis à l'aide de Cordoue, donc je suppose que je dois utiliser le Fichier API de Cordoue à accéder au fichier, mais comment dois-je passer le fichier audio. Comme un encodées en base64 URl ou comme un Tableau de la mémoire Tampon
    • l'un et l'autre travail, ainsi que d'une Goutte.
    • merci une tonne . Je voudrais l'essayer et de vous en informer. Je vous suggère de document de la même manière sur votre GitHub ainsi
    • Pour quelque étrange raison, je ne peux pas obtenir la démo pour charger le fichier audio lorsque le chargement de la page, mais quand son glissés et déposés dans un blob, il fonctionne

    InformationsquelleAutor katspaugh
  3. 2

    Pour un (espérons) simple d'utilisation et l'intégration d'une forme d'onde avec votre application, vous pouvez vouloir vérifier ce que nous faisons à l'IRCAM, spécialement la forme d'onde-vis, dans ce cas particulier.

    Tout est open source et qui visent pour la modularité (travaux en cours)

    Vous pouvez trouver un démo ici

    Et le correspondant githug référentiel

    • Sympa, merci!
    • Upvote pour peluche git =D
    • Les deux liens sont en 404.
    InformationsquelleAutor vectorsize
  4. 0

    Rendre votre code est extrêmement inefficace, parce que cela va rendre 44100 pixels pour chaque seconde de l'audio. Vous voulez de préférence rendre à la plupart de la fenêtre d'affichage de la largeur avec un ensemble de données réduit.

    La par pixel marge d'échantillon nécessaires pour s'adapter à la forme d'onde dans la fenêtre d'affichage peut être calculé avec audioDurationSeconds * taux d'échantillonnage /viewPortWidthPx. Donc, pour une fenêtre de 1000px et un fichier audio de 2 secondes à la fréquence d'échantillonnage de 44100 échantillons par pixel = (2 * 44100) /1000 = ~88.
    Pour chaque pixel de l'écran vous prendre les valeurs min et max à partir de cet échantillon de la gamme, vous utilisez ces données pour dessiner la forme d'onde.

    Voici un exemple d'algorithme qui fait cela, mais permet de donner les échantillons par pixel comme argument ainsi que la position de défilement pour permettre virtuel de défilement et de zoom. Il comprend un paramètre de résolution, vous pouvez tweak pour la performance, indique le nombre d'échantillons, il doit prendre par pixel exemple de la gamme:
    Dessin zoomable forme d'onde audio montage en Javascript

    La méthode de tirage, il est semblable à la vôtre, afin de la lisser, vous devez utiliser lineTo au lieu de fillRect.Cette différence ne devrait pas être énorme, je pense que vous avez peut-être oublier de définir les attributs width et height sur la toile. La définition de cette css causes flou de dessin, vous devez définir les attributs.

    let drawWaveform = function(canvas, drawData, width, height) {
   let ctx = canvas.getContext('2d');
   let drawHeight = height / 2;

   //clear canvas incase there is already something drawn
   ctx.clearRect(0, 0, width, height);

   ctx.beginPath();
   ctx.moveTo(0, drawHeight);
   for(let i = 0; i < width; i++) {
      //transform data points to pixel height and move to centre
      let minPixel = drawData[i][0] * drawHeigth + drawHeight;
      ctx.lineTo(i, minPixel);
   }
   ctx.lineTo(width, drawHeight);
   ctx.moveTo(0, drawHeight);
   for(let i = 0; i < width; i++) {
      //transform data points to pixel height and move to centre
      let maxPixel = drawData[i][1] * drawHeigth + drawHeight;
      ctx.lineTo(i, maxPixel);
   }
   ctx.lineTo(width, drawHeight);
   ctx.closePath();
   ctx.fill(); //can do ctx.stroke() for an outline of the waveform
}
    InformationsquelleAutor David Sherman