How to Embed Audio on a Page
Video:
Article:
In Convertri, you can embed audio files using our HTML feature. First, you will need web hosting for your audio files. Both Amazon S3 and SoundCloud let you store your audio files with them for free so in this tutorial, we’ll show you how to use them as a resource to embed your audio files to your Convertri funnel pages.
Using Amazon S3
For Amazon, once you’ve successfully uploaded your file, grab the Object URL of the file:
You will need the relevant HTML code to embed the audio to your Convertri page using our custom HTML element feature.
Using SoundCloud
If you’re using SoundCloud, after you’ve successfully uploaded the audio track, simply go to your track:
Click Share.
Select Embed.
Grab the code.
Creating an HTML Code with Amazon S3 Object URLs
Next, you’ll need to create an HTML code such as the one here:
<audio controls><source src="https://example.com/audio.mp3" type="audio/mp3"></audio>
To create an HTML code that will include your audio file, replace the underlined part between the quotation marks of the code with your Amazon S3 Object URL:
<audio controls><source src="https://example.com/audio.mp3" type="audio/mp3"></audio>
So, if the Amazon S3 Object URL is:
<a href="https://s3.amazonaws.com/marketing.convertri.com/Audio+sample.mp3">https://s3.amazonaws.com/marketing.convertri.com/Audio+sample.mp3</a>
<audio controls><source src="https://s3.amazonaws.com/marketing.convertri.com/Audio+sample.mp3" type="audio/mp3"></audio>
Please note that if the type of audio file is not an mp3, you will have to adjust that in the HTML code. For example, if the uploaded file was in Waveform format then the object URL would end in .wav and not .mp3
Seen here:
<a href="https://s3.amazonaws.com/marketing.convertri.com/Audio+sample.wav">https://s3.amazonaws.com/marketing.convertri.com/Audio+sample.wav</a>
You would then need to identify the file source in the HTML code by editing the type like this:
<audio controls><source src="YOUR URL HERE" type="audio/wav"></audio>
Creating an HTML Code with SoundCloud
Since the embed code in HTML is already an HTML code, no adjustments will be needed.
Embedding Your Audio File Via Our HTML Feature
Now that you have the HTML code, it’s time to add it to your page!
1. In the Elements Tray, click on the HTML element to add it to your page.
2. With the HTML element selected, click on HTML Element Properties in the Properties Panel.
3. Enter your custom HTML code, and click Save.
NOTE: Your HTML element might not look how you expect in the Page Builder, so it's a good idea to check everything's working by hitting Preview before you publish. (It’s not an error if your HTML element doesn’t display properly in the editor view: it just means it’s easier for Convertri to display a placeholder instead of foreign code that might interfere with the canvas.)
Here’s what the HTML codes will look like on the Preview Page:
