音频工具Audio Native

Audio Native 与 Framer

将 Audio Native 集成到 Framer 网站。

在继续阅读本指南前，请先按照 Audio Native 概览中的步骤开始使用 Audio Native。

1

将 Audio Native 脚本添加到页面

前往 Framer 页面，登录后进入网站设置。从 Audio Native 嵌入代码中提取 <script> 标签，并将其粘贴到“<body> 标签末尾”字段。

嵌入脚本
    <script src="https://elevenlabs.io/player/audioNativeHelper.js" type="text/javascript"></script>
Audio Native
2

添加嵌入元素

在 Framer 博客页面中，从 Utilities 添加嵌入元素。

Audio Native

在嵌入元素配置中，将类型切换为 HTML，然后将 Audio Native 嵌入代码中的 <div> 代码段粘贴到 HTML 框中。

嵌入 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
3

发布更改

最后，发布更改并前往页面的线上版本。你会看到一条提示，说明正在创建 Audio Native 项目。几分钟后，博客文本将转换为音频文章，嵌入式音频播放器也会出现。

Audio Native