Outils audioAudio Native

Audio Native avec Framer

Intégrez Audio Native à vos sites Framer.

Suivez les étapes de la présentation d’Audio Native pour démarrer avec Audio Native avant de poursuivre ce guide.

1

Ajouter le script Audio Native à votre page

Accédez à votre page Framer, connectez-vous et ouvrez les paramètres de votre site. Dans le code d’intégration Audio Native, extrayez la balise <script> et collez-la dans le champ « End of <body> tag ».

Script d’intégration 
    <script src="https://elevenlabs.io/player/audioNativeHelper.js" type="text/javascript"></script>
Audio Native
2

Ajouter un élément Embed

Sur votre page de blog Framer, ajoutez un élément Embed depuis Utilities.

Audio Native

Dans la configuration de l’élément Embed, définissez le type sur HTML et collez l’extrait <div> du code d’intégration Audio Native dans le champ HTML.

Div d’intégration
    <div
        id="elevenlabs-audionative-widget"
        data-height="90"
        data-width="100%"
        data-frameborder="no"
        data-scrolling="no"
        data-publicuserid="public-user-id"
        data-playerurl="https://elevenlabs.io/player/index.html"
        data-projectid="project-id"
    >
        Loading the <a href="https://elevenlabs.io/text-to-speech" target="_blank" rel="noopener">Elevenlabs Text to Speech</a> AudioNative Player...
    </div>
Audio Native
3

Publier vos modifications

Enfin, publiez vos modifications et accédez à la version en ligne de votre page. Un message vous indiquera que le projet Audio Native est en cours de création. Après quelques minutes, le texte de votre blog sera converti en article audio et le lecteur audio intégré apparaîtra.

Audio Native