Play audio on Hover Image

Description

• play audio on hover image, click image will open new page
• you can adjust volume, loop,..
• view demo – password: abc
• buy me a coffee

#1. Install Code

If you use Personal/Basic Plan and your plan doesn’t support Injection, you can see #2.2

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

At URL > Choose File

Upload Audio file

Result like this

#1.2. You can add URL to IMAGE ALT TEXT option

Something like this (will open Google on click image)

or this (will open About Page on click image)

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

Click Advanced > Paste this code

<!-- 05.26c04v1 Play Audio in Hover Image -->
<script>
window.AUDIO_HOVER_CONFIG = {
  loop: true,
  volume: 0.8,
  fadeInDuration: 300,
  fadeOutDuration: 400,
  mobileUseTap: true
};
</script>
<script src="https://code.beaverhero.com/imageblock/0526c04v1playaudioonhoverimg.js"></script>

#2. Customize

#2.1. You can change all options here

<script>
window.AUDIO_HOVER_CONFIG = {
  loop: true,
  volume: 0.8,
  fadeInDuration: 300,
  fadeOutDuration: 400,
  mobileUseTap: true
};
</script>

#2.2. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block to current page.

Then use this code into Markdown.

<script>
window.AUDIO_HOVER_CONFIG = {
  loop: true,
  volume: 0.8,
  fadeInDuration: 300,
  fadeOutDuration: 400,
  mobileUseTap: true
};
</script>
<script src="https://code.beaverhero.com/imageblock/0526c04v1playaudioonhoverimg.js"></script>