I am trying to integrate the ElevenLabs Audio Native widget into my Nuxt 3 app programmatically using the API. I have successfully received the correct response from the Elevenlabs server that returns the html widget for embedding on the Nuxt client. However, when embedding on the client (code shown below), I just get a "Loading the Elevenlabs Text to Speech AudioNative Player..." text shown. I am guessing the problem is that I am not loading the third party script appropriately.
Screenshot of Client:
/components/AudioPlayer.vue:
<template>
<section>
<div v-html="audioHtmlSnippet"></div>
</section>
</template>
<script setup>
const audioHtmlSnippet = ref('');
const uploadContentAndGetEmbedCode = async () => {
const formData = new FormData();
// Append your parameters here as shown in the API example
formData.append("author", "Author Name")
formData.append('auto_convert', 'true')
formData.append('name', 'ProjectTest')
// Note: For the 'file', ensure you have a file input or similar to get the content
formData.append("file", new Blob(["<html><body><div><p>The text to test for speech</p><h5>More of your content</h5><p>Some more of your content</p></div></body></html>"], { type: "text/html" }));
try {
const response = await $fetch('https://api.elevenlabs.io/v1/audio-native', {
method: 'POST',
headers: {
'xi-api-key': '<REMOVED>'
},
body: formData
});
console.log(response);
audioHtmlSnippet.value = response.html_snippet;
} catch (error) {
console.error(error);
}
};
useHead({
script: [
{
src: 'https://elevenlabs.io/player/audioNativeHelper.js',
type: 'text/javascript',
defer: true,
async: true
}
]
})
onMounted(() => {
uploadContentAndGetEmbedCode();
})
</script>
Server response from fetch:
{
"project_id": "erWuc18XuNVO0ljcbcgh",
"converting": true,
"html_snippet": "<div id=\"elevenlabs-audionative-widget\" data-height=\"90\" data-width=\"100%\" data-frameborder=\"no\" data-scrolling=\"no\" data-publicuserid=\"280a9e317cdab585abe0ae91fe6890ad69590b9a60007cb90a733f870764d3db\" data-playerurl=\"https://elevenlabs.io/player/index.html\" data-small=\"True\" data-textcolor=\"rgba(0, 0, 0, 1.0)\" data-backgroundcolor=\"rgba(255, 255, 255, 1.0)\" data-projectid=\"erWuc18XuNVO0ljcbcgh\" >Loading the <a href=\"https://elevenlabs.io/text-to-speech\" target=\"_blank\" rel=\"noopener\">Elevenlabs Text to Speech</a> AudioNative Player...</div><script src=\"https://elevenlabs.io/player/audioNativeHelper.js\" type=\"text/javascript\"></script>"
}
Anyone got any ideas on how to get this working correctly and show the audio widget? Here is the expected output on the UI:
