Question T17544
Visible to All Users

Audio, Video support in Survey questions

created a year ago

We have the following cases to be handled:

  1. Audio, video to be the options of the question for the user to select.
    I see that we have a ImagePicker capability for Image and Video, but is there a similar capability for Audio as well.

  2. Audio, video, image upload as a response to a question.

Kindly help on the above two scenarios.

Answers approved by surveyjs Support

created a year ago

Hello Ajay,
You can display images and videos in a survey using the Image and Image Picker questions: View Demo.
To allow users to select videos, you can use Image questions to visualize videos and use another question such as Checkboxes, Radiogroup to allow users select a suitable option.
To allow users to play audios in a survey, consider the following options.

HTML Question with the <audio> HTML element

Create an HTML question with the audio HTML element.

JSON
... "type": "html", "name": "question1", "html": "<audio controls><source src=\"https://www.w3schools.com/html/horse.mp3\" type='audio/mp3'></audio>" ...

Try this example.

A custom Widget

You can implement a custom audio widget to render HTML with the audio element. An example is available here.

For more information on how to create custom widgets, please refer to our documentation.

To allow users to upload images and videos, and audios use the File Upload question.
To allow users to record an audio within a form, you may use a third-party microphone widget. Depending on your JavaScript library, you may consider integrating a third-party Angular, React, or Vue3 component. If you run jQuery or Knockout, try the Microphone widget. A demo is available at Widget Microphone with validations.

Let me know if you require further assistance.

    Comments (3)

      Thanks for the quick reply.

      However I see, that Youtube based video links are not rendered. Can you please help on this.

        Hello Ajay,
        Please ensure that you enabled the "youtube" content mode.

        JSON
        { "type": "image", "name": "surveyJS-integration-tutorial", "imageLink": "https://youtu.be/RAXo6pzOczQ", "contentMode": "youtube", "imageHeight": 450, "imageWidth": 800 }

        Thanks

          Thanks for the quick reply.