Creating an auto replay video from audio

Amine

July 19, 2022 14:25

I want to create/generate videos on the fly by concatenating my audio url with a cloudinary small video/Gif that will replay automatically until the audio played from the url ends.

1

• 

  Tamara Yulevich

  July 20, 2022 14:00 Edited

  Hi there,

  Thanks for reaching out. 

  You can achieve that by overling a video or a gif on an audio file:
  https://res.cloudinary.com/demo/video/upload/l_video:hourglass_timer,e_loop:14/fl_layer_apply/electronic.mp4

  I overlayed `hourglass_timer` video on `electroinc` audio and chose the loop to be 14 times because the length of the audio is 3:14 and the length of the video is 14 so 3:14 = 194 seconds divided by 14 = ~14 :)

  You can also use a gif of your choice, docs are here.

  Hope this helps, please let me know if you have any further questions.

  Best regards,
  Tamara

   

  1
• 

  Amine

  July 21, 2022 08:46

  Thanks Tamara, you look smart
  is it still possible to add subtitles and/or watermark/Text-overlay ?
  God bless you

  1
• 

  Tamara Yulevich

  July 21, 2022 09:42

  Hi there and thanks! 😄

  Yes, you can add text, here is an example: 

  https://res.cloudinary.com/demo/video/upload/l_video:hourglass_timer,e_loop:14/fl_layer_apply/l_text:Verdana_75_bold_underline_letter_spacing_14:Hi%20there!%20:D/fl_layer_apply/electronic.mp4

  And yes, you can add watermarks here is an example: 

  https://res.cloudinary.com/demo/video/upload/l_video:hourglass_timer,e_loop:14/fl_layer_apply/l_cloudinary_icon_blue/c_scale,w_300/o_50/e_anti_removal:90,fl_layer_apply,g_north_east/electronic.mp4

  And yes, you can add subtitles here is an example: 

  https://res.cloudinary.com/demo/video/upload/l_video:hourglass_timer,e_loop:14/fl_layer_apply/l_subtitles:sample_sub_en.srt/fl_layer_apply/electronic.mp4

  And here is everything combined (with text, subtitles and watermark): 

  https://res.cloudinary.com/demo/video/upload/l_video:hourglass_timer,e_loop:14/fl_layer_apply/l_text:Verdana_75_bold_underline_letter_spacing_14:Hi%20there!%20:D/fl_layer_apply/l_cloudinary_icon_blue/c_scale,w_400/o_50/e_anti_removal:90,fl_layer_apply,g_north_east/l_subtitles:sample_sub_en.srt/fl_layer_apply/electronic.mp4

  Please let me know if there is anything else I can help you with :)

  Kind regards, 

  Tamara

  1
• 

  Amine

  July 21, 2022 18:03 Edited

  Great! I appreciate your effort 👍
  So subtitles should be ether
  in a .srt file url or to be generated with google addon right..
  What about a text (a variable inside the res.cloudinary...url..) horizontally passing from right to left at a speed proportionate to the total duration..

  
  If this is possible, can it start to show 0.5s or so after video starts ?
  What you did is already amazing!!
  Thank you very much Tamara

  1
• 

  Thomas Gurung

  July 22, 2022 17:28

  Hi Amine,

  Thanks for getting back and glad Tamara could help! :) She's currently not available so let me answer your follow-up questions. 

  So yes we support SRT and WebVTT when it comes to subtitles, more here.

  Unfortunately, it's not possible to pass text in the URL and have them move from right to left or vice-versa at a speed proportionate to the total duration of the video but this is a great idea and I would recommend submitting it to our roadmap.

  Please do not hesitate to ask me any other questions or queries.
  
  Kind Regards,
  Thomas

  1
• 

  Amine

  July 27, 2022 18:12

  Thank you Thomas! 

  in fact about about adding audio layer.. I am trying to add this mp3 link to a video but doents work, can you help me with it ?

  https://azureapi-tts.herokuapp.com/ec60be2a-7b70-47af-b63e-bec27d27df3d.mp3

  this url will be dynamically generated from my script and concatenated to the example of mentioned by Tamara  : Yes, you can add text, here is an example: 

  https://res.cloudinary.com/demo/video/upload/l_video:hourglass_timer,e_loop:14/fl_layer_apply/l_text:Verdana_75_bold_underline_letter_spacing_14:Hi%20there!%20:D/fl_layer_apply/electronic.mp4

   

  Thank you for the valuable contribution,

  Yes I will submit the feature request of the sliding text..

  Regards,

  0
• 

  Tamara Yulevich

  July 28, 2022 08:58

  Hi Amine,

  The link you shared is not an mp3 file, I attached here what I see when I click the link :)

  Btw you can also submit a private ticket if you don't want to share your URL publicly and get a more personalized answer.

  Kind regards, 

  Tamara

  

  1
• 

  Amine

  July 28, 2022 09:28

  In fact it was an expired link from my Heroku.. here is one mp3 example

  https://samplelib.com/lib/preview/mp3/sample-3s.mp3

  I want to add it to the concatenatrd url models you showed before.
  Thanks alot!

  1
• 

  Tamara Yulevich

  July 28, 2022 14:20 Edited

  Hi Amine, 

  Thanks for the additional info, 

  I uploaded the file you shared to our demo account for demonstration purposes, but I can delete it if you don't want it to be there. I uploaded it and just changed the file extension to be .mp4 file in the URL and it works like a charm:

  https://res.cloudinary.com/demo/video/upload/l_video:hourglass_timer,e_loop:14/fl_layer_apply/l_text:Verdana_75_bold_underline_letter_spacing_14:Hi%20there!%20:D/fl_layer_apply/sample-3s.mp4

  Original file: 

  https://res.cloudinary.com/demo/video/upload/sample-3s.mp3

  
  Please let me know if you have any further questions!

  Best, 

  Tamara

  1
• 

  Amine

  July 28, 2022 15:09 Edited

  Awesome, the only difference is that the mp3 would not be uploaded.. it should still the same https..link added to res.cloudinary... I have done this before with images from outside cloudinary.. edited on the fly .. like this
  https://res.cloudinary.com/dgywb1dzr/image/fetch/c_scale,w_1600,h_1000/if_w_gte_400,w_900,h_135,co_gray,b_rgb:fff,dn_159,o_90,r_11,y_2,l_text:montserrat_90_bold:Location/https://content.avito.ma/images/10/10015435196.jpg

  The video should be static.. I mean from my cloudinary (better if also dynamic url) and the audio should be dynamically changed url witch I would just concatenate to res.cloudinary... programmatically.
  Thanks always for your valuable assistance!!

  1
• 

  Tamara Yulevich

  July 28, 2022 15:29

  Hi Amine,

  The fetch feature supports only image assets, if you want to use .mp3 files you have to use Auto Upload. Don't worry, you can use Auto-uploading with on-the-fly transformations. 😊

  Kind regards, 

  Tamara

  1
• 

  Amine

  July 28, 2022 15:37

  Great.. I just can't figure out myself.. it would be a happy ending if you could write me an example that auto uploads this
  https://samplelib.com/lib/preview/mp3/sample-3s.mp3
  to this (our previous example)
  https://res.cloudinary.com/demo/video/upload/l_video:hourglass_timer,e_loop:14/fl_layer_apply/l_text:Verdana_75_bold_underline_letter_spacing_14:Hi%20there!%20:D/fl_layer_apply/electronic.mp4

  And you have saved my valuable life.
  All my Best wishes

  1
• 

  Danny Valentine

  July 29, 2022 15:35

  Hi Amine.

  As this requires using Auto Upload which maps a folder within Cloudinary to an external location, the best thing to do is to use the video as the base layer, and add the music on top.

  I've set up a mapping so any requests to /forumdemo/ will fetch resources from https://samplelib.com/lib/preview/mp3/. If we take hourglass_timer.mp4 as the base layer and then "overlay" forumdemo/sample-3s we get the following URL (including your text transformations from before): https://res.cloudinary.com/demo/video/upload/l_video:forumdemo:sample-3s,e_loop:14/fl_layer_apply/l_text:Verdana_75_bold_underline_letter_spacing_14:Hi%20there!%20:D/fl_layer_apply/hourglass_timer.mp4

  If you haven't already, have a look at the documentation Tamara sent as it has some great explanation and examples for Auto Uploads.

  I hope this helps. Let us know if you need anything further. 

  Thanks,
  -Danny

  1

Post is closed for comments.