menu

Vev

We are building a powerful and collaborative site builder for teams. The best of no-code and code combined.

Channels
Team

A basic widget for playing audio

October 9, 2019 at 9:03am

A basic widget for playing audio

October 9, 2019 at 9:03am
Would love to see a simple widget containing artist title, a audio file/song titel, a clickable/dragable timeline, play and pause buttons and maybe the possibility to change colours. Would be fabulous if the audio file could be uploaded the same way as video files and images etc.

October 9, 2019 at 9:11am
Hey Philson Philson! As of right now, we don't have a <FileSelect field which can let you upload files like video files / images, but it's definitely on the board. (In the meantime our users tend to use aws / google storage to host their files). When you have the URL to the videofile, it's pretty easy to use the <audio tag https://html5tutorial.info/html5-audio.php to handle the actual playback, and then write your own adjustable control bar - if you know basic HTML/Javascript. If not, then I'll jot this up as a request and it should be available in the near future :)
  • reply
  • like
Hello Joakim, and many thanks for the reply :) Well, the problem is that I don't really know those basics... I'll try to figure it out, but if you have the time and will to add it you would make me one happy user!
  • reply
  • like
Hey again Philson Philson! Unfortunately we don't have the time to create and QA a new public audio widget at this current time, but I've sketched up an MVP for you! :)
Note that this code assumes you've added two icons under the "Icons"-section of the 1st page of the widget-creator. One with the name play and one with the name pause. This widget doesn't have any form-fields though, you might want to create a <TextField url .. /> where you input mp3 / ogg file URL's, which you then fetch from the props of the widget-code!
Here's some resources to get you started in the developer, in case you missed it: https://help.vev.design/hc/en-us/articles/360017804113-Getting-started
And I'll also provider you with the source code for our own Video widget, which would be pretty similar to the Audio-widget you want: https://help.vev.design/hc/en-us/articles/360023780314-Video-Widget-Section
Ask if you have any questions.
  • reply
  • like
You're an angel! Thank you very much :)
like-fill
1
  • reply
  • like
You're absolutely welcome Philson Philson!
  • reply
  • like