Le lecteur audio de Sitely vous permet d’ajouter du contenu audio à votre site web grâce à un composant simple, personnalisable pour correspondre au style de votre site. Voici à quoi ressemble le composant lecteur.

Le lecteur propose également trois styles différents. Les options « Avec » et « Sans » arrière-plan sont des lecteurs complets, comme indiqué ci-dessus. La différence est que l’un aura une couleur d’arrière-plan, tandis que l’autre sera transparent, laissant apparaître la couleur d’arrière-plan de votre page web. Le style mini est un simple bouton de lecture qui ressemble à ceci.

Lorsqu’il est activé, l’icône se transforme en bouton de pause

Thème clair

Thème sombre

Exemple de thème  personnalisé

Les autres options du panneau de style sont explicites. Vous ajoutez un fichier audio (format MP3)) en cliquant sur le bouton Ajouter. Vous pouvez définir un volume initial, choisir une couleur d’accent et sélectionner les contrôles que vous souhaitez afficher dans le lecteur. Si vous choisissez l’option de style Personnalisé, vous pourrez également définir une couleur d’arrière-plan et une couleur des contrôles pour votre lecteur. Vous pouvez ajouter autant de composants lecteur audio que nécessaire sur votre page. Lorsqu’un lecteur est activé, tout autre lecteur en cours de lecture s’arrête, évitant que plusieurs pistes audio ne soient lues simultanément. Cela signifie que vous pouvez créer un lecteur audio multi-pistes simple en ajoutant simplement une pile de lecteurs individuels sur la page.

‍Créer un lecteur personnalisé avec une liste de lecture 

‍Si vous souhaitez créer un lecteur avec une liste de lecture intégrée, c’est facile dans Sitely. Au lieu d’ajouter le composant audio directement sur la page, ajoutez-le plutôt à des popups. Lorsque vous ajoutez un lecteur audio à un popup, vous verrez quelques options supplémentaires dans le panneau de style. Ce sont : Démarrer à l’ouverture du popup et Fermer le popup à la fin . Ces deux options doivent être cochées. Créez un popup pour chaque piste que vous voulez inclure dans votre liste de lecture. Assurez-vous que le type de popup est défini sur ‘Normal’ et qu’ils ont TOUS le même ID de groupe.

Une fois que vous avez créé les popups et ajouté vos composants audio, vous pouvez concevoir votre liste de pistes. Dans l’exemple ci-dessous, deux boîtes standard ont été créées. La boîte supérieure (grise) a les coins supérieurs arrondis et la boîte inférieure (noire) a les coins inférieurs arrondis. La boîte inférieure est dimensionnée exactement aux mêmes dimensions que les popups. La liste de pistes est une zone de texte standard superposée sur la boîte grise. Chaque titre de piste a une action « Au clic » de « Ouvrir le popup ». Définissez l’action au clic pour ouvrir son popup associé. 

Il ne reste plus qu’à regrouper toute la liste de pistes en un seul élément et la positionner à l’endroit où vous souhaitez l’afficher sur votre page. Ensuite, ouvrez chaque popup à tour de rôle et positionnez-les au-dessus de la boîte noire sous la liste de pistes. Lors de la prévisualisation, votre lecteur personnalisé apparaîtra à l’écran. Cliquer sur un titre de piste affichera les contrôles du lecteur sous la liste de pistes et lancera automatiquement la lecture. Cliquer sur une autre piste fermera le lecteur en cours et le remplacera par le nouveau. Essayez-le sur l’exemple ci-dessous.

Mon lecteur audio Sitely

Toutes les pistes sont licenciées par leurs titulaires de droits d’auteur respectifs

Lorsqu’il est utilisé de cette manière, le lecteur audio intègre une fonction de pause. Si une autre piste est choisie avant la fin de la lecture de l’actuelle, le lecteur met automatiquement en pause la piste inachevée. Ainsi, lorsque l’utilisateur revient sur la piste, la lecture reprend à partir de l’endroit où elle avait été mise en pause.

Veuillez signaler toute lacune dans cette documentation et nous la corrigerons dès que possible !

Mis à jour pour Sitely 6

Ce site utilise des cookies.

Veuillez consulter notre politique de confidentialité pour en savoir plus.

D’accord Refuser