Cloudinary audio files

[blablabla123-cell]

Hello, thank for your products, first of all. I stuck with a problem to upload audio files which are represented in cloudinary as 'video'. Does this APi supports to get audio files and play them? How should I distinguish video file from audiofile when I deliver files from cloudinary? Thanks in advance

[achumachenko-cloudinary]

Hello, and thank you for using Cloudinary! 🙂

If I understand it correctly - you are looking to differentiate (when rendering a web page) between video and audio assets to render the corresponding user interface (video player or an audio player).

You are correct, both audio files and video files are represented in Cloudinary as assets with resource_type set to video.

In order to provide more specific recommendations I'd need to know more details on the flow you are looking to implement (how assets are being uploaded to Cloudinary [user generated content/programmatically etc.], how do you plan to determine which assets need to be rendered to each HTML page).

At this point I can suggest to look into Cloudinary client-side asset list URL

• This feature would allow you to fetch list of assets that have specific tag assigned to them as JSON
  • The JSON will have format attribute associated with each asset that can be used to differentiate whether it is a video or audio data
• Make sure to unrestrict Resource list media type in the Security section of your Cloudinary account settings when using this feature

Best regards, Andrew

[blablabla123-cell]

Hi, Andrew.
It's a flutter application.

1. The user picks files of different type (currently images, videos, and audio records(m4a)). All the files are in the single array of type 'XFile' - cross-platform file type. So then, I send files to the Node.js servers in the back-end.
2. Then I upload files using this method:
   const result = await cloudinary.uploader.upload(file.path, {
   resource_type: 'auto',
   use_filename: true,
   unique_filename: false,
   overwrite: true,
   folder: event.id,
   });
   So cloudinary stores them in a single file. And Node js server stores the 'result.secure_url' of each file into the Mongo Database.
3. Then I use the 'secure_url' and based on the folder name whether it's 'images/' folder I use Image 'Widget' to display an image, when it's 'videos/' I use a VideoPlayer Widget.
   Currently a videoplayer Widget displays an audio file as a video file with black blank video and plays the audio. Which API should I use to differentiate btw videos and audios.

I have come to an idea to store the audio file as a 'raw' file in cloudinary, but in the future there will be more 'raw' type of files anyway like documents etc. and then I will be stuck again. The Example of the idea down below:
if (file.originalname.includes('.m4a')) {
// Upload file
const result = await cloudinary.uploader.upload(file.path, {
resource_type: 'raw',
use_filename: true,
unique_filename: false,
overwrite: true,
folder: event.id,
});
// Push file url to list
fileUrls.push(result.secure_url);
} else {
// Upload file
const result = await cloudinary.uploader.upload(file.path, {
resource_type: 'auto',
use_filename: true,
unique_filename: false,
overwrite: true,
folder: event.id,
});
// Push file url to list
fileUrls.push(result.secure_url);
}

[achumachenko-cloudinary]

Hi and thank you for detailing the flow you are looking to implement!

Which API should I use to differentiate btw videos and audios.

To my knowledge, the Flutter / Dart SDKs don't have methods that would allow you to distinguish video and audio assets by having the asset secure_url.

That said, I can think of the following approaches that could be used to make the distinction:

1. Have the Node app add a segment (for example /audio/ to the asset's public ID)

   • This can be achieved by setting the folder upload options attribute to event.id + '/audio' (for those files you identify to be audio files as per their extension)
   • The /audio/ segment in the secure_url can then be used to differentiate URLs for video assets from URLs for audio assets
   • Alternatively, you could have this information persisted to the Mongo database with secure_url (if realistically possible)
   • This approach won't address the problem for the assets you have previously uploaded though

2. Issue a HEAD request against the secure_url

   • The content-type header in the response will allow you make the distinction
   • This approach adds an extra HTTP request/response for each video asset you'd be rendering
   • It can be used as a "backfill" (for example, if you choose to store the audio / video differentiator in the Mongo database with the secure_url

Hope you find these suggestions to be of help.
Best regards, Andrew

[blablabla123-cell]

Good morning, Andrew. Thank you for the complete explanation, I believe this is the best approach. Just a quick question, will this plugin support Video player and Audio player features in the future? I would like to install and use the package instead of typical widgets in flutter!

[achumachenko-cloudinary]

Hi. Glad to hear you found our discussion to be of help to your project! 🙂

will this plugin support Video player and Audio player features in the future? I would like to install and use the package instead of typical widgets in flutter!

I have followed up with the team maintaining the SDK and will update you as I hear back from them.

Best regards, Andrew

[achumachenko-cloudinary]

Hi. I have heard back from the SDK team.

They are already working on the POC for the CldVideoWidget. The challenge you are solving (differentiating audio and video assets) will be taken into consideration as well, thank you!

As an additional consideration for your project (to make it future-proof), I would suggest considering that the widgets implemented in the Cloudinary Flutter SDK will require public_ids of assets as input (not the secure_url) as the underlying SDK will translate public_id to the secure_url.
For example, you may consider adding public_id with each secure_url record you are currently persisting to the Mongo database.

Hope this helps. Don't hesitate to reach out if we could be of more help.
Best regards, Andrew