Soundcloud modifie la couleur de la forme d’onde

Je crée un site Web basé sur soundcloud et j’ai besoin de modifier la couleur de la forme d’onde soundcloud pour qu’elle ressemble à ce qui suit

Comment ça devrait être

J’ai lu dans le blog de soundcloud et il semblait que waveform.js ferait l’affaire mais je reçois toujours quelque chose comme ça

À quoi ça ressemble maintenant

Quelqu’un peut-il me faire savoir comment puis-je obtenir exactement le même effet. J’ai vu sur la page d’accueil soundcloud qu’ils font la même chose en utilisant canvas mais je ne sais pas comment faire exactement cela. La forme d’onde de l’image renvoyée par soundcloud api est la suivante

http://w1.sndcdn.com/1m91TxE6jSOz_m.png

Quelqu’un peut-il me guider de la bonne manière pour y parvenir?

Vous pouvez utiliser une combinaison de mode composite et de découpage pour y parvenir sans parcourir les pixels (ce qui signifie que CORS ne posera pas de problème dans cet exemple):

Violon

Progression de la forme d'onde

Le code essentiel:

En supposant que l’image a été chargée, nous sums prêts pour la configuration de la canvas:

function loop() { x++; // sync this with actual progress // since we will change composite mode and clip: ctx.save(); // clear background with black ctx.fillStyle = '#000'; ctx.fillRect(0, 0, w, h); // remove waveform, change composite mode ctx.globalCompositeOperation = 'destination-atop'; ctx.drawImage(img, 0, 0, w, h); // fill new alpha, same mode, different region. // as this will remove anything else we need to clip it ctx.fillStyle = '#00a'; /// gradient ctx.rect(0, 0, x, h); ctx.clip(); /// set clipping rect ctx.fill(); /// use the same rect to fill // remove clip and use default composite mode ctx.restore(); // loop until end if (x < w) requestAnimationFrame(start); } 

Si vous souhaitez que la forme d'onde "non lue" ait une couleur différente, vous pouvez simplement styler l'élément de la zone de travail avec un background - background .

Si vous intégrez soundcloud à iframe, vous ne pouvez pas le modifier.

N’oubliez pas la stratégie inter-domaines, sinon cela ne fonctionnera pas.