Bubble API to return mp3/wav sound object? Related to TTS (Text To Speech) - IBM Watson [SOLVED]

Hi Bubblers.

I have an API call to IBM Watson to convert text to speech. The API passes text as JSON with header parameters. Watson returns an audio file. For the sake of this post, I’m using an audio/wav format return from the API.

The problem I’m facing is that the Bubble API Data Type doesn’t seem to have an option for an mp3 or wav audio file, or object.

Any ideas on how to receive a sound file back from an API call?

Here’s my API setup:

To be clear, I do have this working. The API POST works both in workflow and also directly with the Circle Music Player. But I can only get this working by fooling Bubble that it’s an image:

Surprisingly, the Circle Music Player can play this sound file even though it looks like a png image :smiley:

So what I’d really like is to have a Bubble Data Type in my API where I can specify a sound file, or an object, or my own custom name.

Any suggestions?

I believe this because bubble treats files and images data type in a very similar fashion.

I don’t think you can! But then again its working :wink:

you could use Ajax and connect to the api and receive the file inside an action using the plugin builder, i have also made an app to select returned JASON data so depending on what is returned that may help too. the other thing is though if you store the “png” file and put the link into the navigate to external web page to download it you would find it is a wav file either with or without the right extension. you could even just have a bit of js rename the .png to the correct extension.

Hi Jarrad. Thanks for the approach. It got me thinking, so I created my own plugin (for the first time) and had some fun with that, using the IBM Watson API and adding a couple of Actions. Awesome possibilities to extend Bubble :slight_smile:

But as far as I can see there is no way to rename the file from “…/image.png” to “…/sound.wav” for example. Bubble automatically stores it as an image and I don’t have access to any APIs on their AWS CDN. And if I use a different data type other than “image” on the API POST call then the API call doesn’t work.

the api connector is pretty standalone for the most part… i mean create an action to pull the data by writing a script to make the call and download the file.

1 Like

So @jarrad, I’ve been trying out Actions in a custom plugin. But only client-side actions are allowed - so it seems it’s not possible to: a) run a custom action in a workflow that provides a result that can be used in the next workflow step, b) change any “property.field” passed to the Action from the workflow step (such as a multi-line text), or c) save anything to the database. I’m thinking these are all considered server-side actions which are “coming soon” from Bubble.

If I could figure out a way to save a value to the database using custom Action that would be a good starting point, or even just to change a Multi-line text value.

Thoughts?

most of us use elements when there is alot of in/outputs, although you can .get and also uploadContent in the action size. use an element for the base of it and all we do is 0-width 0-height the element. as for your case of an api call i would have thought ajax to call the api and return the file then uploadContent attachedto a bubble thing?

i will make something up…

whats the app’s name your working in? i have made a plugin that will allow you to either modify the filename and extention (filetype) or modify and download the file if you would like to try it out?

So after some whizzing around trying out a ton of stuff, we’re still not there with this.

  • Can’t use Ajax, since that’s run in the browser and cross-domain POST APIs are not allowed due to CORS (Watson API requires authentication so shouldn’t put that in the browser anyway).
  • Can’t use a bubble custom plugin Action, since that’s only run in the browser and not at server
  • Can’t use API Connector since that doesn’t allow objects to be returned as a Data Type
  • Can’t use Zapier Webhooks to call Watson API since that doesn’t return an object (probably same limitations as CORS)

Frustrating that the API Connector can’t be extended to handle other data types :confounded:

Still searching out a few more options…

Just a thought here. Do you have to use Watson. Is there another API out there that generates the MP3 and provides you with the URL

There are others. But Watson has the best TTS quality right now compared against the other 10 or so that I’ve checked out.

More importantly, using 3rd party services via API to provide value-added services in my own apps is common for the type of apps I intend to roll out. And in most cases these 3rd party services will be chargeable and therefore have authentication so have to be server-to-server.

I’ll find a workaround, but I do see this as a strong limitation on Bubble (everything else is very cool, except not having a dynamic repeating group height :slight_smile: ). I know @emmanuel is going to roll out server-side custom plugin capability at some point, but I have to find something that works well now.

Hi Jarrad. I’d be really keen to see the bit of code that you have to rename a filename and extension :smiley: At least I could use the API Connector to receive the sound file as an “image” data type then rename it (I couldn’t figure out how to do this since it’s on Bubble S3). Could you PM me with the code? or share screenshots here?

So finally cracked it :vulcan_salute:t2:

I’ve got the synchronous update working. Now doing the asynchronous version for bulk updates. Will update this post once I’ve got it bedded down with details, screenshots, and code.

Had to learn lots of new lessons doing all this, so learned a lot in the process about what doesn’t work at the same time :wink:

4 Likes

@gakanimal Any tips how to upload audio file to Bubble API with file type, need help on that, thanks.

1 Like

Hi @JohnMark - haven’t tried it myself yet, but you should be able to handle that via a name/value parameter set up as a “file” type in your API, and send your file data in Base64 format.

2 Likes

Hi @gakanimal, do you have an example with the jpeg file? The base64 is to convert any file in a saving data, but how after that I can read the audio with the jplayer audio?

I’m not using an “image” (that was in my first post that I resolved). In your case you can save a sound file via the API, and use the plugin “circle music player” to play the sound, and a snippet within the HTML element to allow the user to download the file to their desktop.

2 Likes

Oh I need this integration, can you share the full calls ?
thanks