Conception Sonore d'Application

Que fait Conception Sonore d'Application ?

Prend les décisions de conception concernant quand, quoi et comment les sons doivent apparaître dans les applications. Il ne s'agit pas d'ingénierie audio (c'est le domaine de sound-engineer) ni d'effets sonores rétro (c'est le domaine de win31-audio-design). Cette compétence répond à la question la plus difficile en matière de son d'interface : cette interaction devrait-elle faire du bruit ? Et si oui, quel genre ?

Quand Utiliser

À utiliser pour :

• Décider quelles interactions dans une application web ou mobile doivent avoir un retour sonore
• Sélectionner les caractéristiques sonores appropriées pour les notifications, confirmations, erreurs
• Créer des sons d'interface générés par IA avec ElevenLabs, AudioCraft ou Stable Audio
• Implémenter des sons procéduraux avec l'API Web Audio
• Associer le retour haptique à l'audio sur iOS/Android
• Établir une identité sonore de marque pour un produit
• Auditer la conception sonore existante d'une application pour déterminer son caractère agaçant ou utile

Ne PAS utiliser pour :

• Mixage/mastering audio professionnel -> utiliser sound-engineer
• Sons système thématiques Windows 3.1 -> utiliser win31-audio-design
• Composition musicale ou bande sonore -> utiliser sound-engineer
• Audio de lecteur d'écran d'accessibilité -> utiliser accessibility-expert
• Systèmes audio de jeu (audio positionnel 3D, musique dynamique) -> utiliser sound-engineer

La Question Fondamentale : Ce Fait Devrait-il Produire un Son ?

L'interaction nécessite-t-elle un RETOUR ?
|
+-- Action initiée par l'utilisateur (appui, clic, envoi) ?
|   +-- Le résultat est-il visible à l'écran ?
|   |   +-- OUI et évident --> Le son est OPTIONNEL (souvent ignoré)
|   |   +-- OUI mais subtil --> Le son AIDE (confirmation douce)
|   |   +-- NON (processus en arrière-plan) --> Son RECOMMANDÉ
|   +-- L'action est-elle destructive ?
|       +-- OUI --> Son RECOMMANDÉ (ton d'avertissement distinct)
|       +-- NON --> Son OPTIONNEL
|
+-- Événement initié par le système (notification, alerte) ?
|   +-- L'utilisateur est-il dans l'application ?
|   |   +-- OUI --> Son subtil dans l'application
|   |   +-- NON --> Son de notification (suivre les conventions OS)
|   +-- Est-ce urgent ?
|       +-- OUI --> Son plus urgent/attirant l'attention
|       +-- NON --> Peut être silencieux ou ambiant
|
+-- Ambiant/atmosphérique (état d'arrière-plan) ?
    +-- L'application bénéficie-t-elle d'une présence ? --> Ambiant subtil
    +-- L'utilisateur travaille-t-il/est-il concentré ? --> SILENCE

---

Le Vocabulaire Sonore de l'Interface

Chaque application a besoin de sons de ces catégories. Toutes les catégories ne sont pas obligatoires — la plupart des applications ont besoin de 3 à 5 sons.

Niveau 1 : Essentiel (La Plupart des Applications en Ont Besoin)

Type de Son	Objectif	Caractère	Durée	Exemple
Confirmation	Action réussie	Aigu, montant	100-300ms	Message envoyé Slack
Erreur	Action échouée	Grave, plat ou descendant	200-400ms	Échec de validation formulaire
Notification	Nouvelles informations arrivées	Distinctif, énergie moyenne	300-600ms	Message entrant Slack

Niveau 2 : Raffinement (Applications Qui Soignent)

Type de Son	Objectif	Caractère	Durée	Exemple
Transition	Navigation entre les vues	Sifflement ou tapotement subtil	50-150ms	Tourne-page iOS
Bascule	Changement d'état binaire	Clic ou claquement net	50-100ms	Interrupteur on/off
Survol	Retour au survol de la souris	Tic à peine audible	20-50ms	Survol d'élément de menu
Sélection	Élément choisi dans une liste	Pop ou pincement doux	50-150ms	Sélection dans une liste déroulante
Suppression	Suppression destructive	Bruit sourd ou sifflement creux	150-300ms	Action de mise à la corbeille

Niveau 3 : Enchantement (Applications Avec de la Personnalité)

Type de Son	Objectif	Caractère	Durée	Exemple
Accomplissement	Étape importante atteinte	Musical, festif	500ms-2s	Leçon terminée Duolingo
Ambiant	Présence en arrière-plan	En boucle, atmosphérique	Continu	Noisli, application Forest
Identité Sonore	Ouverture/fermeture de l'application	Iconique, mémorable	500ms-1.5s	Ta-dum de Netflix
Œuf de Pâques	Plaisir caché	Ludique, inattendu	Variable	Récompense code Konami

---

Conventions de Plateforme

Apple (iOS / macOS)

Les HIG d'Apple imposent des comportements audio spécifiques :

• Les sons système sont sacrés : Ne jamais remplacer ou modifier les sons d'alerte système
• Respecter le commutateur silencieux : Si le commutateur physique est sur silencieux, vos sons d'application S'ARRÊTENT (sauf pour la lecture multimédia)
• Les catégories de session audio sont importantes :
  • ambient — se mélange à d'autres contenus audio, respecte le commutateur silencieux
  • soloAmbient — réduit au silence les autres contenus audio, respecte le commutateur silencieux
  • playback — ignore le commutateur silencieux (pour les applications multimédia UNIQUEMENT)
• Les haptiques s'associent aux sons : Utiliser UIImpactFeedbackGenerator avec l'audio

Caractéristiques Sonores d'Apple :

• Ondes sinusoïdales pures et tonalités filtrées
• Harmoniques minimales (pur, pas bourdonnant)
• Décroissance courte (les sons ne persistent pas)
• Volume cohérent par rapport aux sons système

// iOS : Jouer un son système
import AudioToolbox
AudioServicesPlaySystemSound(1057) // Clic de clavier standard

// iOS : Haptique + son personnalisé
let generator = UIImpactFeedbackGenerator(style: .light)
generator.impactOccurred()
// Jouer votre son personnalisé simultanément

Material Design (Android)

Les principes de conception sonore de Google :

• Fonctionnel d'abord : Le son doit informer, pas décorer
• Subtil par défaut : Les sons d'interface doivent être plus silencieux que le contenu multimédia
• Haptique d'abord sur Android : Préférer le retour haptique ; ajouter du son uniquement lorsque l'haptique est insuffisant
• Son ACTIVÉ uniquement lorsqu'il est significatif : L'état par défaut doit être silencieux pour la plupart des interactions

Caractéristiques Sonores de Material :

• Sons percussifs courts et nets
• Contenu harmonique subtil (pas d'ondes sinusoïdales pures)
• Légèrement plus chaud que Apple (plus de fréquences moyennes)
• Conçus pour fonctionner sur des haut-parleurs de téléphone de qualité inférieure

Applications Web

Le web a les conventions sonores les PLUS FAIBLES, ce qui signifie plus de liberté mais aussi plus de risques d'agacement.

• Ne jamais lancer un son automatiquement — les navigateurs le bloquent et les utilisateurs le détestent
• Exiger d'abord un geste de l'utilisateur : L'API Web Audio nécessite une interaction de l'utilisateur avant de jouer
• Fournir un contrôle du volume : Toujours permettre à l'utilisateur de couper le son ou de l'ajuster
• Considérer les utilisateurs de casque : Ce qui sonne bien sur des haut-parleurs d'ordinateur portable peut être dérangeant sur un casque

---

Créer des Sons avec l'IA

Effets Sonores ElevenLabs

Idéal pour : Des sons d'interface réalistes de haute qualité avec des descriptions de caractères spécifiques.

# Générer un signal de confirmation
curl -X POST "https://api.elevenlabs.io/v1/sound-generation" \
  -H "xi-api-key: VOTRE_CLÉ" \
  -H "Content-Type: application/json" \
  -d '{
    "text": "Signal montant court et lumineux, numérique, onde sinusoïdale pure, 200ms, son de confirmation d\"interface",
    "duration_seconds": 0.5
  }'

Invites efficaces pour ElevenLabs :

• Confirmation : "Signal court à deux notes montantes et lumineuses, numérique pur, chaleureux, 200ms"
• Erreur : "Bruit sourd grave avec léger bourdonnement, numérique, 300ms, pas dur"
• Notification : "Mélodie douce de xylophone à trois notes, amicale, 400ms"
• Bascule : "Clic mécanique net, interrupteur en plastique, 50ms"
• Suppression : "Sifflement creux doux descendant, 200ms"
• Accomplissement : "Arpège ascendant lumineux, pétillant, festif, 1 seconde"

Meta AudioCraft (Open Source)

Idéal pour : Les développeurs qui souhaitent un contrôle total et aucun coût d'API.

from audiocraft.models import AudioGen
from audiocraft.data.audio import audio_write

model = AudioGen.get_pretrained('facebook/audiogen-medium')
model.set_generation_params(duration=0.5)

# Générer des sons d'interface
descriptions = [
    "court bip de confirmation numérique, hauteur ascendante, pur",
    "bourdonnement d'erreur grave, bref, pas dur, numérique",
    "signal de notification doux, deux notes, agréable",
]

wav = model.generate(descriptions)
for i, w in enumerate(wav):
    audio_write(f'ui_sound_{i}', w.cpu(), model.sample_rate)

Stable Audio Open

Idéal pour : Les sons ambiants plus longs, les textures de fond, les identités sonores de marque.

import torch
from stable_audio_tools import get_pretrained_model
from stable_audio_tools.inference.generation import generate_diffusion_cond

model, model_config = get_pretrained_model("stabilityai/stable-audio-open-1.0")

# Générer un fond ambiant
conditioning = [{
    "prompt": "texture numérique ambiante calme, bourdonnement grave chaleureux, adapté à un fond d'application de productivité, en boucle",
    "seconds_total": 10
}]

Liste de Contrôle de Post-Traitement

Les sons générés par IA nécessitent un nettoyage avant d'être expédiés :

1. Supprimer le silence — éliminer le temps mort au début et à la fin
2. Normaliser le volume — tous les sons d'interface doivent avoir une intensité perçue cohérente
3. Fondu d'entrée/sortie — un fondu de 5 à 10 ms évite les artefacts de clic
4. Compresser la plage dynamique — les sons d'interface doivent avoir un volume cohérent
5. Exporter en WAV (pour natif) ou OGG/MP3 (pour le web, moins de 50 Ko par son)
6. Tester sur les haut-parleurs cibles — les haut-parleurs de téléphone coupent les fréquences en dessous de 200 Hz

---

API Web Audio : Sons Procéduraux

Pour les applications web, générer des sons de manière procédurale élimine complètement le besoin de fichiers audio. Des fichiers plus petits, une disponibilité instantanée.

class UISound {
  private ctx: AudioContext | null = null;

  private getContext(): AudioContext {
    if (!this.ctx) {
      this.ctx = new AudioContext();
    }
    return this.ctx;
  }

  /** Confirmation ascendant lumineuse */
  confirm(): void {
    const ctx = this.getContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();

    osc.connect(gain);
    gain.connect(ctx.destination);

    osc.type = 'sine';
    osc.frequency.setValueAtTime(600, ctx.currentTime);
    osc.frequency.linearRampToValueAtTime(900, ctx.currentTime + 0.15);

    gain.gain.setValueAtTime(0.15, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.2);

    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + 0.2);
  }

  /** Ton d'erreur descendant grave */
  error(): void {
    const ctx = this.getContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();

    osc.connect(gain);
    gain.connect(ctx.destination);

    osc.type = 'triangle';
    osc.frequency.setValueAtTime(400, ctx.currentTime);
    osc.frequency.linearRampToValueAtTime(200, ctx.currentTime + 0.3);

    gain.gain.setValueAtTime(0.12, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);

    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + 0.35);
  }

  /** Clic subtil pour les bascules et sélections */
  click(): void {
    const ctx = this.getContext();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();

    osc.connect(gain);
    gain.connect(ctx.destination);

    osc.type = 'square';
    osc.frequency.setValueAtTime(800, ctx.currentTime);

    gain.gain.setValueAtTime(0.08, ctx.currentTime);
    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.05);

    osc.start(ctx.currentTime);
    osc.stop(ctx.currentTime + 0.05);
  }

  /** Mélodie de notification à trois notes */
  notify(): void {
    const ctx = this.getContext();
    const notes = [523, 659, 784]; // C5, E5, G5

    notes.forEach((freq, i) => {
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      osc.connect(gain);
      gain.connect(ctx.destination);

      osc.type = 'sine';
      osc.frequency.setValueAtTime(freq, ctx.currentTime);

      const start = ctx.currentTime + i * 0.12;
      gain.gain.setValueAtTime(0, start);
      gain.gain.linearRampToValueAtTime(0.12, start + 0.02);
      gain.gain.exponentialRampToValueAtTime(0.001, start + 0.15);

      osc.start(start);
      osc.stop(start + 0.15);
    });
  }
}

// Utilisation
const sound = new UISound();
document.querySelector('#submit')?.addEventListener('click', () => sound.confirm());

---

Appariement Haptique-Audio (Mobile)

Sur mobile, l'haptique et l'audio doivent être conçus comme une UNITÉ. L'haptique arrive en premier (retour physique immédiat), le son arrive en second (confirmation et caractère).

Guide d'Appariement

Interaction	Haptique	Son	Timing
Appui sur bouton	Impact léger	Clic court	Simultané
Interrupteur	Impact moyen	Claquement net	Haptique 10ms avant le son
Pull-to-refresh	Tic de sélection pendant le tirage ; notification à la fin	Son d'étirement subtil ; signal de confirmation	Haptique précède de 20ms
Balayage de suppression	Impact fort au seuil	Sifflement creux	Haptique au point d'engagement
Appui long	Continu rigide	Bourdonnement grave montant	Haptique commence avec le son
Succès	Motif de succès (triple tape)	Arpège ascendant	Aligné sur le rythme

Implémentation iOS

import UIKit
import AVFoundation

class FeedbackManager {
    static let shared = FeedbackManager()

    private let lightImpact = UIImpactFeedbackGenerator(style: .light)
    private let mediumImpact = UIImpactFeedbackGenerator(style: .medium)
    private let heavyImpact = UIImpactFeedbackGenerator(style: .heavy)
    private let notificationFeedback = UINotificationFeedbackGenerator()

    func tapConfirm() {
        lightImpact.impactOccurred()
        SoundPlayer.play(.confirm)
    }

    func errorShake() {
        notificationFeedback.notificationOccurred(.error)
        SoundPlayer.play(.error)
    }

    func deleteCommit() {
        heavyImpact.impactOccurred()
        SoundPlayer.play(.delete)
    }
}

---

La Psychologie des Sons Satisfaisants

Pourquoi certains sons d'interface semblent "justes" et d'autres "bon marché" :

Propriétés des Sons Satisfaisants

Propriété	Pourquoi ça Marche	Exemple
La hauteur monte	Signale le progrès, l'optimisme, l'achèvement	Les signaux de confirmation MONTENT
Décroissance courte	Semble réactif et contrôlé	Sons de menu Nintendo
Richesse harmonique	Semble organique et chaleureux	Son "cognement" de Slack
Volume cohérent	Semble professionnel et prévisible	Sons système Apple
Alignement rythmique	Semble intentionnel et conçu	Compteur de séquence Duolingo

Propriétés des Sons Agaçants

Propriété	Pourquoi ça Énerve	À Éviter
Répétitif sans variation	Les humains s'habituent, puis sont irrités	Le même son exact 100 fois/jour
Trop fort par rapport au contexte	Interrompt la concentration