How to Embed a Microphone in a Webpage

Our embedded widget lets you add recording capabilities to any webpage or survey with just a few lines of code.

Phonic offers the ability to embed a single Phonic microphone inside of an existing web page. The basic code needed to make this happen is shown below. Simply change the survey ID and question ID to those which match the survey/question combination you want to store the results.

<script type="text/javascript" src="">

Sample Recorder

The recorder below is what you'll see by default with the code snippet above. This sample is hooked up to a demo Phonic survey.

Where to find survey ID and question ID

Each Phonic survey & question has its own unique identifier. When using Phonic embedded it's important that the correct survey and question IDs are used to assure seamless upload to the right place. You can find these ID's in the URL when you visit the question page in the Phonic dashboard.


Customizing Styles

The size, theme & prompt attributes can all be customized.

  • size can be set to either large (default) or small.
  • theme can be set to either square (default) or round.
  • prompt can be optionally included to include a question prompt above the recorder.
  • spacing can be added above and below the recorder by specifying a CSS attribute, ex. spacing="10px".
  • recordButtonColor can be optionally included to specify the color of the record button. The default color is red.
  • recordButtonTextColor can be optionally included to specify the color of the "Record" text on the record button. The default color is white.

Customizing Behaviour

  • backupText can be set either true or false to enable a backup text box as an alternative to recording audio.
  • audioRecordingFormat can be set to either WAV or MP3.
  • startRecordingImmediately begins recording immediately. This is only available for WAV (not MP3).
  • autoSubmit submits immediately after someone clicks record.
  • micCheck can be set true to let respondents verify their microphone works without submitting a response.
  • showCounter can be set to true to display a timer counting up during recording.
  • showPlayback can be set to true or false to allow the user to playback their audio afterwards. This defaults to true.
  • platform can be set to either decipher, spss, qualtrics, or left blank.

Customizing Text

  • labelFormat can be set to custom, enabling all other labels to be modified as well:

    • recordText, the default of which is "Record".
    • rerecordText, the default of which is "Re-Record".
    • submitText, the default of which is "Submit".
    • doneText, the default of which is "Done!".