How to embed audio files on online forms?

How to embed audio files on online forms?

Unfortunately, 123FormBuilder does not offer an audio field for users to add audio files that can run on their online forms. We do, however, offer the possibility for our users to embed audio files with the HTML Block field. Be cautious, as some HTML codes are not compatible with all browser versions and some of your form visitors might not be able to listen the audio you have placed on the form. This guide might not help users that use older browsers.

embed audio on web form

The audio file needs to be uploaded on a server, from where its URL will be passed in a HTML code. You can also use online services that generate an URL of the audio you have uploaded.

To embed audio files on a web form, simply access the Form Editor and add the HTML Block (Advanced Field) to your form. Select the HTML Block, go to Edit FieldEdit HTML Block and press Source code. Delete all content and paste the following code:

<audio src="http://my domain.com/audio.ogg" controls="controls"></audio>

Replace the URL with the one of your audio file. This code will add the browser’s default audio player on your form which will launch the audio once the play button has been pressed. Each browser will display a different audio player. Make sure the URL ends with the extension of your audio file (mp3, wav, ogg, midi, etc.). Notice that in this example, the audio file is called audio with the extension .ogg.

To make the audio start automatically when the form is opened, include autoplay=”autoplay” in the code as seen below:

<audio src="http://my domain.com/audio.ogg" controls="controls" autoplay="autoplay" ></audio>

Note: Upon setting the audio file to run automatically, it will also run in your Form’s editor. You can stop it from playing through its controls on the form.

If you want the audio to run continuously during the session, add the parameter loop=”loop” as shown below:

<audio src="http://my domain.com/audio.ogg" controls="controls" autoplay="autoplay" loop="loop" ></audio>

Use case scenario
Let’s say you’ve created a booking form for a concert and want to welcome your ticket buyers with a fragment of the artist’s composition. Add the HTML Block filled with the embed code to your booking form. If you prefer, you can hide the audio player as follows:

Add <p style=”display:none;”> in front of the code and </p> at the end.

<p style="display:none;"><audio src="http://my domain.com/audio.ogg" controls="controls" autoplay="autoplay" 
loop="loop" ></audio></p>

Your audio player will no longer be displayed on the form, although it will automatically run if it’s set to do so when the form is accessed.

Live Demo: Visible Audio Player | Hidden Audio Player
The online forms run a piano song.

embed audio on form

If you want to embed a song from your SoundCloud account on your online form, simply copy the song’s embed code and paste it inside the HTML Block field. The code will generate SoundCloud’s standard player on the online form, which form users can use to play or stop the song.

Olivian Stoica
Olivian Stoica
Oli's enthusiasm for helping our fellow users led him to write thorough know-how articles and tutorials that would make form building a bliss on 123FormBuilder.

Leave a Reply

Your email address will not be published. Required fields are marked *