Dot.Blog

[new:15/10/2010]Paradoxalement le son et l’image sont les parents pauvres de Silverlight. Certes il y a le MediaElement ou la nouvelle classe WriteableBitmap, mais on est encore loin du compte…

Son et Image sont les mamelles d’une application Web réussie

Silverlight est un outil fantastique qui n’arrête pas d’évoluer, mais quand on prend un peu de recul et qu’on y regarde de plus près tout ce qui concerne le son et l’image est encore d’un niveau assez faible. Comment contourner ces problèmes et pourquoi tant insister sur ce qui n’est finalement pour beaucoup que “gadgetisation” des applications ?

C’est que les mêmes disaient exactement la même chose lors de l’apparition des écrans couleurs, le mode CGA des premiers IBM PC dans les années 80, alors que personne aujourd’hui n’accepterait de travailler sur un écran vert… Ne pas savoir faire la différence entre simple mode et évolution inéluctable est gênant dans notre métier résolument tourné vers l’avenir…

L’ajout très récent de WriteableImage dans Silverlight pour manipuler des bitmaps est presque un joke, il faut tout programmer, c’est vraiment du brut de chez brut. Inutilisable sans y consacrer des heures de développement supplémentaire. Mais l’image n’est pas mon propos aujourd’hui. C’est le son.

Car son et image sont les mamelles d’une application réussie… Regardez les belles applications faites en Flash et vous verrez de nombreux effets visuels très riches, très réussis. Bien entendu le Design général est essentiel, bien entendu les fonctionnalités sont la base même d’une bonne (ou mauvaise) application. Mais un bon Design servant de bonnes fonctionnalités n’est pas suffisant dans notre monde d’image et de mouvement. Il faut aussi que “ça jette”, que l’œil soit attiré, que l’oreille se tende, qu’il y ait une sensation d’immersion dans l’univers créé par l’application. Bref, que l’utilisateur du 21ème siècle qui est un zappeur fou impatient ait envie de voir la suite (et d’acheter le produit) !

Et cela réclame des effets visuels et du son à la hauteur (ce qui veut dire bien réalisés et bien dosés, je ne parle pas de passer à fond une musique à la noix dès que le site s’ouvre…). Supprimez les effets sonores et visuels de Avatar ou 2012, il ne reste que deux lignes de scénarios… Retirez le son surround et la 3D temps réel de la majorité des jeux modernes et il ne restera même pas la moitié de l’intérêt d’un Pac-Man ou d’un Asteroid ! Il existe aussi de magnifiques réussites où tous les avantages techniques sont utilisés à bon escient. C’est notre monde, tel qu’il est. Il y a les rêveurs qui voient le monde tel qu’ils souhaiteraient qu’il soit (et qui sont donc à côté de la plaque en permanence) et les réalistes qui, quel que soit leur opinion sur ce monde dirigent leurs actions en tenant compte de sa réalité. Faites partie de ces derniers, si ce n’est dans votre vie privée dans laquelle je ne veux pas m’immiscer, mais au moins quand vous développez des applications.

Je vous conseille ainsi de faire un tour sur le site de Template Monster : http://www.templatemonster.com/ ils vendent des templates de sites pour Flash et maintenant aussi pour Silverlight. Même si le style est souvent un peu trop clinquant, arbre de Noël, et un peu emprunt du mauvais goût typique américain (notamment musique de fond à la noix dont je parlais plus haut), tout est réalisé avec un niveau de professionnalisme qu’on aimerait (moi en tout cas!) voir plus souvent…

Même les templates les plus ringards ou les plus mièvres sont ficelés aux petits oignons. Introductions fluides et accrocheuses, sonorisation des clics, effets bien synchros et bien choisis, il y a mille idées à reprendre de ces templates et une bonne leçon de professionnalisme à tirer d’une visite approfondie sur ce site. Le paradoxe américain… Un goût pas toujours très fin, mais une capacité hors du commun à bien réaliser les choses. Il y a d’ailleurs là une raison à la domination culturelle américaine, comme à la domination industrielle allemande en Europe : ces gens là savent bosser et le font bien, à fond, pas comme des dilettantes.

Le véritable “French paradox” c’est qu’on a culturellement le “cul assis entre deux chaises” entre nos origines teutonnes (les fameux Francs étaient une peuplade germanique) et romaines (qui ont marqué par leur longue invasion notre langue et notre culture). Sauf que l’on a gardé des romains une certaine propension au bordélisme mais sans prendre le génie artistique italien et qu’on a gardé des teutons le côté terne sans retenir le sens de la rigueur et du travail des allemands… L’avantage c’est que nous possédons les “germes” de toutes ces qualités, alors travaillez le génie créateur italien qui sommeille en vous et réveillez le bosseur allemand qui dort au fond de vos gênes ! (je parle de gênes au sens “culturel” et non au sens biologique ce qui n’aurait aucun sens et sous-tenterait une thématique nauséabonde que je réprouve, cela va sans dire, mais c’est mieux de le dire…).

Sur Template Monster regardez certaines transitions visuelles, et essayez de les refaire sous Silverlight… Vous comprendrez alors qu’il reste du pain sur la planche pour l’équipe de Silverlight (les effets bitmaps sont encore trop simplistes dans ce dernier).

Silverlight n’en est pas moins un magnifique produit se reposant sur le Framework .NET, offrant des outils professionnels comme les WCF RIA Services par exemple. Heureusement car c’est ce qui fait de Silverlight une solution crédible d’avenir pour de nombreuses applications orientées business.

Mais si on souhaite voir le plugin s’étendre et être utilisé partout, il va falloir que Microsoft prenne conscience que ce sont plus les jeux et les gadgets qui imposent un plugin que les applications business. Et que pour créer des jeux et des gadgets il faut un moteur de son et d’image à la hauteur. Sinon le challenge restera à l’avantage de Flash…  On ne peut négliger les applications grand public, les jeux, les gadgets et les sites web clinquants lorsqu’on a un plugin à faire adopter… Jusqu’à aujourd’hui Microsoft à tout basé sur la vidéo pour diffuser le plugin Silverlight. La concurrence prochaine à ce niveau de HTML5 risque de ruiner cette stratégie si une autre ne vient pas prendre la suite : celle d’un Silverlight enfin à la hauteur au niveau traitement bitmap et sonore…

Je sais que l’équipe de Silverlight a dix ans de Flash à récupérer en quelques années et que la tâche est difficile tout autant que doit l’être la priorisation des fonctionnalités à implémenter dans chaque version. C’est pourquoi je continue à soutenir Silverlight et le travail difficile de son équipe. Mais il y a encore de la place pour quelques versions de plus avant d’atteindre un produit vraiment “Flash killer” sur toute la ligne (d’autant que Adobe ne reste pas à dormir sur ses lauriers) …

Mais venons-en au son.

Un “moteur” de mobylette

Concernant l’image, l’arrivée de WriteableBitmap laisse peut-être présager de futures améliorations, de compléments simplifiant la manipulation des bitmaps. Mais en ce qui concerne le son, le moteur fourni (entièrement programmable, sans aucune extension réelle à l’heure actuelle) est plutôt celui d’une mobylette que d’une moto de compétition…

Pas de Boucle

Le premier point négatif est l’absence de mode boucle (loop). Impossible de faire jouer un même son en boucle : musique de fond par exemple. Pour un site c’est souvent inutile (voire nuisible) mais pour un jeu ou un site publicitaire cela peut être essentiel.

Grande latence

Un paramètre permet de jouer sur la latence mais ce n’est pas suffisant pour assurer une bonne réactivité. De plus le décodage des mp3 ou wma laisse un “blanc” qui n’est pas éliminé par le décodeur. Si on y ajoute la lenteur du moteur actuel, boucler un son court est impossible et laisse largement entendre un silence. Impossible donc de simplement boucler quelques millisecondes de bruit blanc pour simuler le bruit du vent par exemple. Ni même de fabriquer des ambiances sonores évolutives à partir d’échantillons.

Pas d’effets

Aucun effet disponible. Pas de réverbération, ni d’écho, pas de contrôle du pitch (hauteur du son ~ vitesse de lecture), encore moins de time-stretching ni aucune fonction un peu évoluée.

Si tout doit être préparé à l’avance en studio et qu’on doit utiliser 100 échantillons différents là où un seul suffirait, c’est toute l’application qui sera ralentie lors de son téléchargement (sans parler de la complexité et du coût d’un tel travail qui impose que tout soit figé sauf à retourner en studio pour refaire les effets).

Peu de décodeurs

A l’heure actuelle MediaElement ne sait lire que quelques formats. Le moteur sous-jacent permet dans l’absolu de traiter tous les formats, encore faut-il écrire beaucoup de code. Il manque des briques élémentaires plus sophistiquées et directement utilisables.

Les solutions actuelles

Pour l’instant il n’existe rien de convaincant, ni en provenance de Microsoft ni même de la communauté pourtant riche de millions de développeurs C#. Mais il existe tout de même quelques tentatives qui méritent d’être relevées et qui peuvent, dans certains cas, vous aidez à pallier certains manques de l’implémentation actuelle de Silverlight. Le but ici n’étant pas de se contenter d’un constat sévère mais bien d’avancer positivement des solutions pour dépasser les limitations actuelles.

Contrer le gap audio pour faire de boucles

C’est le premier point noir. Crée des boucles est essentiel. D’abord parce que cela permet d’utiliser des échantillons de petites taille et d’accélérer le téléchargement de l’application, ensuite parce que cela ouvre la voie vers de nombreuses utilisations pratiques (fond ou ambiance sonore, effets audio s’adaptant en longueur aux événements visuels, etc).

Hélas les formats supportés par MediaElement possèdent leur propres problèmes. Par exemple les Mp3 standard possèdent tous un blanc en tête de fichier. Si on ajoute à cela que MediaElement doit remplir un buffer interne avant de jouer un son, les difficultés s’accumulent.

Le meilleur moyen de supprimer les gaps sonores est soit de gérer son propre décodeur et d’éliminer le gap, soit d’utiliser un format “gapless”, sans blanc, ou bien de trouver une astuce pour sauter le gap en début de fichier (et parfois aussi celui se trouvant à la fin).

Il est possible d’encoder les fichiers avec un outil gapless comme WinLame. Il sait traiter les Mp3 et Ogg Vorbis (et quelques autres formats). Il est encore en bêta, mais arrive à un bon niveau de maturité. Sur des sons courts la qualité reste malgré tout médiocre.

Silverlight propose malgré tout et en dernier ressort un accès à la machinerie interne. Il est ainsi possible d’écrire son propre décodeur. Larry Olson a écrit il y a un moment les Managed Media Helpers qui ont inspiré beaucoup d’autres auteurs. Techniquement l’astuce consiste à écrire une sorte de codec qui fournit le flux au MediaElement. Ce flux peut provenir du décodage d’un fichier existant (Mp3 par exemple) ou bien être créé ex-nihilo et cela devient un synthétiseur… Le code de Olson ne fait que traiter les frames Mp3 envoyant le flux efficace vers le décodeur du MediaElement, ce qui ne règle pas le problème des boucles puisqu’il reste impossible de pointer n’importe où dans le flux. Mais vu le peu de choses que Microsoft a fourni sur le moteur interne, ce projet a valeur de documentation pratique qui peut s’avérer indispensable pour comprendre comment créer votre propre décodeur.

Un autre développeur, DDtMM, à écrit un librairie Seamless Mp4 qui traite donc le format Mp4 (uniquement la partie sonore du format) et qui propose le mixage de plusieurs sons et boucles avec un résultat correct. Toutefois cela implique un encodage Mp4 peu pratique au lieu d’exploiter des formats plus classiques comme Mp3 ou Wav. La librairie n’est pas parfaite mais pour avoir tester ses différentes évolutions, cela est malgré tout exploitable. Le projet est fourni avec les sources, et là aussi cela peut constituer une bonne documentation sur la façon d’écrire des décodeurs audio sous Silverlight.

On trouve aussi Saluse Media Kit, un décodeur qui traite les Mp3. C’est une option intéressante même si les sons courts semblent poser là aussi des problèmes. Mais, one more time, cela fait un exemple de plus traitant un format classique qui peut servir de base à l’écriture de votre propre décodeur. A noter que le Saluse Media kit va un peu plus loin que les autres en offrant la possibilité d’ajouter des effets (écho, panoramique, changement de pitch). Le résultat n’est pas forcément à tomber par terre (niveau qualité sonore) mais c’est un bon début puisque la notion d’effet et de traitement de flux audio numérique y sont abordées.

Atsushi Ena est à la base d’un autre projet, MoonVorbis qui possède de nombreux atouts mais reste focalisé sur le format Ogg Vorbis et qui s’adresse, comme le nom le laisse deviner, à MoonLight, la version Mono de Silverlight. Le code est malgré tout une bonne base pour qui voudrait l’adapter (l’auteur a testé la compatibilité avec Silverlight 3, il faut donc voir comment cela se comporte). C’est une des rares librairies que je n’ai pas encore eu le temps de tester, donc si vous le faîtes n’hésitez pas à venir en parler !.

Contrer la latence

La latence est l’ennemi du son numérique, en tout cas de sa réactivité. Les “claviers” le savent bien, pendant longtemps le problème des “soft synths”, des synthétiseurs numériques simulés sur ordinateur, a été la latence introduite par les cartes son et par le manque de célérité des anciens processeurs. Or, un latence aussi basse que 50 ou 100 millisecondes, si elle peut paraître très faible, voire inaudible pour un profane, est, je peux vous l’assurer, absolument insupportable pour le musicien pendant qu’il joue ! Par défaut la latence des flux du MediaElement est de … 1000 ms !

La latence du MediaElement est énorme, mais les décodeurs que l’on peut écrire en se basant sur MediaStreamSource offrent plus de souplesse. On dispose notamment de la propriété AudioBufferLength réglée donc par défaut à 1000 ms (1 seconde). Selon votre hardware, il est possible de réduire cette valeur jusqu’à 50 ms sans trop de problème, même parfois en dessous. Mais pour faire un soft synth c’est encore beaucoup. Descendre à 15 ms est presque parfait mais cela engendre sur la plupart des machines des “glitches” et une distorsion du son. On arrive là aux limites du matériel. Pour les musiciens qui utilisent des soft synths il y a un passage obligé : une carte son professionnelle, généralement externe et utilisant Firewire (IEEE 1394) plutôt que de l’USB. Avec du matériel de ce type on peut descende à 3 à 4 ms ce qui rend le jeu presque aussi naturel que sur un instrument hardware. Mais on s’éloigne des possibilités s’offrant à Silverlight, d’une part parce qu’en mode Web il ne peut accéder aux pilotes hardware et ne pourrait donc pas utiliser les pilotes ASIO éventuellement présents sur la machine hôte, et que parce que justement, en tant qu’application Web on ne sait pas à l’avance quelles seront les performances de la machine de l’utilisateur et qu’il vaut mieux s’en tenir à des valeurs moyennes plutôt que de tabler sur les performances d’un monstre multicœur overclocké…

En se contenant de 50 ms on ne peut pas espérer écrire de véritables soft synths en Silverlight, mais cela n’est pas grave puisque un soft synth s’utilise au sein d’un autre logiciel plus complexe assurant le mixage, les effets spéciaux, et que ce cadre d’utilisation n’est absolument pas celui de Silverlight. En revanche on peut développer des tas de petites applications sympathiques en Silverlight “orientées son” : simulateur de batterie numérique, mini séquenceur, etc… Il y a donc malgré tout un univers à explorer, techniquement accessible à Silverlight, pour qui met les mains dans le cambouis et s’attaque à la réalisation d’un décodeur spécialisé. Pour rappel, un décodeur Silverlight peut fort bien décoder un flux existant (Mp3, Mp4, Ogg, etc) mais avec un peu d’astuce il peut aussi créer des sons et devenir ainsi un soft synth…

D’autres références

Pour ceux qui sont intéressés par le sujet, il faut bien entendu se rendre sur MSDN pour lire la documentation de MediaStreamSource à la base de tous les espoirs d’un son meilleur pour Silverlight.

On trouvera aussi une introduction par Tim Heuer dans un billet de 2008, ainsi qu’une série d’articles sur MSDN en trois parties.

Peter Brown a tenté d’écrire un soft synth en Silverlight. Le produit final n’est pas vraiment utilisable en raison de petites imperfections mais en revanche c’est un exemple de code intéressant pour qui veut se lancer dans ce type de programmation.

Moins mélodieux mais plus technique, le célèbre Petzold qui fut l’idole de toute une génération de programmeurs et qui s’est converti de longue date à C# a produit quelques exemples dont un petit soft synth avec utilisation du clavier pour jouer des notes.

Il aussi KSynth et KSynth-b de Mike Hodnick dont la page semble hélas ne plus exister sur le site. Mais le lien vers la version online fonctionne toujours. En revanche on peut encore accéder au trunk de son système de gestion de version ici. En cherchant bien on trouve le code source de Ksynth sur Google code.

Dans un genre encore plus abouti il y a Pluto Synth mais je n’ai pas réussi à trouver le code source… Mais même sur mon PC plutôt gonflé çà devient peu réactif, ça consomme à fond mais il s’agit d’un véritable séquenceur Midi 16 pistes avec soft synth intégré et divers sons suivant la norme GS. De loin la réalisation la plus aboutie et une belle performance de développement.

Enfin, il existe SilverSynth sur CodePlex, certainement pas un soft synth utilisable tel quel mais pouvant fournir le code de base pour réaliser quelque chose de plus fonctionnel. C’est en tout cas peut-être la librairie dont il faut partir pour créer la sienne. Elle contient des bouts de code de Petzold et d’autres auteurs et il existe plusieurs exemples. La version KSynth-b contient une classe gérant les échantillons Wav mais c’est vraiment le début d’un commencement… Cette librairie répond ainsi plus aux besoins d’un soft synth que du traitement des Waves (ou autres signaux sonores), décidément enfants pauvres jusqu’au bout…

Peu ou rien sur le traitement des signaux eux-mêmes donc (analyse graphiques, effets…) mais cela viendra certainement…

N’oubliez pas Google Code, l’outil de recherche de code de Google qui est très utile. On peut grâce à lui trouver d’autres exemples en C# (ou d’autres langages) comme les transformées de Fourier (base de l’analyse graphique multibande, de la mise en place de filtres et même de détection de beat, etc).

Conclusion

Silverlight contient les germes de nombreuses améliorations indispensables concernant le traitement des image autant que celui du son. Hélas, pour l’instant il ne s’agit que de germes et non de features utilisables out of the box.

Concernant le son on voit qu’il existe des tentatives plus ou moins abouties de faire pousser la petite graine et obtenir quelque chose d’utilisable.

Le chemin reste malgré tout encore assez long pour une solution à la hauteur des besoins, c’est à dire pour quelque chose qui soit au minimum aussi utilisable que Flash…

One day my prince will come… C’est du Disney et pas du Microsoft, mais l’espoir fait vivre, alors (et c’est de circonstance dans ce billet*) :

Stay Tuned !

(*) Pour une fois je vais expliquer ce “Stay Tuned!” pour les lecteurs qui n’en comprennent pas le sens et l’origine. “Stay Tuned” peut se traduire par “restez à l’écoute” dans le contexte dans lequel je l’utilise et qui est devenu le sens commun américain. Toutefois “stay tuned” signifie “restez réglé sur la fréquence”. C’est le “tune” de “tuner” pour écouter la radio sur une chaîne hi-fi. Et “Stay Tuned!” est un gimmick souvent utilisé sur les radios américaines pour ponctuer la fin d’une annonce ou d’une émission, une façon de dire “restez callés sur la fréquence de notre radio et n’allez pas régler le poste sur la fréquence d’une autre radio”. C’est un petit mot de clôture que j’utilisais dans ma jeunesse quand j’opérais de temps en temps sur certaines radio libres (que l’Etat appelait alors radio pirates). Une façon de faire un petit coucou à cette époque, sans nostalgie, juste un rappel personnel, que vous comprendrez, maintenant que vous êtes dans la confidence… Un billet sur le son me semblait approprié pour éclaircir ce détail :-)