Simple Play/Pause Button for Embedded Audio on My Landing Page

  • 9 February 2021
  • 4 replies
  • 220 views
M

I’m interested in embedding an audio file (podcast episode) on my landing page but I do not want it to be in the form of an embedded audio player from hosting service like sound cloud or blubrry. I would like it to be a simple play/pause button and am looking for recommendations on how I might be able to do that.

4 replies

Hristian
Userlevel 7
Badge +3

Hey @Max_Porter,

You’ll need some kind of player to be able to embed a podcast episode. If not SoundCloud or the like then something else.

These players have 2 main jobs - hosting the content and allowing the visitor to interact with it (play/pause/etc.).

You can always host the content yourself on your own server and use a player of your liking also hosted by yourself but in most cases it’s easier to use a done-for-you solution.

Best,
Hristian

P.S. You can’t upload the audio file directly on Unbounce hence the need for a player. You might be able to get away with it if you upload it as a YouTube video and embed that instead.

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
Kyle.Carline

I have had to place custom audio players on Unbounce before.

I grabbed the .mp3 that was hosted on the client’s website and build an HTML player using the <audio> element.

If you’re able to get the .mp3 URL, I could help you build a simple player that works inside the browser.

M

Hi Kyle,

That would be great. I assume you charge for this?

Kyle.Carline

@Max_Porter If you are able to add this code as custom HTML and CSS styling into your Unbounce page, then I don’t think so.

If you want something even more customized than this, that will involve some development work. I’m only a novice there but if you’re in a pinch, we can discuss in a direct message.

Here is an example of the basic styling we can do with a browser audio player. You can replace the .mp3 url with your mp3 from wherever that is hosted.

Add the custom CSS. You can change the background color to whatever you want. This is styled so that it only shows the play/pause button (and the required menu dots, can’t remove those).

<style>
audio{
width: 100px !important;
}
audio::-webkit-media-controls-play-button{
background-color:#ee7666 !important;
}
audio::-webkit-media-controls-panel{
background-color:#ee7666 !important;
}
audio::-webkit-media-controls-current-time-display{
display:none !important;
}
audio::-webkit-media-controls-current-time-display{
display:none !important;
}
audio::-webkit-media-controls-time-remaining-display{
display:none !important;
}
audio::-webkit-media-controls-timeline{
display:none !important;
}
audio::-webkit-media-controls-mute-button{
display:none !important;
}
</style>

And this is the custom HTML, you can drag/drop the custom HTML box to wherever you need your player to be. Then paste the code in it.

<audio controls>
<source src="https://ia801805.us.archive.org/18/items/childrensshortworks042_2011_librivox/csw042_rapunzel_sp_64kb.mp3" type="audio/mp3">
So sorry for this issue. But your browser does not support this audio.
</audio>

Reply


Terms & ConditionsCookie settings