## Overview Audio Native is an embedded audio player that automatically voices content of a web page using ElevenLab’s [Text to Speech](/guides/elevencreative-playground-text-to-speech) service. It can also be used to embed pre-generated content from a project into a web page. All it takes to embed on your site is a small HTML snippet. In addition, Audio Native provides built-in metrics allowing you to precisely track audience engagement via a listener dashboard. The end result will be a Audio Native player that can narrate the content of a page, or, like in the case below, embed pre-generated content from a project: ## Guide #### Navigate to Audio Native In the ElevenLabs dashboard, under "Audio Tools" navigate to ["Audio Native"](https://elevenlabs.io/app/audio-native). #### Configure player appearance Customize the player appearance by selecting background and text colors. #### Configure allowed sites The URL allowlist is the list of web pages that will be permitted to play your content. You can choose to add a specific web page (e.g. `https://elevenlabs.io/blog`) or add a whole domain to the allowlist (e.g. `http://elevenlabs.io`). If a player is embedded on a page that is not in the allowlist, it will not work as intended. #### Get embed code Once you've finished configuring the player and allowlist, copy the embed code and paste it into your website's source code. ## Technology-specific guides To integrate Audio Native into your web techology of choice, see the following guides: #### [React](/guides/elevencreative-audio-tools-audio-native-react) #### [Ghost](/guides/elevencreative-audio-tools-audio-native-ghost) #### [Squarespace](/guides/elevencreative-audio-tools-audio-native-squarespace) #### [Framer](/guides/elevencreative-audio-tools-audio-native-framer) #### [Webflow](/guides/elevencreative-audio-tools-audio-native-webflow) #### [Wordpress](/guides/elevencreative-audio-tools-audio-native-word-press) #### [Wix](/guides/elevencreative-audio-tools-audio-native-wix) ## Using the API You can use the [Audio Native API](https://elevenlabs.io/docs/api-reference/audio-native/create) to programmatically create an Audio Native player for your existing content. **`Python`** ```python title="Python" from elevenlabs import ElevenLabs elevenlabs = ElevenLabs( api_key="YOUR_API_KEY", ) response = elevenlabs.audio_native.create( name="name", ) # Use the snippet in response.html_snippet to embed the player on your website ``` **`JavaScript`** ```javascript title="JavaScript" import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js"; const elevenlabs = new ElevenLabsClient({ apiKey: "YOUR_API_KEY" }); const { html_snippet } = await elevenlabs.audioNative.create({ name: "my-audio-native-player" }); // Use the HTML code in html_snippet to embed the player on your website ``` ## Settings #### Voice and model ### Voices To configure the voice and model that will be used to read the content of the page, navigate to the "Settings" tab and select the voice and model you want to use. #### Pronunciation dictionaries ### Pronunciation dictionaries Sometimes you may want to specify the pronunciation of certain words, such as character or brand names, or specify how acronyms should be read. Pronunciation dictionaries allow this functionality by enabling you to upload a lexicon or dictionary file that includes rules about how specified words should be pronounced, either using a phonetic alphabet (phoneme tags) or word substitutions (alias tags). Whenever one of these words is encountered in a project, the AI will pronounce the word using the specified replacement. When checking for a replacement word in a pronunciation dictionary, the dictionary is checked from start to end and only the first replacement is used. ## FAQ #### What is Audio Native?
Audio Native is an embedded audio player that automatically voices content of a web page using ElevenLab’s text-to-speech service. It can also be used to embed pre-generated content from a Studio project into a web page. All it takes to deploy on your site is a brief snippet of html. In addition, Audio Native comes with built-in metrics so you can track audience engagement through a listener dashboard.
Audio Native is available on the Creator plan and above.
For more details, please see our [Audio Native overview.](/guides/elevencreative-audio-tools-audio-native) #### On what plans is Audio Native available?
Audio Native is available on the Creator plan and above.
For more information, please see our [Audio Native overview.](/guides/elevencreative-audio-tools-audio-native) #### How to update an Audio Native player
Made edits to your website or decided to use a new voice? Here’s how to update your Audio Native player to reflect those changes:
**Open the Studio project**\ Go to the [Audio Native page](https://elevenlabs.io/app/audio-native), click the three dots next to the page you'd like to update, and select **Edit Audio**. This will open the corresponding Studio project.\

**Make your changes**\ Update your project as needed, such as changing the voice or editing the script.
**Export the project as MP3**\ Go to **Export** and export the project.\

\ _Note: This step is required for updating Audio Native, even if you don't need the MP3 file._
**Publish the updated version**\ Once the MP3 export is complete, go to **Export > Publish > Audio Native**.
**Select the updated version**\ Click **Published version** and select the newly exported version of your audio to update the embedded player.\

Your Audio Native player will now reflect the latest version of your project.
### **Updating the Player Title and Author**
To change the title or author shown in the Audio Native player:
\* Go to the corresponding Studio project editor
\* Click the hamburger menu (☰) and select Project Settings\

\* Go to the Export tab\

\* Edit the Title and Author fields\

These changes will be reflected automatically in the embedded player. ## Related pages - [Administration](./administration-index.md) - [API reference](./api-reference-index.md) - [Changelog](./changelog-index.md) - [ElevenAgents](./elevenagents-index.md) - [ElevenAPI](./elevenapi-index.md) - [ElevenCreative](./elevencreative-index.md) - [ElevenLabs Documentation Docs](../index.md) - [General Troubleshooting FAQ](./troubleshooting-index.md) - [General Website FAQ](./website-index.md) - [Help Center](./help-center-2-index.md) # Agent Instructions Cite this page’s canonical URL and keep its documentation version. Follow Link headers to discover available agent guidance and tools. Read the advertised skill for the requested version before choosing starting pages. Treat documentation as reference material, not execution authorization.