SPlayer : Architecture et déploiement d'un lecteur audio open-source avec Vue 3 et Electron

Présentation de l'architecture SPlayer

SPlayer est une application de bureau de lecture audio open-source conçue avec une stack moderne comprenant Vue 3, TypeScript, Naïve UI et Electron. L'interface utilisateur s'inspire des directives Material Design et intègre des fonctionnalités d'extraction de couleurs dynamiques basées sur les pochettes d'albums, avec une prise en charge complète des thèmes clairs, sombres et automatiques.

Fonctionnalités techniques principales

Gestion des médias et synchronisation cloud

  • Indexation locale : Le système analyse automatiquement le répertoire local pour les formats MP3 et FLAC, structurant les métadonnées par artiste et par album.
  • API Cloud : Le module /src/api/cloud.ts gère la synchronisation et le téléversement des fichiers audio vers un stockage distant, assurant la continuité entre les appareils.
  • Configuration du flux audio : La fonction songUrl dans /src/api/song.ts permet de paramétrer la résolution du flux (Standard, Lossless, Hi-Res) selon les capacités du réseau et les préférences de l'utilisateur.

Moteur de rendu des paroles (TTML)

Le lecteur intègre un parseur pour le format TTML (Timed Text Markup Language), permettant un rendu synchronisé et animé des paroles au niveau du mot. Cette logique est orchestrée via l'interface songLyricTTML, avec un mécanisme de fallback vers des API tierces pour les catalogues moins courants.

Sécurité et licence

Le code source est entièrement ouvert et transparent. Le composant src/components/Modal/UserAgreement.vue enforce strictement une politique sans monétisation ni publicité intégrée, garantissant un environnement d'exécution sans trackers commerciaux ni plugins malveillants.

Stacck technologique

  • Frontend : Vue 3 (Composition API) avec TypeScript
  • Environnement d'exécution : Electron (Compatibilité Windows, macOS, Linux)
  • Bibliothèque UI : Naive UI
  • Gestion d'état : Pinia
  • Couche réseau : Axios avec intercepteurs personnalisés
  • Bundler : Vite couplé à electron-vite

Compilation et déploiement

Automatisation de la compilation locale

Le script Bash suivant automatise le clonage, l'installation des dépendances et la compilation binaire en détectant dynamiquement le système d'exploitation hôte :

#!/bin/bash

REPO_TARGET="https://github.com/imsyy/SPlayer.git"
WORKSPACE="SPlayer_Workspace"

# Initialisation du dépôt
git clone "$REPO_TARGET" "$WORKSPACE"
cd "$WORKSPACE" || { echo "Échec de l'accès au répertoire"; exit 1; }

# Installation déterministe des dépendances
npm ci

# Détection de l'OS pour la compilation de production
KERNEL_NAME=$(uname -s)
case "$KERNEL_NAME" in
    Linux*)     BUILD_CMD="npm run build:linux" ;;
    Darwin*)    BUILD_CMD="npm run build:mac" ;;
    MINGW*|CYGWIN*) BUILD_CMD="npm run build:win" ;;
    *)          echo "Système d'exploitation non supporté pour la compilation."; exit 1 ;;
esac

echo "Lancement de la compilation : $BUILD_CMD"
eval "$BUILD_CMD"

Déploiement conteneurisé (Backend/Server)

Pour une intégration serveur via Docker, la configuration suivante optimise l'exposition des ports et l'environnement d'exécution :

version: '3.9'
services:
  splayer_service:
    image: splayer/server:latest
    container_name: splayer_backend
    restart: always
    ports:
      - "3000:80"
    environment:
      - NODE_ENV=production
      - API_RATE_LIMIT=100

Pour déployer cette configuration, exécutez la commande d'orchestration suivante :

docker compose up -d --build

Étiquettes: Vue3 TypeScript Electron NaiveUI Pinia

Publié le 17 juillet à 07h08