{"product_id":"cinema-logo-reveal-sound-pack","title":"Cinema Logo Reveal Sound Pack","description":"\u003cscript src=\"https:\/\/unpkg.com\/wavesurfer.js@7\"\u003e\u003c\/script\u003e\n\n\u003cdiv class=\"audio-tabs\"\u003e\n  \u003cdiv class=\"tab-buttons\" id=\"tabButtons\"\u003e\u003c\/div\u003e\n  \u003cdiv id=\"tabContents\"\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.audio-tabs {\n  margin-top: 30px;\n  width: 100%;\n  max-width: 100%;\n  overflow: hidden;\n}\n.tab-buttons {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr); \/* 3 kolom dengan lebar sama *\/\n  gap: 12px;\n  justify-content: center;\n  max-width: 100%;\n  width: 500px; \/* sesuaikan lebar container agar tombol tidak melebar *\/\n  margin: 0 auto; \/* center container *\/\n  \n}\n\n.tab-buttons button {\n  background: linear-gradient(135deg, #3b82f6, #2563eb);\n  top: 5px;\n  color: white;\n  border: none;\n  padding: 10px 40px 10px 20px;\n  border-radius: 12px;\n  cursor: pointer;\n  font-weight: 600;\n  position: relative;\n  box-sizing: border-box;\n}\n.tab-buttons button:hover {\n  box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);\n  transform: translateY(-2px);\n}\n.tab-buttons .icon {\n  position: absolute;\n  right: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.playIcon,\n.pauseIcon {\n  display: none;\n}\nbutton.playing .pauseIcon {\n  display: inline;\n}\nbutton.playing .playIcon {\n  display: none;\n}\nbutton:not(.playing) .playIcon {\n  display: inline;\n}\n.audio-tab {\n  display: none;\n}\n.audio-tab.active {\n  display: block;\n\n}\n\n.waveform-container {\n  position: relative;\n  top: 10px;\n  border: 2px solid #e5e7eb;\n  border-radius: 5px;\n  padding: 36px 10px 10px 10px;\n  background-color: #f9fafb;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n  margin-bottom: 30px;\n  overflow-x: hidden;\n  width: 100%;\n  max-width: 100%;\n  overflow: hidden;\n}\n\n.time-display {\n  position: absolute;\n  text-align: center;\n  top: 5px;\n  right: 8px;\n  font-size: 12px;\n  color: #333;\n  background-color: rgba(255, 255, 255, 0.8); \/* opsional: buat lebih terbaca *\/\n  padding: 2px 6px;\n  border-radius: 6px;\n}\n\n.waveform {\n  width: 100%;\n  height: 80px;\n  max-width: 100%;\n  overflow: hidden;\n}\n.time-display {\n  position: absolute;     \/* Ubah dari default ke absolute *\/\n  top: 10px;              \/* Jarak dari atas *\/\n  right: 12px;            \/* Jarak dari kanan *\/\n  font-size: 14px;\n  color: #333;\n}\n\u003c\/style\u003e\n\n\n\u003cscript\u003e\nconst audioSources = [\n  { title: \"Track 1\", url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0815\/4087\/4433\/files\/Ambient_Pad_Logo.mp3\" },\n  { title: \"Track 2\", url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0815\/4087\/4433\/files\/Reverse_Bell_Film_Logo.mp3\" },\n  { title: \"Track 3\", url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0815\/4087\/4433\/files\/Reverse_Violin_Film_Logo.mp3\" },\n  { title: \"Track 4\", url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0815\/4087\/4433\/files\/Cinematic_Movie_Logo.mp3\" },\n  { title: \"Track 5\", url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0815\/4087\/4433\/files\/Reverse_Gamelan_Intro_Logo.mp3\" },\n  { title: \"Track 6\", url: \"https:\/\/cdn.shopify.com\/s\/files\/1\/0815\/4087\/4433\/files\/Reverse_Guitar_Film_Logo.mp3\" }\n];\n\nconst waveforms = [];\nlet currentWaveform = null;\nlet currentButton = null;\n\nfunction formatTime(s) {\n  const m = Math.floor(s \/ 60), sec = Math.floor(s % 60);\n  return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;\n}\n\nfunction createSVGIcons() {\n  return `\n    \u003cspan class=\"icon\"\u003e\n      \u003csvg class=\"playIcon\" width=\"20\" height=\"20\" fill=\"white\" viewBox=\"0 0 24 24\"\u003e\n        \u003cpath d=\"M8 5v14l11-7z\"\u003e\u003c\/path\u003e\n      \u003c\/svg\u003e\n      \u003csvg class=\"pauseIcon\" width=\"20\" height=\"20\" fill=\"white\" viewBox=\"0 0 24 24\"\u003e\n        \u003cpath d=\"M6 19h4V5H6zm8-14v14h4V5z\"\u003e\u003c\/path\u003e\n      \u003c\/svg\u003e\n    \u003c\/span\u003e\n  `;\n}\n\nfunction createUI() {\n  const tabBtns = document.getElementById('tabButtons');\n  const tabContents = document.getElementById('tabContents');\n\n  audioSources.forEach((track, i) =\u003e {\n    \/\/ Button\n    const btn = document.createElement('button');\n    btn.innerHTML = `${track.title} ${createSVGIcons()}`;\n    btn.onclick = () =\u003e toggleAudio(i);\n    if (i === 0) btn.classList.add('active');\n    tabBtns.appendChild(btn);\n\n    \/\/ Content\n    const tab = document.createElement('div');\n    tab.className = 'audio-tab' + (i === 0 ? ' active' : '');\n    tab.innerHTML = `\n      \u003cdiv class=\"waveform-container\"\u003e\n        \u003cdiv id=\"waveform${i}\" class=\"waveform\"\u003e\u003c\/div\u003e\n        \u003cdiv id=\"time${i}\" class=\"time-display\"\u003e00:00 \/ 00:00\u003c\/div\u003e\n      \u003c\/div\u003e`;\n    tabContents.appendChild(tab);\n\n    \/\/ WaveSurfer\n    const wf = WaveSurfer.create({\n      container: `#waveform${i}`,\n      waveColor: '#7a7a7a',\n      progressColor: '#2563eb',\n      height: 80,\n      responsive: true,\n      barWidth: 2,\n      barGap: 2,\n      cursorColor: '#1e3a8a'\n    });\n    wf.load(track.url);\n    wf.on('ready', () =\u003e {\n      document.getElementById(`time${i}`).textContent = `00:00 \/ ${formatTime(wf.getDuration())}`;\n    });\n    wf.on('audioprocess', () =\u003e {\n      const time = formatTime(wf.getCurrentTime());\n      const total = formatTime(wf.getDuration());\n      document.getElementById(`time${i}`).textContent = `${time} \/ ${total}`;\n    });\n    wf.on('seek', () =\u003e {\n      const time = formatTime(wf.getCurrentTime());\n      const total = formatTime(wf.getDuration());\n      document.getElementById(`time${i}`).textContent = `${time} \/ ${total}`;\n    });\n    wf.on('finish', () =\u003e {\n      btn.classList.remove('playing');\n      document.getElementById(`time${i}`).textContent = `00:00 \/ ${formatTime(wf.getDuration())}`;\n    });\n    waveforms.push(wf);\n  });\n}\n\nfunction toggleAudio(index) {\n  const buttons = document.querySelectorAll('.tab-buttons button');\n  const tabs = document.querySelectorAll('.audio-tab');\n\n if (currentWaveform \u0026\u0026 currentWaveform !== waveforms[index]) {\n  currentWaveform.pause();\n  currentWaveform.seekTo(0);  \/\/ \u003c-- reset ke awal\n  currentButton.classList.remove('playing');\n}\n\n\n  if (waveforms[index].isPlaying()) {\n    waveforms[index].pause();\n    buttons[index].classList.remove('playing');\n    currentWaveform = null;\n    currentButton = null;\n  } else {\n    waveforms[index].play();\n    buttons.forEach(btn =\u003e btn.classList.remove('active', 'playing'));\n    tabs.forEach(tab =\u003e tab.classList.remove('active'));\n    buttons[index].classList.add('active', 'playing');\n    tabs[index].classList.add('active');\n    waveforms[index].drawBuffer(); \/\/ redraw jika sebelumnya tersembunyi\n    currentWaveform = waveforms[index];\n    currentButton = buttons[index];\n  }\n}\n\nwindow.addEventListener('DOMContentLoaded', createUI);\n\u003c\/script\u003e\n","brand":"Breakz Studios - Royalty Free Music","offers":[{"title":"Default Title","offer_id":43251501990006,"sku":null,"price":39.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0692\/5169\/4710\/files\/CINEMA_LOGO_REVEAL_SOUND_PACK_Box_a40326da-01f8-421e-ae69-096ba830f464.png?v=1775087273","url":"https:\/\/breakzstudios.co\/products\/cinema-logo-reveal-sound-pack","provider":"Breakz Studios","version":"1.0","type":"link"}