(function () {
let lastCharIndex = 0;
let voiceText = "";
function blockQeTextInstant() {
const styleId = 'qetext-kill-style';
if (!document.getElementById(styleId)) {
const style = document.createElement('style');
style.id = styleId;
style.innerHTML = `
#qetext{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
pointer-events:none !important;
position:absolute !important;
left:-9999px !important;
top:-9999px !important;
z-index:-9999 !important;
}
.audio-btn-row button {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.audio-btn-row button:hover:not(:disabled) {
transform: scale(1.15);
opacity: 1 !important;
}
/* State Management CSS */
.audio-btn-row.st-stopped #pause,
.audio-btn-row.st-stopped #stop,
.audio-btn-row.st-stopped #resume,
.audio-btn-row.st-playing #play,
.audio-btn-row.st-playing #resume,
.audio-btn-row.st-paused #play,
.audio-btn-row.st-paused #pause,
.audio-btn-row.st-paused #stop {
opacity: 0.3 !important;
filter: grayscale(1);
cursor: not-allowed !important;
pointer-events: none !important;
}
/* Settings UI CSS */
.audio-settings-row {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 15px;
width: 100%;
padding: 5px 0;
}
.control-group {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.control-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.control-group label {
color: rgba(255,255,255,0.9);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
}
#speed-val {
color: #fff;
font-size: 11px;
font-weight: 700;
background: rgba(255,255,255,0.2);
padding: 2px 6px;
border-radius: 10px;
}
.control-group select {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
border-radius: 6px;
padding: 6px 10px;
font-size: 13px;
cursor: pointer;
outline: none;
transition: border 0.2s;
width: 100%;
}
.control-group select:hover {
border-color: rgba(255,255,255,0.4);
}
.control-group select option {
background: #2e7d32;
color: #fff;
}
/* Range Slider Styling */
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: rgba(255,255,255,0.2);
border-radius: 2px;
}
input[type=range]::-webkit-slider-thumb {
height: 18px;
width: 18px;
border-radius: 50%;
background: #fff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
transition: transform 0.1s;
}
input[type=range]:active::-webkit-slider-thumb {
transform: scale(1.2);
}
mark {
background-color: #ffeb3b !important;
color: #000 !important;
border-radius: 2px;
box-shadow: 0 0 5px rgba(255,235,59,0.5);
}
`;
document.head.appendChild(style);
}
if (!window.qeObserver) {
window.qeObserver = new MutationObserver(() => {
const qe = document.querySelector('#qetext');
if (qe) {
qe.style.setProperty('display', 'none', 'important');
qe.style.visibility = "hidden";
qe.style.opacity = "0";
}
});
window.qeObserver.observe(document.body, {
childList: true,
subtree: true
});
}
}
function applyFix() {
if (!document.body.classList.contains('template-product')) return;
const container = document.querySelector('.buttons');
const target = document.querySelector('.product-main .product-details .single-product-meta');
if (!container || !target) return;
blockQeTextInstant();
const hide = container.querySelector('.hide_text');
const show = container.querySelector('.showtext');
if (hide) hide.remove();
if (show) show.remove();
if (target.nextElementSibling !== container) {
target.parentNode.insertBefore(container, target.nextSibling);
}
container.style.cssText = `
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:10px !important;
margin-top:15px !important;
padding:15px 18px !important;
background:#2e7d32 !important;
border-radius:10px !important;
min-width:300px !important;
width:fit-content !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
`;
if (!container.querySelector('.audio-instruction')) {
const text = document.createElement('div');
text.className = "audio-instruction";
text.textContent = "Audio Description Settings";
text.style.cssText = `
color:#fff;
font-size:15px;
font-weight:700;
margin-bottom:8px;
border-bottom: 1px solid rgba(255,255,255,0.2);
width: 100%;
padding-bottom: 6px;
`;
container.prepend(text);
}
// --- Settings Row ---
if (!container.querySelector('.audio-settings-row')) {
const settings = document.createElement('div');
settings.className = "audio-settings-row";
settings.innerHTML = `
`;
const instruction = container.querySelector('.audio-instruction');
instruction.after(settings);
}
let btnWrapper = container.querySelector('.audio-btn-row');
if (!btnWrapper) {
btnWrapper = document.createElement('div');
btnWrapper.className = "audio-btn-row st-stopped";
btnWrapper.style.cssText = `
display:flex;
align-items:center;
justify-content: flex-start;
gap:15px;
width: 100%;
`;
container.querySelectorAll('button').forEach(btn => {
btn.style.cssText = `
display:flex;
align-items:center;
justify-content:center;
background:transparent;
border:none;
cursor:pointer;
padding:8px;
color:#fff;
`;
btnWrapper.appendChild(btn);
});
container.appendChild(btnWrapper);
}
container.querySelectorAll('svg').forEach(svg => {
svg.style.width = "20px";
svg.style.height = "20px";
});
const close = container.querySelector('.close_sbutton');
if (close && !close.dataset.done) {
close.onclick = () => container.style.display = "none";
close.dataset.done = "1";
}
// --- Enhanced Playback Logic ---
const play = document.getElementById('play');
const pause = document.getElementById('pause');
const stop = document.getElementById('stop');
const resume = document.getElementById('resume');
const textEl = document.getElementById('qetext');
const speedSlider = document.getElementById('audio-speed');
const speedVal = document.getElementById('speed-val');
if (play && pause && stop && resume && textEl && speedSlider && !play.dataset.customized) {
play.dataset.customized = "true";
function playSpeech(startIndex) {
if (!window.responsiveVoice) return;
const voice = document.getElementById('audio-voice').value;
const rate = parseFloat(speedSlider.value);
if (!voiceText) voiceText = textEl.innerText;
const textToSpeak = voiceText.substring(startIndex);
responsiveVoice.speak(textToSpeak, voice, {
rate: rate,
onboundary: (e) => {
if (e.name === 'word') {
const absIdx = startIndex + e.charIndex;
lastCharIndex = absIdx;
let wordLen = e.charLength || voiceText.substring(absIdx).match(/^[a-z\d']*/i)[0].length || 5;
textEl.innerHTML = voiceText.substring(0, absIdx) + '' + voiceText.substring(absIdx, absIdx + wordLen) + '' + voiceText.substring(absIdx + wordLen);
}
},
onend: () => {
btnWrapper.classList.remove('st-playing', 'st-paused');
btnWrapper.classList.add('st-stopped');
lastCharIndex = 0;
textEl.innerHTML = voiceText;
}
});
}
// --- Real-time Speed Control ---
let speedTimer;
speedSlider.addEventListener('input', (e) => {
const rate = parseFloat(e.target.value);
if (speedVal) speedVal.textContent = rate.toFixed(1) + 'x';
// Immediate reflection if playing
if (btnWrapper.classList.contains('st-playing')) {
clearTimeout(speedTimer);
speedTimer = setTimeout(() => {
responsiveVoice.cancel();
playSpeech(lastCharIndex);
}, 50); // Small debounce to avoid audio jitter while dragging rapidly
}
});
const trgAnalytics = () => {
if (window.jQuery && window.jQuery.ajax && window.Shopify) {
window.jQuery.ajax({
url: 'https://apps.qeapps.com/ecom_apps_n/production/texttospeech/common_data_voicecantrol_insert',
type: 'POST',
data: { product_handle: window.location.pathname.split('/').pop(), domain: window.Shopify.shop }
});
}
};
const newPlay = play.cloneNode(true);
const newPause = pause.cloneNode(true);
const newResume = resume.cloneNode(true);
const newStop = stop.cloneNode(true);
play.parentNode.replaceChild(newPlay, play);
pause.parentNode.replaceChild(newPause, pause);
resume.parentNode.replaceChild(newResume, resume);
stop.parentNode.replaceChild(newStop, stop);
newPlay.addEventListener('click', () => {
btnWrapper.className = "audio-btn-row st-playing";
if (!voiceText) voiceText = textEl.innerText;
playSpeech(lastCharIndex);
trgAnalytics();
});
newPause.addEventListener('click', () => {
responsiveVoice.pause();
btnWrapper.className = "audio-btn-row st-paused";
});
newResume.addEventListener('click', () => {
btnWrapper.className = "audio-btn-row st-playing";
if (responsiveVoice.isPlaying()) responsiveVoice.resume();
else playSpeech(lastCharIndex);
});
newStop.addEventListener('click', () => {
responsiveVoice.cancel();
btnWrapper.className = "audio-btn-row st-paused"; // Allow resume from last index
});
}
}
let count = 0;
const interval = setInterval(() => {
applyFix();
if (++count > 40) clearInterval(interval);
}, 250);
const observer = new MutationObserver(() => applyFix());
observer.observe(document.body, {
childList: true,
subtree: true
});
})();
.template-index #start_button,
.template-collection #start_button,
.template-product #start_button,
body.template-index .buttons {
display: none !important;
}
.template-collection .buttons,
.template-product .buttons {
display: none !important;
}
