{"product_id":"test-flow2","title":"test-flow2","description":"\u003cstyle\u003e\n.active:after {\n    content: \"\";\n}\n.audio-demo-wrap{\n  width:100%;\n  max-width:950px;\n  margin:auto;\n}\n\n\/* IMAGE *\/\n\n.audio-demo-display{\n  width:100%;\n  height:520px;\n  border-radius:24px;\n  overflow:hidden;\n  background:#000;\n  margin-bottom:24px;\n}\n\n.audio-demo-display img{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n}\n\n\/* CONTROLS *\/\n\n.audio-demo-controls{\n  background:#021120;\n  border-radius:34px;\n  padding:18px;\n\n  display:flex;\n  align-items:center;\n  justify-content:space-between;\n  gap:18px;\n}\n\n\/* TOGGLE *\/\n\n.audio-demo-toggle{\n  background:#071828;\n  border-radius:50px;\n  padding:6px;\n\n  display:flex;\n  gap:8px;\n\n  width:100%;\n  max-width:430px;\n}\n\n.audio-demo-toggle button{\n  flex:1;\n\n  border:none;\n  background:transparent;\n\n  color:#fff;\n\n  padding:14px 12px;\n\n  border-radius:40px;\n\n  font-size:14px;\n  font-weight:700;\n\n  cursor:pointer;\n\n  transition:.25s ease;\n}\n\n.audio-demo-toggle button.active{\n  background:#fff;\n  color:#000;\n}\n\n\/* ICONS *\/\n\n.audio-demo-icons{\n  display:flex;\n  gap:12px;\n}\n\n.audio-demo-icons button{\n  width:58px;\n  height:58px;\n\n  border:none;\n  border-radius:50%;\n\n  background:#061321;\n  color:#fff;\n\n  font-size:22px;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  cursor:pointer;\n\n  transition:.25s ease;\n}\n\n.audio-demo-icons button.active{\n  background:#a7ebff;\n  color:#000;\n}\n\n\/* MOBILE *\/\n\n@media(max-width:768px){\n\n  .audio-demo-display{\n    height:260px;\n    border-radius:18px;\n  }\n\n  .audio-demo-controls{\n    flex-direction:column;\n    align-items:stretch;\n\n    border-radius:28px;\n    padding:16px;\n  }\n\n  .audio-demo-toggle{\n    width:100%;\n    max-width:100%;\n  }\n\n  .audio-demo-toggle button{\n    font-size:12px;\n    padding:12px 8px;\n  }\n\n  .audio-demo-icons{\n    justify-content:center;\n  }\n\n}\n\n@media(max-width:480px){\n\n  .audio-demo-display{\n    height:220px;\n  }\n\n  .audio-demo-toggle button{\n    font-size:11px;\n    padding:11px 4px;\n  }\n\n  .audio-demo-icons button{\n    width:52px;\n    height:52px;\n    font-size:18px;\n  }\n\n}\n\n\u003c\/style\u003e\n\n\n\u003cdiv class=\"audio-demo-wrap\" id=\"audioDemo1\"\u003e\n\n  \u003c!-- IMAGE --\u003e\n  \u003cdiv class=\"audio-demo-display\"\u003e\n    \u003cimg class=\"audio-demo-gif\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/wLink_pluse-gif-2.gif?v=1778491922\" alt=\"\"\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- CONTROLS --\u003e\n  \u003cdiv class=\"audio-demo-controls\"\u003e\n\n    \u003c!-- TOGGLE --\u003e\n    \u003cdiv class=\"audio-demo-toggle\"\u003e\n\n      \u003cbutton class=\"audio-mode-btn active\" data-mode=\"hear\" type=\"button\"\u003e\n        WHAT YOU HEAR\n      \u003c\/button\u003e\n\n      \u003cbutton class=\"audio-mode-btn\" data-mode=\"they\" type=\"button\"\u003e\n        WHAT THEY HEAR\n      \u003c\/button\u003e\n\n    \u003c\/div\u003e\n\n    \u003c!-- ICONS --\u003e\n    \u003cdiv class=\"audio-demo-icons\"\u003e\n\n      \u003cbutton class=\"audio-icon-btn active\" data-icon=\"lock\" type=\"button\"\u003e\n        🔒\n      \u003c\/button\u003e\n\n      \u003cbutton class=\"audio-icon-btn\" data-icon=\"plane\" type=\"button\"\u003e\n        ✈\n      \u003c\/button\u003e\n\n      \u003cbutton class=\"audio-play-btn\" type=\"button\"\u003e\n        ▶\n      \u003c\/button\u003e\n\n    \u003c\/div\u003e\n\n  \u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\n\u003cscript\u003e\n\nwindow.addEventListener(\"load\", function(){\n\nconst wrapper =\ndocument.getElementById(\"audioDemo1\");\n\nconst gif =\nwrapper.querySelector(\".audio-demo-gif\");\n\nconst playBtn =\nwrapper.querySelector(\".audio-play-btn\");\n\nconst modeBtns =\nwrapper.querySelectorAll(\".audio-mode-btn\");\n\nconst iconBtns =\nwrapper.querySelectorAll(\".audio-icon-btn\");\n\nconst audio = new Audio();\n\naudio.loop = true;\n\nlet currentMode = \"hear\";\nlet currentIcon = \"lock\";\nlet isPlaying = false;\n\n\n\/* DATA *\/\n\nconst media = {\n\n  lock : {\n\n    hear : {\n\n      gif :\n      \"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/wLink_pluse-gif-2.gif?v=1778491922\",\n\n      sound :\n      \"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/DwOTS-333-ENC-ON.mp3?v=1742813878\"\n\n    },\n\n    they : {\n\n      gif :\n      \"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/wLink_pluse-gif-3.gif?v=1778491922\",\n\n      sound :\n      \"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/DwOTS-333-ENC-OFF.mp3?v=1742813878\"\n\n    }\n\n  },\n\n  plane : {\n\n    hear : {\n\n      gif :\n      \"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/dwost575-cream-gif.gif?v=1774442737\",\n\n      sound :\n      \"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/Hybrid-ANC.mp3?v=1742379167\"\n\n    },\n\n    they : {\n\n      gif :\n      \"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/dwost575-blk-gif.gif?v=1774442737\",\n\n      sound :\n      \"https:\/\/cdn.shopify.com\/s\/files\/1\/0666\/4870\/3294\/files\/ANCon.mp3?v=1742379167\"\n\n    }\n\n  }\n\n};\n\n\n\/* LOAD MEDIA *\/\n\nfunction loadMedia(){\n\n  const item =\n  media[currentIcon][currentMode];\n\n  gif.src = item.gif;\n\n  audio.src = item.sound;\n\n}\n\n\n\/* PLAY *\/\n\nasync function playAudio(){\n\n  try{\n\n    await audio.play();\n\n    isPlaying = true;\n\n    playBtn.innerHTML = \"⏸\";\n\n  }catch(e){\n\n    console.log(e);\n\n  }\n\n}\n\n\n\/* STOP *\/\n\nfunction stopAudio(){\n\n  audio.pause();\n\n  audio.currentTime = 0;\n\n  isPlaying = false;\n\n  playBtn.innerHTML = \"▶\";\n\n}\n\n\n\/* UPDATE *\/\n\nasync function updateMedia(){\n\n  const wasPlaying = isPlaying;\n\n  audio.pause();\n\n  audio.currentTime = 0;\n\n  loadMedia();\n\n  if(wasPlaying){\n\n    await playAudio();\n\n  }\n\n}\n\n\n\/* MODE BUTTONS *\/\n\nmodeBtns.forEach(btn =\u003e {\n\n  btn.addEventListener(\"click\", async function(){\n\n    modeBtns.forEach(b =\u003e\n      b.classList.remove(\"active\")\n    );\n\n    this.classList.add(\"active\");\n\n    currentMode =\n    this.dataset.mode;\n\n    await updateMedia();\n\n  });\n\n});\n\n\n\/* ICON BUTTONS *\/\n\niconBtns.forEach(btn =\u003e {\n\n  btn.addEventListener(\"click\", async function(){\n\n    iconBtns.forEach(b =\u003e\n      b.classList.remove(\"active\")\n    );\n\n    this.classList.add(\"active\");\n\n    currentIcon =\n    this.dataset.icon;\n\n    await updateMedia();\n\n  });\n\n});\n\n\n\/* PLAY BUTTON *\/\n\nplayBtn.addEventListener(\"click\", async function(){\n\n  if(isPlaying){\n\n    stopAudio();\n\n  }else{\n\n    await playAudio();\n\n  }\n\n});\n\n\n\/* INITIAL *\/\n\nloadMedia();\n\n});\n\n\u003c\/script\u003e","brand":"ACwO","offers":[{"title":"Default Title","offer_id":53472772948286,"sku":null,"price":0.0,"currency_code":"INR","in_stock":false}],"url":"https:\/\/acwo.com\/products\/test-flow2","provider":"ACwO","version":"1.0","type":"link"}