SoundID \u2014 Identifique a m\u00fasica agora<\/title>\n <meta name=\"description\" content=\"Clique, grave 5s e descubra a m\u00fasica. Site est\u00e1tico integrando com AudD ou proxy.\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n :root{\n --bg:#07090f; --bg2:#0b0f1a; --card:#0f1424; --ink:#e8ecf5; --muted:#9aa3b2; --accent:#7c5cff; --accent2:#4bd1ff;\n --ok:#2ea043; --warn:#f2cc60; --err:#ff6b6b; --stroke:#1d2340;\n }\n *{box-sizing:border-box}\n html,body{height:100%}\n body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);\n background:radial-gradient(1200px 800px at 80% -10%, rgba(124,92,255,.25), transparent),\n radial-gradient(900px 600px at -10% 10%, rgba(75,209,255,.18), transparent),\n linear-gradient(180deg,var(--bg),var(--bg2));}\n .nav{position:sticky;top:0;backdrop-filter:saturate(120%) blur(8px);background:rgba(7,9,15,.5);border-bottom:1px solid rgba(255,255,255,.05)}\n .navin{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}\n .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}\n .brand .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 22px rgba(124,92,255,.5)}\n .cta{display:flex;gap:10px}\n .cta a{padding:10px 14px;border-radius:12px;background:#151a2b;color:#cdd6f4;text-decoration:none;font-weight:700;border:1px solid #222a44}\n .cta a.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#071018;border:none}\n\n .hero{max-width:1100px;margin:30px auto 18px;padding:0 20px;display:grid;grid-template-columns:1.2fr .8fr;gap:22px}\n @media (max-width:980px){.hero{grid-template-columns:1fr}}\n .hcopy h1{font-size:40px;line-height:1.1;margin:0 0 10px;font-weight:800}\n .hcopy p{color:var(--muted);margin:0 0 16px;font-size:16px}\n .glass{position:relative;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));\n border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06)}\n\n .card{padding:18px}\n .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n @media (max-width:860px){.grid{grid-template-columns:1fr}}\n label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}\n input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #263054;background:#0b1020;color:var(--ink)}\n .row{display:flex;gap:10px;flex-wrap:wrap}\n .btn{appearance:none;border:0;border-radius:14px;padding:12px 16px;font-weight:800;cursor:pointer;background:#202747;color:#e6ebff;border:1px solid #2a3560;transition:transform .12s ease, box-shadow .2s}\n .btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(0,0,0,.35)}\n .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#071018;border:none}\n .btn.ok{background:linear-gradient(90deg,#1ddc7c,#11b36b);color:#04150d;border:none}\n .btn.warn{background:linear-gradient(90deg,#ffd166,#e9a538);color:#1d1400;border:none}\n .btn.danger{background:linear-gradient(90deg,#ff8fa3,#ff6b6b);border:none}\n\n .status{margin-top:10px;font-size:13px;color:var(--muted)}\n .meter{height:8px;background:#0a0f1f;border-radius:999px;overflow:hidden;margin-top:10px}\n .bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .1s}\n\n .panel{margin-top:14px;padding:16px;border-radius:14px;background:#0a0f1f;border:1px solid #1d2648}\n audio{width:100%;margin-top:8px}\n pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#d8dbef}\n\n .result{display:flex;gap:16px;align-items:flex-start}\n .cover{width:110px;height:110px;border-radius:14px;background:#111;object-fit:cover;border:1px solid #222a44}\n .links a{display:inline-block;margin-right:10px;margin-top:6px;font-size:13px;color:#cbd6ff}\n .badge{display:inline-block;font-size:11px;padding:4px 8px;border-radius:999px;background:#172140;color:#cbd3ff;margin-top:4px}\n\n .foot{max-width:1100px;margin:30px auto;padding:10px 20px;color:var(--muted);text-align:center;font-size:13px}\n <\/style>\n<\/head>\n<body>\n <div class=\"nav\">\n <div class=\"navin\">\n <div class=\"brand\"><div class=\"logo\"><\/div> <span>SoundID<\/span><\/div>\n <div class=\"cta\">\n <a href=\"#como\">Como funciona<\/a>\n <a class=\"primary\" href=\"#tester\">Testar agora<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <section class=\"hero\">\n <div class=\"hcopy\">\n <h1>Descubra a m\u00fasica que est\u00e1 tocando<span style=\"color:var(--accent)\">.<\/span><\/h1>\n <p>Grave <strong>5 segundos<\/strong> e identifique a faixa com links para Spotify, Apple Music e Deezer. Funciona em site est\u00e1tico usando <strong>AudD<\/strong> diretamente ou via <strong>proxy<\/strong>.<\/p>\n <div class=\"row\" style=\"margin-top:10px\">\n <button class=\"btn primary\" onclick=\"document.getElementById('tester').scrollIntoView({behavior:'smooth'})\">\ud83c\udf99\ufe0f Come\u00e7ar agora<\/button>\n <a class=\"btn\" href=\"#como\">Ver como funciona<\/a>\n <\/div>\n <\/div>\n <div class=\"glass card\">\n <div class=\"grid\">\n <div>\n <label>Modo de integra\u00e7\u00e3o<\/label>\n <select id=\"mode\">\n <option value=\"proxy\" selected>Proxy seguro (recomendado)<\/option>\n <option value=\"direct\">Direto na AudD (teste r\u00e1pido)<\/option>\n <\/select>\n <\/div>\n <div id=\"proxyBox\">\n <label>URL do seu Proxy<\/label>\n <input id=\"proxyUrl\" placeholder=\"\/api\/audd-proxy\" value=\"\/api\/audd-proxy\" \/>\n <\/div>\n <div id=\"tokenBox\" style=\"display:none\">\n <label>AudD API Token (vis\u00edvel no front \u2014 apenas para POC)<\/label>\n <input id=\"token\" placeholder=\"cole seu token\" \/>\n <\/div>\n <div>\n <label>Dura\u00e7\u00e3o da grava\u00e7\u00e3o<\/label>\n <select id=\"duration\">\n <option value=\"4\">4s<\/option>\n <option value=\"5\" selected>5s<\/option>\n <option value=\"6\">6s<\/option>\n <option value=\"8\">8s<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"row\" style=\"margin-top:12px\">\n <button id=\"btnStart\" class=\"btn primary\">\ud83c\udf99\ufe0f Gravar<\/button>\n <button id=\"btnStop\" class=\"btn warn\" disabled>\u23f9\ufe0f Parar<\/button>\n <button id=\"btnSend\" class=\"btn ok\" disabled>\ud83d\ude80 Identificar<\/button>\n <button id=\"btnClear\" class=\"btn danger\">\ud83e\uddf9 Limpar<\/button>\n <\/div>\n <div class=\"status\" id=\"status\">Aguardando\u2026<\/div>\n <div class=\"meter\"><div class=\"bar\" id=\"bar\"><\/div><\/div>\n\n <div class=\"panel\" id=\"tester\">\n <div class=\"grid\">\n <div>\n <div class=\"badge\">\u00c1udio<\/div>\n <audio id=\"player\" controls><\/audio>\n <\/div>\n <div>\n <div class=\"badge\">Resultado<\/div>\n <div id=\"pretty\"><em>Fa\u00e7a uma grava\u00e7\u00e3o e clique em Identificar.<\/em><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"panel\">\n <div class=\"badge\">JSON bruto<\/div>\n <pre id=\"raw\">{}<\/pre>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"foot\" id=\"como\">\n <p>Este demo usa <strong>MediaRecorder<\/strong> para gravar 4\u20138s, envia <strong>multipart\/form-data<\/strong> com <code>file<\/code> para seu <strong>proxy<\/strong> (ou direto para <code>https:\/\/api.audd.io\/<\/code>) e renderiza o retorno.<\/p>\n <p>Para produ\u00e7\u00e3o, mantenha o modo <strong>Proxy<\/strong> e guarde seu token em vari\u00e1vel de ambiente no backend.<\/p>\n <\/section>\n\n<script>\n(function(){\n const $ = (id)=>document.getElementById(id);\n const mode=$('mode'), proxyBox=$('proxyBox'), tokenBox=$('tokenBox');\n const proxyUrl=$('proxyUrl'), token=$('token');\n const duration=$('duration');\n const btnStart=$('btnStart'), btnStop=$('btnStop'), btnSend=$('btnSend'), btnClear=$('btnClear');\n const statusEl=$('status'), bar=$('bar'), player=$('player'), raw=$('raw'), pretty=$('pretty');\n\n let rec, stream, chunks=[], clip=null, timer=null;\n\n mode.addEventListener('change', ()=>{\n const m = mode.value;\n proxyBox.style.display = (m==='proxy') ? 'block' : 'none';\n tokenBox.style.display = (m==='direct') ? 'block' : 'none';\n });\n\n function setStatus(msg){ statusEl.innerHTML = msg; }\n function setProgress(p){ bar.style.width = Math.max(0,Math.min(100,p))+'%'; }\n function enable(el,v=true){ el.disabled=!v; }\n\n async function start(){\n if(!('MediaRecorder' in window)){\n alert('MediaRecorder n\u00e3o \u00e9 suportado neste navegador. Tente Chrome\/Edge\/Safari atual.');\n return;\n }\n try{\n stream = await navigator.mediaDevices.getUserMedia({audio:true});\n rec = new MediaRecorder(stream, { mimeType:'audio\/webm' });\n chunks=[]; clip=null; player.removeAttribute('src'); player.load();\n rec.ondataavailable = (e)=>{ if(e.data && e.data.size) chunks.push(e.data); };\n rec.onstop = ()=>{ clip = new Blob(chunks, {type:'audio\/webm'}); player.src = URL.createObjectURL(clip); enable(btnSend, !!clip); setStatus('<strong>Pronto:<\/strong> clipe criado.'); setProgress(0); };\n rec.start(); enable(btnStart,false); enable(btnStop,true); enable(btnSend,false); setStatus('Gravando\u2026');\n const secs=parseInt(duration.value,10)||5; let t=0; setProgress(0);\n timer=setInterval(()=>{ t+=0.1; setProgress((t\/secs)*100); if(t>=secs){ stop(); } },100);\n }catch(e){ console.error(e); alert('Erro ao acessar microfone: '+e.message); }\n }\n\n function stop(){ if(timer){ clearInterval(timer); timer=null; } if(rec && rec.state!=='inactive') rec.stop(); if(stream){ stream.getTracks().forEach(t=>t.stop()); } enable(btnStop,false); enable(btnStart,true); }\n\n async function send(){\n if(!clip){ alert('Grave primeiro.'); return; }\n raw.textContent='\u2026'; pretty.innerHTML=''; setStatus('Processando\u2026');\n\n try{\n const fd = new FormData();\n fd.append('file', clip, 'clip.webm');\n\n let endpoint = '';\n if(mode.value === 'proxy'){\n endpoint = (proxyUrl.value||'').trim() || '\/api\/audd-proxy';\n } else {\n const tok = (token.value||'').trim();\n if(!tok){ alert('Informe o token da AudD para modo Direto.'); return; }\n fd.append('api_token', tok);\n fd.append('return', 'timecode,spotify,apple_music,deezer,lyrics');\n endpoint = 'https:\/\/api.audd.io\/';\n }\n\n const r = await fetch(endpoint, { method:'POST', body: fd });\n const j = await r.json();\n raw.textContent = JSON.stringify(j, null, 2);\n renderPretty(j);\n setStatus(r.ok ? '<strong>OK:<\/strong> resposta recebida.' : '<strong>Falha:<\/strong> status '+r.status);\n }catch(e){ raw.textContent = (e && e.message) ? e.message : String(e); setStatus('<strong>Erro:<\/strong> verifique conex\u00e3o\/CORS\/endpoint.'); }\n }\n\n function renderPretty(resp){\n if(!resp || !resp.result){ pretty.innerHTML = '<em>Sem resultado<\/em>'; return; }\n const r = resp.result;\n const title = r.title || '\u2014';\n const artist = r.artist || '\u2014';\n const album = r.album?.title || r.album || '\u2014';\n const timecode = r.timecode || r.timecode_start || '';\n const cover = (r.spotify?.album?.images?.[0]?.url) || (r.apple_music?.artwork?.url?.replace('{w}x{h}','220x220')) || (r.deezer?.album?.cover) || '';\n\n const links = [];\n if(r.spotify?.external_urls?.spotify) links.push(['Spotify', r.spotify.external_urls.spotify]);\n if(r.apple_music?.url) links.push(['Apple Music', r.apple_music.url]);\n if(r.deezer?.link) links.push(['Deezer', r.deezer.link]);\n if(r.song_link) links.push(['Song Link', r.song_link]);\n\n pretty.innerHTML = `\n <div class=\"result\">\n <img decoding=\"async\" class=\"cover\" src=\"${cover||''}\" alt=\"capa\" onerror=\"this.style.display='none'\"\/>\n <div>\n <div style=\"font-weight:800;font-size:20px\">${title}<\/div>\n <div style=\"opacity:.85;margin:2px 0 6px\">${artist}${album && album!=='\u2014' ? ' \u2014 '+album : ''}<\/div>\n ${timecode?`<div class=\"badge\">${timecode}<\/div>`:''}\n <div class=\"links\">${links.map(([n,u])=>`<a href=\"${u}\" target=\"_blank\" rel=\"noopener\">${n} \u2197<\/a>`).join('')}<\/div>\n <\/div>\n <\/div>`;\n }\n\n function clearAll(){ stop(); clip=null; chunks=[]; player.removeAttribute('src'); player.load(); raw.textContent='{}'; pretty.innerHTML='<em>Fa\u00e7a uma grava\u00e7\u00e3o e clique em Identificar.<\/em>'; setStatus('Aguardando\u2026'); setProgress(0); enable(btnSend,false); }\n\n btnStart.addEventListener('click', start);\n btnStop.addEventListener('click', stop);\n btnSend.addEventListener('click', send);\n btnClear.addEventListener('click', clearAll);\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SoundID \u2014 Identifique a m\u00fasica agora SoundID Como funciona Testar agora Descubra a m\u00fasica que est\u00e1 tocando. Grave 5 segundos e identifique a faixa com links para Spotify, Apple Music e Deezer. Funciona em site est\u00e1tico usando AudD diretamente ou via proxy. \ud83c\udf99\ufe0f Come\u00e7ar agora Ver como funciona Modo de integra\u00e7\u00e3o Proxy seguro (recomendado)Direto na […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-439","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=439"}],"version-history":[{"count":4,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/439\/revisions"}],"predecessor-version":[{"id":443,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/439\/revisions\/443"}],"wp:attachment":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n SoundID \u2014 Identifique a m\u00fasica agora<\/title>\n <meta name=\"description\" content=\"Clique, grave 5s e descubra a m\u00fasica. Site est\u00e1tico integrando com AudD ou proxy.\" \/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n :root{\n --bg:#07090f; --bg2:#0b0f1a; --card:#0f1424; --ink:#e8ecf5; --muted:#9aa3b2; --accent:#7c5cff; --accent2:#4bd1ff;\n --ok:#2ea043; --warn:#f2cc60; --err:#ff6b6b; --stroke:#1d2340;\n }\n *{box-sizing:border-box}\n html,body{height:100%}\n body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);\n background:radial-gradient(1200px 800px at 80% -10%, rgba(124,92,255,.25), transparent),\n radial-gradient(900px 600px at -10% 10%, rgba(75,209,255,.18), transparent),\n linear-gradient(180deg,var(--bg),var(--bg2));}\n .nav{position:sticky;top:0;backdrop-filter:saturate(120%) blur(8px);background:rgba(7,9,15,.5);border-bottom:1px solid rgba(255,255,255,.05)}\n .navin{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}\n .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}\n .brand .logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 22px rgba(124,92,255,.5)}\n .cta{display:flex;gap:10px}\n .cta a{padding:10px 14px;border-radius:12px;background:#151a2b;color:#cdd6f4;text-decoration:none;font-weight:700;border:1px solid #222a44}\n .cta a.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#071018;border:none}\n\n .hero{max-width:1100px;margin:30px auto 18px;padding:0 20px;display:grid;grid-template-columns:1.2fr .8fr;gap:22px}\n @media (max-width:980px){.hero{grid-template-columns:1fr}}\n .hcopy h1{font-size:40px;line-height:1.1;margin:0 0 10px;font-weight:800}\n .hcopy p{color:var(--muted);margin:0 0 16px;font-size:16px}\n .glass{position:relative;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));\n border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06)}\n\n .card{padding:18px}\n .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n @media (max-width:860px){.grid{grid-template-columns:1fr}}\n label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}\n input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #263054;background:#0b1020;color:var(--ink)}\n .row{display:flex;gap:10px;flex-wrap:wrap}\n .btn{appearance:none;border:0;border-radius:14px;padding:12px 16px;font-weight:800;cursor:pointer;background:#202747;color:#e6ebff;border:1px solid #2a3560;transition:transform .12s ease, box-shadow .2s}\n .btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(0,0,0,.35)}\n .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#071018;border:none}\n .btn.ok{background:linear-gradient(90deg,#1ddc7c,#11b36b);color:#04150d;border:none}\n .btn.warn{background:linear-gradient(90deg,#ffd166,#e9a538);color:#1d1400;border:none}\n .btn.danger{background:linear-gradient(90deg,#ff8fa3,#ff6b6b);border:none}\n\n .status{margin-top:10px;font-size:13px;color:var(--muted)}\n .meter{height:8px;background:#0a0f1f;border-radius:999px;overflow:hidden;margin-top:10px}\n .bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .1s}\n\n .panel{margin-top:14px;padding:16px;border-radius:14px;background:#0a0f1f;border:1px solid #1d2648}\n audio{width:100%;margin-top:8px}\n pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#d8dbef}\n\n .result{display:flex;gap:16px;align-items:flex-start}\n .cover{width:110px;height:110px;border-radius:14px;background:#111;object-fit:cover;border:1px solid #222a44}\n .links a{display:inline-block;margin-right:10px;margin-top:6px;font-size:13px;color:#cbd6ff}\n .badge{display:inline-block;font-size:11px;padding:4px 8px;border-radius:999px;background:#172140;color:#cbd3ff;margin-top:4px}\n\n .foot{max-width:1100px;margin:30px auto;padding:10px 20px;color:var(--muted);text-align:center;font-size:13px}\n <\/style>\n<\/head>\n<body>\n <div class=\"nav\">\n <div class=\"navin\">\n <div class=\"brand\"><div class=\"logo\"><\/div> <span>SoundID<\/span><\/div>\n <div class=\"cta\">\n <a href=\"#como\">Como funciona<\/a>\n <a class=\"primary\" href=\"#tester\">Testar agora<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <section class=\"hero\">\n <div class=\"hcopy\">\n <h1>Descubra a m\u00fasica que est\u00e1 tocando<span style=\"color:var(--accent)\">.<\/span><\/h1>\n <p>Grave <strong>5 segundos<\/strong> e identifique a faixa com links para Spotify, Apple Music e Deezer. Funciona em site est\u00e1tico usando <strong>AudD<\/strong> diretamente ou via <strong>proxy<\/strong>.<\/p>\n <div class=\"row\" style=\"margin-top:10px\">\n <button class=\"btn primary\" onclick=\"document.getElementById('tester').scrollIntoView({behavior:'smooth'})\">\ud83c\udf99\ufe0f Come\u00e7ar agora<\/button>\n <a class=\"btn\" href=\"#como\">Ver como funciona<\/a>\n <\/div>\n <\/div>\n <div class=\"glass card\">\n <div class=\"grid\">\n <div>\n <label>Modo de integra\u00e7\u00e3o<\/label>\n <select id=\"mode\">\n <option value=\"proxy\" selected>Proxy seguro (recomendado)<\/option>\n <option value=\"direct\">Direto na AudD (teste r\u00e1pido)<\/option>\n <\/select>\n <\/div>\n <div id=\"proxyBox\">\n <label>URL do seu Proxy<\/label>\n <input id=\"proxyUrl\" placeholder=\"\/api\/audd-proxy\" value=\"\/api\/audd-proxy\" \/>\n <\/div>\n <div id=\"tokenBox\" style=\"display:none\">\n <label>AudD API Token (vis\u00edvel no front \u2014 apenas para POC)<\/label>\n <input id=\"token\" placeholder=\"cole seu token\" \/>\n <\/div>\n <div>\n <label>Dura\u00e7\u00e3o da grava\u00e7\u00e3o<\/label>\n <select id=\"duration\">\n <option value=\"4\">4s<\/option>\n <option value=\"5\" selected>5s<\/option>\n <option value=\"6\">6s<\/option>\n <option value=\"8\">8s<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div class=\"row\" style=\"margin-top:12px\">\n <button id=\"btnStart\" class=\"btn primary\">\ud83c\udf99\ufe0f Gravar<\/button>\n <button id=\"btnStop\" class=\"btn warn\" disabled>\u23f9\ufe0f Parar<\/button>\n <button id=\"btnSend\" class=\"btn ok\" disabled>\ud83d\ude80 Identificar<\/button>\n <button id=\"btnClear\" class=\"btn danger\">\ud83e\uddf9 Limpar<\/button>\n <\/div>\n <div class=\"status\" id=\"status\">Aguardando\u2026<\/div>\n <div class=\"meter\"><div class=\"bar\" id=\"bar\"><\/div><\/div>\n\n <div class=\"panel\" id=\"tester\">\n <div class=\"grid\">\n <div>\n <div class=\"badge\">\u00c1udio<\/div>\n <audio id=\"player\" controls><\/audio>\n <\/div>\n <div>\n <div class=\"badge\">Resultado<\/div>\n <div id=\"pretty\"><em>Fa\u00e7a uma grava\u00e7\u00e3o e clique em Identificar.<\/em><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"panel\">\n <div class=\"badge\">JSON bruto<\/div>\n <pre id=\"raw\">{}<\/pre>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"foot\" id=\"como\">\n <p>Este demo usa <strong>MediaRecorder<\/strong> para gravar 4\u20138s, envia <strong>multipart\/form-data<\/strong> com <code>file<\/code> para seu <strong>proxy<\/strong> (ou direto para <code>https:\/\/api.audd.io\/<\/code>) e renderiza o retorno.<\/p>\n <p>Para produ\u00e7\u00e3o, mantenha o modo <strong>Proxy<\/strong> e guarde seu token em vari\u00e1vel de ambiente no backend.<\/p>\n <\/section>\n\n<script>\n(function(){\n const $ = (id)=>document.getElementById(id);\n const mode=$('mode'), proxyBox=$('proxyBox'), tokenBox=$('tokenBox');\n const proxyUrl=$('proxyUrl'), token=$('token');\n const duration=$('duration');\n const btnStart=$('btnStart'), btnStop=$('btnStop'), btnSend=$('btnSend'), btnClear=$('btnClear');\n const statusEl=$('status'), bar=$('bar'), player=$('player'), raw=$('raw'), pretty=$('pretty');\n\n let rec, stream, chunks=[], clip=null, timer=null;\n\n mode.addEventListener('change', ()=>{\n const m = mode.value;\n proxyBox.style.display = (m==='proxy') ? 'block' : 'none';\n tokenBox.style.display = (m==='direct') ? 'block' : 'none';\n });\n\n function setStatus(msg){ statusEl.innerHTML = msg; }\n function setProgress(p){ bar.style.width = Math.max(0,Math.min(100,p))+'%'; }\n function enable(el,v=true){ el.disabled=!v; }\n\n async function start(){\n if(!('MediaRecorder' in window)){\n alert('MediaRecorder n\u00e3o \u00e9 suportado neste navegador. Tente Chrome\/Edge\/Safari atual.');\n return;\n }\n try{\n stream = await navigator.mediaDevices.getUserMedia({audio:true});\n rec = new MediaRecorder(stream, { mimeType:'audio\/webm' });\n chunks=[]; clip=null; player.removeAttribute('src'); player.load();\n rec.ondataavailable = (e)=>{ if(e.data && e.data.size) chunks.push(e.data); };\n rec.onstop = ()=>{ clip = new Blob(chunks, {type:'audio\/webm'}); player.src = URL.createObjectURL(clip); enable(btnSend, !!clip); setStatus('<strong>Pronto:<\/strong> clipe criado.'); setProgress(0); };\n rec.start(); enable(btnStart,false); enable(btnStop,true); enable(btnSend,false); setStatus('Gravando\u2026');\n const secs=parseInt(duration.value,10)||5; let t=0; setProgress(0);\n timer=setInterval(()=>{ t+=0.1; setProgress((t\/secs)*100); if(t>=secs){ stop(); } },100);\n }catch(e){ console.error(e); alert('Erro ao acessar microfone: '+e.message); }\n }\n\n function stop(){ if(timer){ clearInterval(timer); timer=null; } if(rec && rec.state!=='inactive') rec.stop(); if(stream){ stream.getTracks().forEach(t=>t.stop()); } enable(btnStop,false); enable(btnStart,true); }\n\n async function send(){\n if(!clip){ alert('Grave primeiro.'); return; }\n raw.textContent='\u2026'; pretty.innerHTML=''; setStatus('Processando\u2026');\n\n try{\n const fd = new FormData();\n fd.append('file', clip, 'clip.webm');\n\n let endpoint = '';\n if(mode.value === 'proxy'){\n endpoint = (proxyUrl.value||'').trim() || '\/api\/audd-proxy';\n } else {\n const tok = (token.value||'').trim();\n if(!tok){ alert('Informe o token da AudD para modo Direto.'); return; }\n fd.append('api_token', tok);\n fd.append('return', 'timecode,spotify,apple_music,deezer,lyrics');\n endpoint = 'https:\/\/api.audd.io\/';\n }\n\n const r = await fetch(endpoint, { method:'POST', body: fd });\n const j = await r.json();\n raw.textContent = JSON.stringify(j, null, 2);\n renderPretty(j);\n setStatus(r.ok ? '<strong>OK:<\/strong> resposta recebida.' : '<strong>Falha:<\/strong> status '+r.status);\n }catch(e){ raw.textContent = (e && e.message) ? e.message : String(e); setStatus('<strong>Erro:<\/strong> verifique conex\u00e3o\/CORS\/endpoint.'); }\n }\n\n function renderPretty(resp){\n if(!resp || !resp.result){ pretty.innerHTML = '<em>Sem resultado<\/em>'; return; }\n const r = resp.result;\n const title = r.title || '\u2014';\n const artist = r.artist || '\u2014';\n const album = r.album?.title || r.album || '\u2014';\n const timecode = r.timecode || r.timecode_start || '';\n const cover = (r.spotify?.album?.images?.[0]?.url) || (r.apple_music?.artwork?.url?.replace('{w}x{h}','220x220')) || (r.deezer?.album?.cover) || '';\n\n const links = [];\n if(r.spotify?.external_urls?.spotify) links.push(['Spotify', r.spotify.external_urls.spotify]);\n if(r.apple_music?.url) links.push(['Apple Music', r.apple_music.url]);\n if(r.deezer?.link) links.push(['Deezer', r.deezer.link]);\n if(r.song_link) links.push(['Song Link', r.song_link]);\n\n pretty.innerHTML = `\n <div class=\"result\">\n <img decoding=\"async\" class=\"cover\" src=\"${cover||''}\" alt=\"capa\" onerror=\"this.style.display='none'\"\/>\n <div>\n <div style=\"font-weight:800;font-size:20px\">${title}<\/div>\n <div style=\"opacity:.85;margin:2px 0 6px\">${artist}${album && album!=='\u2014' ? ' \u2014 '+album : ''}<\/div>\n ${timecode?`<div class=\"badge\">${timecode}<\/div>`:''}\n <div class=\"links\">${links.map(([n,u])=>`<a href=\"${u}\" target=\"_blank\" rel=\"noopener\">${n} \u2197<\/a>`).join('')}<\/div>\n <\/div>\n <\/div>`;\n }\n\n function clearAll(){ stop(); clip=null; chunks=[]; player.removeAttribute('src'); player.load(); raw.textContent='{}'; pretty.innerHTML='<em>Fa\u00e7a uma grava\u00e7\u00e3o e clique em Identificar.<\/em>'; setStatus('Aguardando\u2026'); setProgress(0); enable(btnSend,false); }\n\n btnStart.addEventListener('click', start);\n btnStop.addEventListener('click', stop);\n btnSend.addEventListener('click', send);\n btnClear.addEventListener('click', clearAll);\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SoundID \u2014 Identifique a m\u00fasica agora SoundID Como funciona Testar agora Descubra a m\u00fasica que est\u00e1 tocando. Grave 5 segundos e identifique a faixa com links para Spotify, Apple Music e Deezer. Funciona em site est\u00e1tico usando AudD diretamente ou via proxy. \ud83c\udf99\ufe0f Come\u00e7ar agora Ver como funciona Modo de integra\u00e7\u00e3o Proxy seguro (recomendado)Direto na […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-439","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/439","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=439"}],"version-history":[{"count":4,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/439\/revisions"}],"predecessor-version":[{"id":443,"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/pages\/439\/revisions\/443"}],"wp:attachment":[{"href":"https:\/\/gltecbrasil.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}