FramerでAudio Nativeを使う

Audio NativeをFramerのWebサイトに統合します。

このガイドを続ける前に、Audio Nativeの概要の手順に従って、 Audio Nativeを使い始めてください。

ページにAudio Nativeスクリプトを追加

Framerのページに移動してサインインし、サイト設定を開きます。Audio Nativeの埋め込みコードから<script>タグを取り出し、「End of <body> tag」フィールドに貼り付けます。

Embed script

    <script src="https://elevenlabs.io/player/audioNativeHelper.js" type="text/javascript"></script>

埋め込み要素を追加

Framerのブログページで、Utilitiesから埋め込み要素を追加します。

埋め込み要素の設定でタイプをHTMLに切り替え、Audio Nativeの埋め込みコードにある<div>スニペットをHTMLボックスに貼り付けます。

Embed div

    <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プロジェクトが作成中であることを知らせるメッセージが表示されます。数分後、ブログ内のテキストが音声記事に変換され、埋め込みオーディオプレーヤーが表示されます。