{"id":13103,"date":"2025-02-11T12:52:09","date_gmt":"2025-02-11T15:52:09","guid":{"rendered":"https:\/\/impactar.com.br\/?page_id=13103"},"modified":"2025-02-11T18:08:04","modified_gmt":"2025-02-11T21:08:04","slug":"player","status":"publish","type":"page","link":"https:\/\/impactar.com.br\/?page_id=13103","title":{"rendered":"Player"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Player de M\u00fasica Inteligente<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #000;\n color: #fff;\n overflow: hidden;\n }\n #container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n }\n #search {\n margin-bottom: 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n width: 100%;\n max-width: 500px;\n }\n #search .input-group {\n display: flex;\n gap: 10px;\n width: 100%;\n }\n #search input {\n padding: 10px;\n font-size: 16px;\n border: none;\n border-radius: 25px;\n flex: 1;\n background-color: rgba(255, 255, 255, 0.1);\n color: white;\n }\n #search button {\n padding: 10px 20px;\n font-size: 16px;\n border: none;\n border-radius: 25px;\n background-color: #ff0050;\n color: white;\n cursor: pointer;\n }\n #search button:hover {\n background-color: #ff1a6d;\n }\n #search select {\n padding: 10px;\n font-size: 16px;\n border: none;\n border-radius: 25px;\n width: 100%;\n background-color: rgba(255, 255, 255, 0.1);\n color: white;\n }\n #thumbnail {\n width: 100%;\n max-width: 400px;\n height: 50vh;\n background-color: #000;\n border-radius: 15px;\n overflow: hidden;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n #thumbnail img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n #player {\n width: 1px;\n height: 1px;\n position: absolute;\n top: -100px; \/* Move o player para fora da tela *\/\n left: -100px;\n }\n #controls {\n margin-top: 10px;\n display: flex;\n gap: 10px;\n }\n #controls button {\n background-color: rgba(255, 255, 255, 0.2);\n color: white;\n border: none;\n padding: 10px 20px;\n font-size: 16px;\n cursor: pointer;\n border-radius: 50px;\n backdrop-filter: blur(10px);\n }\n #controls button:hover {\n background-color: rgba(255, 255, 255, 0.3);\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"container\">\n <!-- \u00c1rea de busca e sele\u00e7\u00e3o -->\n <div id=\"search\">\n <select id=\"playMode\">\n <option value=\"auto\">Autom\u00e1tico (melhores partes)<\/option>\n <option value=\"predefined\">Predefinido (30-120 segundos)<\/option>\n <option value=\"normal\">Normal (m\u00fasica completa)<\/option>\n <\/select>\n <div class=\"input-group\">\n <input type=\"text\" id=\"searchQuery\" placeholder=\"Ex: Anitta, Sertanejo, Rock...\" onkeydown=\"handleKeyDown(event)\">\n <button onclick=\"startPlaylist()\">Tocar<\/button>\n <\/div>\n <\/div>\n\n <!-- Thumbnail do v\u00eddeo -->\n <div id=\"thumbnail\">\n <img decoding=\"async\" id=\"thumbnail-img\" src=\"\" alt=\"Capa do v\u00eddeo\">\n <\/div>\n\n <!-- Player de v\u00eddeo (oculto) -->\n <div id=\"player\"><\/div>\n\n <!-- Controles de navega\u00e7\u00e3o -->\n <div id=\"controls\">\n <button onclick=\"previousVideo()\">Voltar<\/button>\n <button onclick=\"nextVideo()\">Avan\u00e7ar<\/button>\n <\/div>\n <\/div>\n \n <script>\n const API_KEY = \"AIzaSyAHsp7PKMl5QVsBkVuQ0jtxBrbyvNaXm28\"; \/\/ \ud83d\udd34 SUBSTITUA PELA SUA NOVA CHAVE DE API!\n\n let tag = document.createElement('script');\n tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\n let firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\n let player;\n let playlist = [];\n let playedVideos = new Set(); \/\/ Armazena os v\u00eddeos j\u00e1 tocados\n let currentVideoIndex = -1; \/\/ \u00cdndice do v\u00eddeo atual na playlist\n\n function onYouTubeIframeAPIReady() {\n player = new YT.Player('player', {\n height: '100%',\n width: '100%',\n playerVars: { autoplay: 1, controls: 0 },\n events: {\n \"onStateChange\": onPlayerStateChange\n }\n });\n }\n\n \/\/ Fun\u00e7\u00e3o para iniciar a playlist ao pressionar \"Enter\"\n function handleKeyDown(event) {\n if (event.key === \"Enter\") {\n startPlaylist();\n }\n }\n\n async function searchMusic(query) {\n let url = `https:\/\/www.googleapis.com\/youtube\/v3\/search?part=snippet&type=video&q=${query}&key=${API_KEY}&maxResults=20&order=relevance`;\n\n let response = await fetch(url);\n let data = await response.json();\n\n if (data.items.length > 0) {\n let videoIds = data.items.map(item => item.id.videoId);\n addToPlaylist(videoIds);\n } else {\n alert(\"Nenhuma m\u00fasica encontrada!\");\n }\n }\n\n function addToPlaylist(videoIds) {\n \/\/ Filtra v\u00eddeos que ainda n\u00e3o foram tocados\n let newVideos = videoIds.filter(id => !playedVideos.has(id));\n\n if (newVideos.length > 0) {\n playlist.push(...newVideos); \/\/ Adiciona apenas v\u00eddeos novos \u00e0 playlist\n playedVideos.add(...newVideos); \/\/ Marca os v\u00eddeos como tocados\n }\n\n if (playlist.length > 0) {\n currentVideoIndex = 0; \/\/ Come\u00e7a do primeiro v\u00eddeo\n playNext();\n } else {\n alert(\"Nenhuma nova m\u00fasica dispon\u00edvel. Buscando mais...\");\n searchMusic(document.getElementById(\"searchQuery\").value);\n }\n }\n\n async function playNext() {\n if (currentVideoIndex < playlist.length - 1) {\n currentVideoIndex++; \/\/ Avan\u00e7a para o pr\u00f3ximo v\u00eddeo\n let videoId = playlist[currentVideoIndex];\n let duration = await getVideoDuration(videoId);\n playMusic(videoId, duration);\n } else {\n alert(\"Fim da playlist. Buscando mais v\u00eddeos...\");\n searchMusic(document.getElementById(\"searchQuery\").value);\n }\n }\n\n async function playPrevious() {\n if (currentVideoIndex > 0) {\n currentVideoIndex--; \/\/ Volta para o v\u00eddeo anterior\n let videoId = playlist[currentVideoIndex];\n let duration = await getVideoDuration(videoId);\n playMusic(videoId, duration);\n } else {\n alert(\"Este \u00e9 o primeiro v\u00eddeo da playlist.\");\n }\n }\n\n async function getVideoDuration(videoId) {\n let url = `https:\/\/www.googleapis.com\/youtube\/v3\/videos?part=snippet&id=${videoId}&key=${API_KEY}`;\n let response = await fetch(url);\n let data = await response.json();\n if (data.items.length > 0) {\n \/\/ Atualiza a thumbnail do v\u00eddeo\n const thumbnailUrl = data.items[0].snippet.thumbnails.high.url;\n document.getElementById(\"thumbnail-img\").src = thumbnailUrl;\n\n let duration = parseISO8601Duration(data.items[0].contentDetails.duration);\n return duration;\n }\n return 180; \/\/ Padr\u00e3o: 3 minutos se n\u00e3o conseguir buscar a dura\u00e7\u00e3o\n }\n\n function parseISO8601Duration(duration) {\n let match = duration.match(\/PT(\\d+M)?(\\d+S)?\/);\n let minutes = match[1] ? parseInt(match[1]) : 0;\n let seconds = match[2] ? parseInt(match[2]) : 0;\n return minutes * 60 + seconds;\n }\n\n function playMusic(videoId, duration) {\n let playMode = document.getElementById(\"playMode\").value;\n let startSeconds, endSeconds;\n\n if (playMode === \"auto\") {\n startSeconds = Math.max(10, Math.floor(duration * 0.2)); \/\/ Come\u00e7a entre 20% do v\u00eddeo\n endSeconds = Math.min(duration, startSeconds + 120); \/\/ Reproduz por no m\u00e1ximo 120 segundos\n } else if (playMode === \"predefined\") {\n startSeconds = 30; \/\/ Come\u00e7a em 30 segundos\n endSeconds = Math.min(duration, 120); \/\/ Reproduz at\u00e9 120 segundos\n } else {\n startSeconds = 0; \/\/ Come\u00e7a do in\u00edcio\n endSeconds = duration; \/\/ Reproduz at\u00e9 o final\n }\n\n player.loadVideoById({\n videoId: videoId,\n startSeconds: startSeconds,\n endSeconds: endSeconds\n });\n }\n\n function onPlayerStateChange(event) {\n if (event.data === YT.PlayerState.ENDED) {\n playNext();\n }\n }\n\n function startPlaylist() {\n let query = document.getElementById(\"searchQuery\").value;\n if (query.trim() === \"\") {\n alert(\"Por favor, digite o nome de um artista, m\u00fasica ou g\u00eanero musical.\");\n return;\n }\n\n playlist = [];\n playedVideos.clear();\n currentVideoIndex = -1; \/\/ Reinicia o \u00edndice\n searchMusic(query);\n }\n\n function previousVideo() {\n playPrevious();\n }\n\n function nextVideo() {\n playNext();\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Player de M\u00fasica Inteligente Autom\u00e1tico (melhores partes)Predefinido (30-120 segundos)Normal (m\u00fasica completa) Tocar Voltar Avan\u00e7ar<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"content-type":"","footnotes":""},"class_list":["post-13103","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/impactar.com.br\/index.php?rest_route=\/wp\/v2\/pages\/13103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/impactar.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/impactar.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/impactar.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/impactar.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13103"}],"version-history":[{"count":0,"href":"https:\/\/impactar.com.br\/index.php?rest_route=\/wp\/v2\/pages\/13103\/revisions"}],"wp:attachment":[{"href":"https:\/\/impactar.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}