Intégration de l’audio sur votre site

Voici comment intégrer un lecteur pour votre podcast sur votre site Web.

Omny Studio génère deux types de lecteurs pour votre audio : les lecteurs intégrés de clip unique et les lecteurs intégrés de liste de lecture.

Pour trouver le code HTML de ces lecteurs, cliquez sur le clip ou la liste de lecture que vous souhaitez partager et allez dans « Détails ». Sélectionnez l’onglet « Intégrer » et choisissez le lecteur intégré que vous souhaitez utiliser.

Styles de lecteurs intégrés

Omny Studio propose différentes options de taille et de style de lecteur intégré :

• Lecteur à illustration large : le lecteur adapte la largeur à l'emplacement, mesure 180 px de haut, affiche l’illustration sur le côté et adapte la couleur d’arrière-plan en une une illustration floue.

• Lecteur à couleur large : le lecteur adapte la largeur à l'emplacement, mesure 180px de haut, affiche l’illustration sur le côté et le fond est de couleur unie.

• Lecteur grande taille : le lecteur est réglé sur une taille fixe et affiche l’illustration dans son intégralité en arrière-plan. Il est disponible en différentes tailles prédéfinies (400×400, 300×300, 560×315).

• Lecteur avec transcription : le lecteur s’adapte à la largeur de l'emplacement, mesure 600px, affiche la transcription publiée avec une mise en surbrillance interactive et clique sur le mot pour la recherche.

Remarque : le code HTML iframe du lecteur intégré peut être ajusté manuellement pour d’autres options de taille, mais certaines tailles peuvent ne pas convenir au choix de style.

Options du lecteur intégré

Les lecteurs intégrés peuvent être personnalisés individuellement ou des options peuvent être définies par défaut pour l’ensemble d’une organisation, d’un réseau ou d’un programme.

• Afficher l’illustration : permet d’afficher ou de masquer l’illustration du clip.

• Afficher le partage : permet d’afficher ou de masquer le bouton de partage et les fonctionnalités.

• Afficher le téléchargement : permet d'afficher ou de masquer le bouton « Télécharger » dans l’écran de partage.

• Afficher la description : permet d’afficher ou de masquer le bouton « Info » et la description du clip.

• Afficher l’abonnement au podcast : permet d'afficher ou de masquer le bouton « S’abonner ».

• Couleurs personnalisées : permet de remplacer les couleurs de surbrillance du lecteur intégré (sur le bouton de lecture et la section de lecture en forme d’onde), la couleur d’arrière-plan (applicable uniquement au style large) et la couleur du texte (applicable uniquement au style large).

Fonctionnalité avancée du lecteur intégré

Les lecteurs intégrés peuvent également être modifiés manuellement pour activer d’autres fonctionnalités. Cela peut être fait en modifiant l’onglet src du code HTML intégré pour inclure des paramètres de requête supplémentaires. Par exemple, la lecture du lecteur intégré de 1 minutes et 5 secondes impliquerait de changer le iframe src de :

src="https://omny.fm/shows/show-slug/clip-slug/embed"

en :

src="https://omny.fm/shows/show-slug/clip-slug/embed?t=1m05s"

Si vous activez plusieurs options avancées, combinez-les avec des esperluettes (&). Par exemple, la lecture du lecteur intégré de 1 minutes et 5 secondes avec la lecture automatique activée et verrouillée sur l’allemand impliquerait de modifier votre iframe src de :

src="https://omny.fm/shows/show-slug/clip-slug/embed"

en :

src="https://omny.fm/shows/show-slug/clip-slug/embed?t=1m05s&autoplay=1&lang=de"

Les options disponibles sont les suivantes :

• Lire à partir de : utilisez le paramètre de chaîne de requête t pour démarrer le lecteur à une heure spécifiée. Le format de l’heure est le suivant : ##m##s pour les minutes et les secondes. Par exemple, utilisez ?t=5s pour commencer à 00:00:05 ou ?t=1m05s pour commencer à 00:01:05.

• Lecture automatique : utilisez le paramètre de chaîne de requête autoplay avec la valeur 1 pour activer la lecture automatique lors du chargement. (Remarque : la lecture automatique ne fonctionnera pas sur tous les navigateurs de bureau et mobiles modernes en raison de restrictions multimédias). Par exemple : ?autoplay=1.

• Sélectionner un clip dans la liste de lecture intégrée : utilisez le paramètre de chaîne de requête selectedClip avec un identifiant de clip pour présélectionner un clip dans une liste de lecture intégrée. Par exemple : ?selectedClip=365994b2-ce5c-4984-8aeb-4679add7b905.

• Masquer la liste de lecture dans la liste de lecture intégrée : utilisez le paramètre de chaîne de requête list avec la valeur 0 pour masquer la liste de lecture dans une liste de lecture intégrée afin de simuler une intégration à mise à jour automatique. Vous devrez également changer la hauteur à « 180 » dans le code iframe.

• Limiter le nombre de clips dans la liste de lecture intégrée : utilisez le paramètre de chaîne de requête limit avec une valeur entière positive pour plafonner le nombre de clips affichés dans une liste de lecture intégrée. Par exemple : ?limit=5 entraînera l’affichage d’un maximum de 5 clips.

• Verrouiller l’intégration dans une langue spécifique : par défaut, les lecteurs intégrés d’Omny Studio s'afficheront dans la langue du navigateur/système d’exploitation de l’utilisateur (là où elle est prise en charge). Pour toujours afficher un lecteur intégré dans une langue spécifique, utilisez le paramètre de chaîne de requête lang avec le code de la langue prise en charge (voir la liste ci-dessous). Par exemple : ?lang=de pour l’allemand.

Langues prises en charge

• Arabe (avec prise en charge de RTL) - ar

• Tchèque - cs

• Anglais - en

• Français - fr-fr, français canadien - fr-ca

• Allemand - de

• Hébreu (avec prise en charge RTL) - he

• Italien - it

• Japonais - ja

• Malaisien - ms

• Portugais - pt-pt, portugais brésilien - pt-br

• Espagnol - es

• Turc - tr

Player.js

Les développeurs peuvent contrôler le lecteur intégré par programmation à l’aide de la bibliothèque Javascript Player.js.

oEmbed

Omny fournit une API oEmbed à https://omny.fm/oembed