(Free) Audio over Image

Description

• audio icon over Image Block
• click audio icon will play audio (mp3)
• plus/minus icons to adjust volume
• view demo – password: abc
• buy me a coffee if it helpful

#1. Install Code

You need to do 3 steps to install code.

• Adding Audio to Image Blocks
• Adding Anchor Link to Section
• Adding code to Page Header Injection

If you use Personal/Basic Plan, message me, I will install code for you.

#1.1. First, you need to edit Image Block > Click Attach Link

At URL > Choose File

Upload Audio file

Result like this

#1.2. Hover on top right of section where you use Image Block > Click Edit Section

At Anchor Link, enter word: audio-image

audio-image

#1.3. Hover on Page where you added Image Blocks > Click Gear icon

Next, click Advanced > Paste this code

<!-- Audio over Image -->
<style>
  :root {
  --audio-position-left: 12px;
  --audio-position-bottom: 12px;
  --space-audio-plus-minus: 12px;
  --audio-circle-size: 44px;
  --audio-circle-size-mobile: 30px;
  --audio-circle-style: 1px solid rgba(255,255,255,.95);
  --audio-icon-color: #fff;
  --audio-icon-size: 18px;
  --audio-plus-minus-color: #fff;
  --audio-plus-minus-size: 22px;  
  }
</style>
<link rel="stylesheet" href="https://code.beaverhero.com/imageblock/audiooverimg.css"/>
<script src="https://code.beaverhero.com/imageblock/audiooverimg.js"></script>

#2. Customize

All style options here: Line 03 to Line 14

:root {
 --audio-position-left: 12px;
 --audio-position-bottom: 12px;
 --space-audio-plus-minus: 12px;
 --audio-circle-size: 44px;
 --audio-circle-size-mobile: 30px;
 --audio-circle-style: 1px solid rgba(255,255,255,.95);
 --audio-icon-color: #fff;
 --audio-icon-size: 18px;
 --audio-plus-minus-color: #fff;
 --audio-plus-minus-size: 22px;  
 }