Open dosstx opened 1 month ago
Something like this?
<template>
<div
id="elevenlabs-audionative-widget"
:data-height="size === 'small' ? '90' : '120'"
data-width="100%"
data-frameborder="no"
data-scrolling="no"
:data-publicuserid="publicUserId"
data-playerurl="https://elevenlabs.io/player/index.html"
:data-small="size === 'small' ? 'True' : 'False'"
:data-textcolor="textColorRgba ?? 'rgba(0, 0, 0, 1.0)'"
:data-backgroundcolor="backgroundColorRgba ?? 'rgba(255, 255, 255, 1.0)'"
>
<slot />
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
defineProps({
publicUserId: {
type: String,
required: true
},
textColorRgba: {
type: String,
required: false
},
backgroundColorRgba: {
type: String,
required: false
},
size: {
type: String as PropType<'small' | 'large'>,
required: false
}
})
useHead({
script: [
{
src: 'https://elevenlabs.io/player/audioNativeHelper.js',
async: true,
tagPosition: 'bodyClose'
}
]
})
</script>
Thank you. I'll give it a try and report back:)
Please provide a Vue (or Nuxt) example for integrating Audio Native using API method. I'm trying to convert the react version you have, but not much luck at the moment. Thank you.