Description
- audio icon over Image Block
- click audio icon will play audio (mp3)
- plus/minus icons to adjust volume
- view demo – password: abc
#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
Note: If you need to apply effects to images in multiple sections, and you can’t fill in the same wording in all sections.
You can use anchor link like this: audio-image02, audio-image03, audio-image04…
#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;
}
section[id*="audio-image"] .tp-audio-host{position:relative}section[id*="audio-image"] .tp-audio-controls{position:absolute;left:var(--audio-position-left);bottom:var(--audio-position-bottom);gap:var(--space-audio-plus-minus);display:flex;align-items:center;z-index:999;pointer-events:auto}section[id*="audio-image"] .tp-audio-main{width:var(--audio-circle-size);height:var(--audio-circle-size);border-radius:999px;background:#fff0;border:var(--audio-circle-style);display:flex;align-items:center;justify-content:center;color:var(--audio-icon-color);cursor:pointer;padding:0;line-height:1}section[id*="audio-image"] .tp-audio-main svg{width:var(--audio-icon-size);height:var(--audio-icon-size);display:block;fill:currentColor}section[id*="audio-image"] .tp-audio-side{background:#fff0;border:0;padding:0;width:auto;height:auto;color:var(--audio-plus-minus-color);font-size:var(--audio-plus-minus-size);line-height:1;cursor:pointer}@media screen and (max-width:767px){.tp-audio-main{width:var(--audio-circle-size-mobile)!important;height:var(--audio-circle-size-mobile)!important}}
</style>
<script>
!function(){var t='section[id*="audio-image"]',e=/\.(mp3|m4a|wav|ogg)(\?.*)?$/i,a=null;function n(t){if(t&&"1"!==t.dataset.tpAudioBound){var n=function(t){var a=t.closest("a.sqs-block-image-link");if(a){var n=(a.getAttribute("href")||"").trim();if(n&&e.test(n))return n.startsWith("http")?n:window.location.origin+n}return""}(t);if(n){var i=function(t){return t.closest(".sqs-image-content")||t.closest(".fluid-image-container")||t.closest(".sqs-block-content")||t.parentElement}(t);if(i)if(i.querySelector(".tp-audio-controls"))t.dataset.tpAudioBound="1";else{t.dataset.tpAudioBound="1",i.classList.add("tp-audio-host");var o=new Audio(n);o.loop=!0,o.preload="none",o.volume=.35;var r=document.createElement("div");r.className="tp-audio-controls",r.innerHTML='<button class="tp-audio-side tp-audio-plus" type="button" aria-label="Increase volume">+</button><button class="tp-audio-main tp-audio-toggle" type="button" aria-pressed="false" aria-label="Toggle audio"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10v4c0 .55.45 1 1 1h3l5 4V5L7 9H4c-.55 0-1 .45-1 1z"></path><path d="M16.5 8.5a1 1 0 0 1 1.41 0 6 6 0 0 1 0 7.07 1 1 0 1 1-1.41-1.41 4 4 0 0 0 0-4.24 1 1 0 0 1 0-1.42z"></path><path d="M19.3 5.7a1 1 0 0 1 1.41 0 10 10 0 0 1 0 14.14 1 1 0 1 1-1.41-1.41 8 8 0 0 0 0-11.32 1 1 0 0 1 0-1.41z"></path></svg></button><button class="tp-audio-side tp-audio-minus" type="button" aria-label="Decrease volume">−</button>',i.appendChild(r);var u=r.querySelector(".tp-audio-toggle"),d=r.querySelector(".tp-audio-plus"),s=r.querySelector(".tp-audio-minus");u.addEventListener("click",(function(t){var e;if(t.preventDefault(),t.stopPropagation(),!o.paused&&!o.ended){try{o.pause()}catch(t){}return u.innerHTML='<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10v4c0 .55.45 1 1 1h3l5 4V5L7 9H4c-.55 0-1 .45-1 1z"></path><path d="M16.5 8.5a1 1 0 0 1 1.41 0 6 6 0 0 1 0 7.07 1 1 0 1 1-1.41-1.41 4 4 0 0 0 0-4.24 1 1 0 0 1 0-1.42z"></path><path d="M19.3 5.7a1 1 0 0 1 1.41 0 10 10 0 0 1 0 14.14 1 1 0 1 1-1.41-1.41 8 8 0 0 0 0-11.32 1 1 0 0 1 0-1.41z"></path></svg>',u.setAttribute("aria-pressed","false"),void(a&&a.audio===o&&(a=null))}!function(){if(a){try{a.audio.pause()}catch(t){}a.btn.innerHTML='<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10v4c0 .55.45 1 1 1h3l5 4V5L7 9H4c-.55 0-1 .45-1 1z"></path><path d="M16.5 8.5a1 1 0 0 1 1.41 0 6 6 0 0 1 0 7.07 1 1 0 1 1-1.41-1.41 4 4 0 0 0 0-4.24 1 1 0 0 1 0-1.42z"></path><path d="M19.3 5.7a1 1 0 0 1 1.41 0 10 10 0 0 1 0 14.14 1 1 0 1 1-1.41-1.41 8 8 0 0 0 0-11.32 1 1 0 0 1 0-1.41z"></path></svg>',a.btn.setAttribute("aria-pressed","false"),a=null}}();try{e=o.play()}catch(t){e=null}var n=function(){u.innerHTML='<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 5h4v14H6zm8 0h4v14h-4z"></path></svg>',u.setAttribute("aria-pressed","true"),a={audio:o,btn:u}};e&&"function"==typeof e.then?e.then(n).catch((function(){})):n()}),{passive:!1}),d.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),c(o.volume+.1)}),{passive:!1}),s.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),c(o.volume-.1)}),{passive:!1}),o.addEventListener("ended",(function(){u.innerHTML='<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10v4c0 .55.45 1 1 1h3l5 4V5L7 9H4c-.55 0-1 .45-1 1z"></path><path d="M16.5 8.5a1 1 0 0 1 1.41 0 6 6 0 0 1 0 7.07 1 1 0 1 1-1.41-1.41 4 4 0 0 0 0-4.24 1 1 0 0 1 0-1.42z"></path><path d="M19.3 5.7a1 1 0 0 1 1.41 0 10 10 0 0 1 0 14.14 1 1 0 1 1-1.41-1.41 8 8 0 0 0 0-11.32 1 1 0 0 1 0-1.41z"></path></svg>',u.setAttribute("aria-pressed","false"),a&&a.audio===o&&(a=null)})),window.addEventListener("pagehide",(function(){try{o.pause()}catch(t){}}),{passive:!0})}}}function c(t){o.volume=function(t,e,a){return Math.max(e,Math.min(a,t))}(t,0,1)}}function i(e){(e&&e.matches&&e.matches(t)?[e]:Array.prototype.slice.call(document.querySelectorAll(t))).forEach((function(t){t.querySelectorAll("img").forEach(n)}))}function o(){i(document);var e=new MutationObserver((function(t){t.forEach((function(t){"childList"===t.type&&t.addedNodes&&t.addedNodes.forEach((function(t){t&&1===t.nodeType&&i(t)})),"attributes"===t.type&&t.target&&"IMG"===t.target.tagName&&n(t.target)}))}));document.querySelectorAll(t).forEach((function(t){e.observe(t,{subtree:!0,childList:!0,attributes:!0,attributeFilter:["alt","src","data-src"]})}))}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",o,{once:!0}):o()}();
</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;
}
