{"id":4004,"date":"2025-05-21T20:53:31","date_gmt":"2025-05-21T18:53:31","guid":{"rendered":"https:\/\/artistesdusud.org\/?page_id=4004"},"modified":"2025-05-30T18:03:48","modified_gmt":"2025-05-30T16:03:48","slug":"karaoke-2","status":"publish","type":"page","link":"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/","title":{"rendered":"Karaok\u00e9"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4004\" class=\"elementor elementor-4004\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-056751d e-flex e-con-boxed e-con e-parent\" data-id=\"056751d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6bddae3 elementor-widget elementor-widget-image\" data-id=\"6bddae3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/artistesdusud.org\/wp-content\/uploads\/2025\/05\/Mis-ROND150.png\" class=\"attachment-thumbnail size-thumbnail wp-image-4169\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d4a2b06 e-flex e-con-boxed e-con e-parent\" data-id=\"d4a2b06\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f95e83 elementor-widget elementor-widget-html\" data-id=\"7f95e83\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n<title>Karaok\u00e9<\/title>\r\n<style>\r\n  body {\r\n    font-family: Arial, sans-serif;\r\n    background-color: #111;\r\n    color: #f1f73b;\r\n    padding: 20px;\r\n    margin: 0;\r\n  }\r\n  \r\n  html, body {\r\n  overflow-x: hidden;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n  max-width: 100vw;\r\n}\r\n\r\n  h1, h4 {\r\n    text-align: center;\r\n    color: #0f0;\r\n    margin: 10px 0;\r\n  }\r\n  \r\n  \r\n  \r\n   #searchContainer {\r\n  padding: 10px 30px;\r\n  text-align: center;\r\n  border: 4px solid white;\r\n  border-radius: 15px;\r\n  margin: 0 auto 20px auto;\r\n  width: 100%;\r\n  max-width: 400px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n  #searchInput {\r\n  padding: 10px;\r\n  font-size: 16px;\r\n  border: none;\r\n  background-color: white;\r\n  color: black;\r\n  display: block;\r\n  margin: 0 auto;\r\n}\r\n\r\n  #resultButtonTop {\r\n    display: block;\r\n    margin: 10px auto 0px auto;\r\n    padding: 10px 20px;\r\n    background-color: #4bd1ff;\r\n    color: black;\r\n    font-weight: bold;\r\n    font-size: 18px;\r\n    border: none;\r\n    border-radius: 10px;\r\n    cursor: pointer;\r\n    text-align: center;\r\n  }\r\n  \r\n  \r\n  \r\n  #filterButtons {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  margin: 0px auto 20px auto;\r\n  border: 4px solid white;\r\n  border-radius: 15px;\r\n  padding: 5px 30px;\r\n  width: 100%;\r\n  max-width: 400px;\r\n  box-sizing: border-box;\r\n  gap: 0px;\r\n}\r\n\r\n\r\n.filterTitle {\r\n  color: white;\r\n  margin: 0;\r\n  font-size: 20px;\r\n  text-align: center;\r\n}\r\n\r\n.filterBtns {\r\n  display: flex;\r\n  gap: 10px;\r\n}\r\n\r\n#filterButtons button {\r\n  margin: 0 8px 6px 8px;\r\n  padding: 10px 20px;\r\n  background: #000C60;\r\n  color: white;\r\n  border: none;\r\n  border-radius: 15px;\r\n  cursor: pointer;\r\n  font-weight: bold;\r\n  font-size: 18px;\r\n  transition: background-color 0.3s ease;\r\n}\r\n\r\n#filterButtons button.active {\r\n  background-color: #4bd1ff;\r\n  color: black;\r\n}\r\n\r\n  \r\n \r\n  \r\n  #alphabet {\r\n    text-align: center;\r\n    margin-bottom: 5px;\r\n  }\r\n  #alphabetResultContainer {\r\n  border: 4px solid white;\r\n  border-radius: 15px;\r\n  margin: 0 auto 20px auto;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: 100%;\r\n  max-width: 400px;\r\n  box-sizing: border-box;\r\n  gap: 4px;\r\n}\r\n  #alphabet button {\r\n    margin: 2px 2px;\r\n    padding: 8px 14px;\r\n    background: #5a5a5a;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    transition: background-color 0.3s ease;\r\n    font-size: 18px;\r\n    width: 30px;\r\n    height: 40px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n  #alphabet button:hover {\r\n    background: #555;\r\n  }\r\n  \r\n  \r\n  #songList {\r\n    max-width: 600px;\r\n    margin: 20px auto;\r\n    color: #f1f73b;\r\n    font-weight: bold;\r\n  }\r\n  .song-item {\r\n    background: #222;\r\n    padding: 10px;\r\n    border-radius: 5px;\r\n    margin: 6px 0;\r\n    cursor: pointer;\r\n    color: yellow;\r\n    font-weight: bold;\r\n    transition: background-color 0.3s ease;\r\n  }\r\n  .song-item:hover {\r\n    background-color: #444;\r\n  }\r\n  \r\n  \r\n  form {\r\n    max-width: 500px;\r\n    margin: 20px auto 0 auto;\r\n    background: #494949;\r\n    padding: 15px 20px;\r\n    border-radius: 12px;\r\n  }\r\n  label {\r\n    display: block;\r\n    margin-top: 12px;\r\n    color: white;\r\n    font-weight: bold;\r\n  }\r\n  input[type=\"text\"] {\r\n    width: 100%;\r\n    padding: 8px;\r\n    margin-top: 5px;\r\n    border: none;\r\n    border-radius: 5px;\r\n    font-size: 15px;\r\n    color: #f1f73b;\r\n    background-color: #f8f8f8;\r\n  }\r\n  #formNom {\r\n    background-color: #fbfe9e;\r\n    color: black;\r\n  }\r\n  #formChanteur,\r\n  #formTitre {\r\n    color: black;\r\n    background-color: white;\r\n  }\r\n  .form-row {\r\n    display: flex;\r\n    gap: 10px;\r\n    align-items: center;\r\n    margin-top: 12px;\r\n  }\r\n  #formNom {\r\n    flex: 1;\r\n  }\r\n  button[type=\"submit\"] {\r\n    background-color: #4bd1ff;\r\n    color: black;\r\n    font-weight: bold;\r\n    border: none;\r\n    border-radius: 8px;\r\n    cursor: pointer;\r\n    padding: 10px;\r\n    font-size: 18px;\r\n    white-space: nowrap;\r\n  }\r\n  \r\n  \r\n .arrow {\r\n  width: 24px;\r\n  height: 24px;\r\n  margin: 0 10px;\r\n  position: relative;\r\n  background: transparent;\r\n  animation: slideArrow 0.3s infinite alternate; \/* temps r\u00e9duit \u00e0 0.3s pour acc\u00e9l\u00e9rer *\/\r\n  align-self: center;\r\n}\r\n.arrow::before {\r\n  content: '';\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  width: 12px;\r\n  height: 12px;\r\n  border-top: 3px solid #4bd1ff;\r\n  border-right: 3px solid #4bd1ff;\r\n  transform-origin: center center;\r\n  transform: translate(-50%, -50%) rotate(45deg);\r\n  animation: flipArrow 0.6s infinite alternate; \/* flip toutes les 0.6s *\/\r\n}\r\n@keyframes slideArrow {\r\n  0% { transform: translateX(0); }\r\n  100% { transform: translateX(10px); }\r\n}\r\n@keyframes flipArrow {\r\n  0% { transform: translate(-50%, -50%) rotate(45deg); }\r\n  100% { transform: translate(-50%, -50%) rotate(-135deg); }\r\n}\r\n\r\n.big-emoji {\r\n  font-size: 26px; \/* ou 28px pour exag\u00e9rer un peu *\/\r\n  line-height: 1;\r\n  vertical-align: middle;\r\n}\r\n\r\n.song-item.fr {\r\n  color: yellow;\r\n}\r\n\r\n.song-item.foreign {\r\n  color: #39E639; \/* vert sympa *\/\r\n}\r\n\r\n\r\n\r\n@keyframes eye-move {\r\n  0%, 100% {\r\n    transform: translateX(0);\r\n  }\r\n  25% {\r\n    transform: translateX(-3px);\r\n  }\r\n  50% {\r\n    transform: translateX(3px);\r\n  }\r\n  75% {\r\n    transform: translateX(-1.5px);\r\n  }\r\n}\r\n\r\n.big-emoji {\r\n  display: inline-block;\r\n  animation: eye-move 0.8s infinite;\r\n  will-change: transform;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n.lang-toggle-buttons {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 10px;\r\n  margin-bottom: 10px;\r\n  margin-top: 10px;\r\n}\r\n\r\n.lang-toggle-buttons button {\r\n  padding: 10px 8px;\r\n  font-size: 16px;\r\n  font-weight: bold;\r\n  background-color: #000C60;\r\n  color: white;\r\n  border: none;\r\n  border-radius: 10px;\r\n  cursor: pointer;\r\n  transition: background-color 0.3s ease;\r\n}\r\n\r\n.lang-toggle-buttons button.active {\r\n  background-color: #4bd1ff;\r\n  color: black;\r\n}\r\n\r\n\r\n@keyframes pulse {\r\n  0% {\r\n    transform: scale(1);\r\n    box-shadow: 0 0 0 0 rgba(75, 209, 255, 0.7);\r\n  }\r\n  70% {\r\n    transform: scale(1.1);\r\n    box-shadow: 0 0 0 10px rgba(75, 209, 255, 0);\r\n  }\r\n  100% {\r\n    transform: scale(1);\r\n    box-shadow: 0 0 0 0 rgba(75, 209, 255, 0);\r\n  }\r\n}\r\n\r\n.pulse-animation {\r\n  animation: pulse 0.8s infinite;\r\n}\r\n\r\n\r\n.playlist-title {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 20px;\r\n  font-size: 26px;\r\n  font-weight: bold;\r\n  color: #4bd1ff;\r\n  margin-top: 5px;\r\n  margin-bottom: 10px;\r\n  animation: floatText 1.5s infinite alternate;\r\n}\r\n\r\n.arrow-down {\r\n  font-size: 28px;\r\n  animation: bounceArrow 0.8s infinite;\r\n}\r\n\r\n@keyframes bounceArrow {\r\n  0% { transform: translateY(0); }\r\n  100% { transform: translateY(6px); }\r\n}\r\n\r\n@keyframes floatText {\r\n  0% { transform: translateY(0); }\r\n  100% { transform: translateY(3px); }\r\n}\r\n\r\n\r\n\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n\r\n\r\n<body>\r\n    \r\n<h1 id=\"top\">Mister A<\/h1>\r\n\r\n<div id=\"searchContainer\">\r\n    <input\r\n      type=\"text\"\r\n      id=\"searchInput\"\r\n      placeholder=\"TITRE ou ARTISTE ? C'est ICI !\"\/>\r\n    <button id=\"resultButtonTop\">\r\n  Je veux voir <span class=\"big-emoji\">\ud83d\udc40<\/span>\r\n<\/button>\r\n\r\n<\/div>\r\n\r\n\r\n<div id=\"alphabetResultContainer\">\r\n    <div class=\"lang-toggle-buttons\">\r\n  <button id=\"alphabetBtnFrench\">FRA<\/button>\r\n  <h5 style=\"color: white; text-align: center;\">LISTE FILTR\u00c9E<br><b>( \/NOMS de A - Z )<\/b><\/h5>\r\n  \r\n  <button id=\"alphabetBtnForeign\">INT<\/button>\r\n<\/div>\r\n<div id=\"alphabet\"><\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"filterButtons\">\r\n  <h5 style=\"color: white; text-align: center;\">R\u00c9PERTOIRE COMPLET\r\n  <\/h5>\r\n  <div class=\"filterBtns\">\r\n    <button id=\"btnFrench\" class=\"active\">FRA<\/button>\r\n    <div class=\"arrow\"><\/div>\r\n    <button id=\"btnForeign\">INT<\/button>\r\n  <\/div>\r\n<\/div>\r\n<div class=\"playlist-title\">\r\n  <span class=\"arrow-down\">\u2b07\ufe0f<\/span>\r\n  <span class=\"text\">Playlist<\/span>\r\n  <span class=\"arrow-down\">\u2b07\ufe0f<\/span>\r\n<\/div>\r\n\r\n\r\n<div id=\"songList\">Chargement...<\/div>\r\n\r\n\r\n<form id=\"karaokeForm\">\r\n  <input type=\"hidden\" id=\"formNumero\" name=\"numero\">\r\n  <label for=\"formChanteur\"><b>ARTISTE<\/b>  Selection Auto (Liste)<\/label>\r\n  <input type=\"text\" id=\"formChanteur\" name=\"chanteur\" readonly>\r\n\r\n  <label for=\"formTitre\"><b>TITRE<\/b> Selection Auto (Liste)<\/label>\r\n  <input type=\"text\" id=\"formTitre\" name=\"titre\" readonly>\r\n\r\n  <label for=\"formNom\">Ton <strong>NOM,<\/strong> Ton <strong>EQUIPE,<\/strong><strong> C'est ICI<\/strong><\/label>\r\n  <div style=\"display: flex; gap: 10px;\">\r\n    <input type=\"text\" id=\"formNom\" name=\"nom\" class=\"fond-special\" required style=\"flex: 1;\">\r\n    <button type=\"submit\" id=\"goButton\" class=\"pulse-animation\">GO!<\/button>\r\n<\/div>\r\n<\/form>\r\n\r\n\r\n\r\n\r\n\r\n<script>\r\n  const csvFrench = \"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vT4tuyf2wKa72XAIwm3PVWNeXrYUuoTAjeea5_00YhKGgUeJa79uFUcLqVp3gVNOSgjMeHZDuZPjAvN\/pub?gid=0&single=true&output=csv\";\r\n  const csvForeign = \"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vT4tuyf2wKa72XAIwm3PVWNeXrYUuoTAjeea5_00YhKGgUeJa79uFUcLqVp3gVNOSgjMeHZDuZPjAvN\/pub?gid=1096496916&single=true&output=csv\";\r\n  const submitUrl = \"https:\/\/script.google.com\/macros\/s\/AKfycbz6GsWn0pPbGWw5i0meLikVqoLW0nMKRgda-TowmKiOb0z8Vqd92TXNykkZtRT3xgi2Sg\/exec\";\r\n\r\n  let songsFrench = [];\r\n  let songsForeign = [];\r\n  let songs = [];\r\n\r\n  const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');\r\n  const alphabetContainer = document.getElementById('alphabet');\r\n  const songList = document.getElementById('songList');\r\n  const searchInput = document.getElementById(\"searchInput\");\r\n\r\n  let currentFilter = 'fr';\r\n\r\n  function setupAlphabet() {\r\n    alphabetContainer.innerHTML = '';\r\n    alphabet.forEach(letter => {\r\n      const button = document.createElement('button');\r\n      button.textContent = letter;\r\n      button.onclick = () => filterSongs(letter);\r\n      alphabetContainer.appendChild(button);\r\n    });\r\n  }\r\n  setupAlphabet();\r\n\r\n  function parseCSV(csv) {\r\n    const rows = csv.trim().split('\\n');\r\n    const data = [];\r\n    for (let i = 1; i < rows.length; i++) {\r\n      const cols = rows[i].split(',');\r\n      const chanteur = (cols[0] || \"\").trim();\r\n      const numero = (cols[1] || \"\").trim();\r\n      const titre = (cols[2] || \"\").trim();\r\n      if (numero && titre && chanteur) {\r\n        data.push({ numero, titre, chanteur });\r\n      }\r\n    }\r\n    return data;\r\n  }\r\n\r\n  function displaySongs(list) {\r\n    songList.innerHTML = '';\r\n    if (list.length === 0) {\r\n      songList.innerHTML = '<p>Aucune chanson trouv\u00e9e.<\/p>';\r\n      return;\r\n    }\r\n    list.forEach(song => {\r\n      const div = document.createElement('div');\r\n      div.className = 'song-item';\r\n      div.classList.add(songsFrench.includes(song) ? 'fr' : 'foreign');\r\n      div.textContent = `${song.chanteur} - ${song.numero} - ${song.titre}`;\r\n      div.onclick = () => {\r\n        fillForm(song);\r\n        document.getElementById('karaokeForm').scrollIntoView({behavior: 'smooth'});\r\n      };\r\n      songList.appendChild(div);\r\n    });\r\n  }\r\n\r\n  function filterSongs(letter) {\r\n    searchInput.value = \"\";\r\n    let filtered = currentFilter === 'fr'\r\n      ? songsFrench.filter(s => s.chanteur.toUpperCase().startsWith(letter))\r\n      : songsForeign.filter(s => s.chanteur.toUpperCase().startsWith(letter));\r\n    displaySongs(filtered);\r\n    scrollToSongList();\r\n  }\r\n\r\n  function fillForm(song) {\r\n    document.getElementById('formNumero').value = song.numero;\r\n    document.getElementById('formTitre').value = song.titre;\r\n    document.getElementById('formChanteur').value = song.chanteur;\r\n  }\r\n\r\n  function normalize(str) {\r\n    return str.toLowerCase()\r\n      .normalize(\"NFD\").replace(\/[\\u0300-\\u036f]\/g, \"\")\r\n      .replace(\/['\u2019`]\/g, \"\")\r\n      .replace(\/[^a-z0-9]\/gi, \"\")\r\n      .trim();\r\n  }\r\n\r\n  function filterAndDisplay(term) {\r\n  const normalizedTerm = normalize(term);\r\n  const filtered = songs.filter(s => {\r\n    if (!s.chanteur || !s.titre) return false;\r\n    const fullName = normalize(s.chanteur);\r\n    const nameParts = s.chanteur.trim().split(\/\\s+\/);\r\n    const reversedName = normalize(nameParts.reverse().join(' '));\r\n    const title = normalize(s.titre);\r\n    return (\r\n      title.includes(normalizedTerm) ||\r\n      fullName.includes(normalizedTerm) ||\r\n      reversedName.includes(normalizedTerm)\r\n    );\r\n  });\r\n  displaySongs(filtered);\r\n}\r\n\r\n\r\n  searchInput.addEventListener(\"input\", (e) => {\r\n    filterAndDisplay(e.target.value);\r\n  });\r\n\r\n  searchInput.addEventListener(\"keydown\", (e) => {\r\n    if (e.key === \"Enter\") {\r\n      e.preventDefault();\r\n      const term = searchInput.value;\r\n      if (term.length > 0) {\r\n        filterAndDisplay(term);\r\n        setTimeout(() => {\r\n          songList.scrollIntoView({ behavior: 'smooth' });\r\n          searchInput.value = \"\";\r\n        }, 50);\r\n      }\r\n      searchInput.blur();\r\n    }\r\n  });\r\n\r\n  async function loadSongs() {\r\n    try {\r\n      songList.textContent = \"Chargement...\";\r\n      const [resFr, resFor] = await Promise.all([fetch(csvFrench), fetch(csvForeign)]);\r\n      const [textFr, textFor] = await Promise.all([resFr.text(), resFor.text()]);\r\n      songsFrench = parseCSV(textFr);\r\n      songsForeign = parseCSV(textFor);\r\n      songs = songsFrench.concat(songsForeign);\r\n      displaySongs(songsFrench);\r\n      setActiveButton();\r\n    } catch (err) {\r\n      songList.textContent = \"Erreur de chargement.\";\r\n      console.error(err);\r\n    }\r\n  }\r\n\r\n  const btnFrench = document.getElementById('btnFrench');\r\n  const btnForeign = document.getElementById('btnForeign');\r\n  const alphabetBtnFrench = document.getElementById('alphabetBtnFrench');\r\n  const alphabetBtnForeign = document.getElementById('alphabetBtnForeign');\r\n\r\n  btnFrench.addEventListener('click', () => {\r\n    currentFilter = 'fr';\r\n    displaySongs(songsFrench);\r\n    setActiveButton();\r\n    setAlphabetActiveButton();\r\n    searchInput.value = \"\";\r\n    scrollToSongList();\r\n  });\r\n\r\n  btnForeign.addEventListener('click', () => {\r\n    currentFilter = 'foreign';\r\n    displaySongs(songsForeign);\r\n    setActiveButton();\r\n    setAlphabetActiveButton();\r\n    searchInput.value = \"\";\r\n    scrollToSongList();\r\n  });\r\n\r\n  alphabetBtnFrench.addEventListener('click', () => {\r\n    currentFilter = 'fr';\r\n    displaySongs(songsFrench);\r\n    setAlphabetActiveButton();\r\n  });\r\n\r\n  alphabetBtnForeign.addEventListener('click', () => {\r\n    currentFilter = 'foreign';\r\n    displaySongs(songsForeign);\r\n    setAlphabetActiveButton();\r\n  });\r\n\r\n  function setAlphabetActiveButton() {\r\n    if (currentFilter === 'fr') {\r\n      alphabetBtnFrench.classList.add('active');\r\n      alphabetBtnForeign.classList.remove('active');\r\n    } else {\r\n      alphabetBtnForeign.classList.add('active');\r\n      alphabetBtnFrench.classList.remove('active');\r\n    }\r\n  }\r\n\r\n  function setActiveButton() {\r\n    if (currentFilter === 'fr') {\r\n      btnFrench.classList.add('active');\r\n      btnForeign.classList.remove('active');\r\n    } else {\r\n      btnForeign.classList.add('active');\r\n      btnFrench.classList.remove('active');\r\n    }\r\n  }\r\n\r\n  function scrollToSongList() {\r\n    songList.scrollIntoView({ behavior: 'smooth' });\r\n  }\r\n\r\n  const resultButtonTop = document.getElementById('resultButtonTop');\r\n  resultButtonTop?.addEventListener('click', scrollToSongList);\r\n\r\n  document.getElementById(\"karaokeForm\").addEventListener(\"submit\", async function(e) {\r\n    e.preventDefault();\r\n    const formData = {\r\n      numero: document.getElementById(\"formNumero\").value,\r\n      titre: document.getElementById(\"formTitre\").value,\r\n      chanteur: document.getElementById(\"formChanteur\").value,\r\n      nom: document.getElementById(\"formNom\").value\r\n    };\r\n\r\n    try {\r\n      await fetch(submitUrl, {\r\n        method: \"POST\",\r\n        body: JSON.stringify(formData),\r\n        headers: {\r\n          \"Content-Type\": \"application\/json\"\r\n        },\r\n        mode: 'no-cors'\r\n      });\r\n      alert(\"Bim ! C\u2019est valid\u00e9. Pr\u00e9pare ton show, tu passes bient\u00f4t.\");\r\n      document.getElementById(\"searchInput\").value = \"\";\r\n      document.getElementById(\"karaokeForm\").reset();\r\n      document.querySelector('h1').scrollIntoView({ behavior: 'smooth' });\r\n    } catch (error) {\r\n      alert(\"Probl\u00e8me r\u00e9seau ou script : \" + error.message);\r\n    }\r\n  });\r\n\r\n  \/\/ \u2705 Appel final\r\n  loadSongs().then(setAlphabetActiveButton);\r\n<\/script>\r\n\r\n\r\n\r\n<div style=\"margin-top: 20px; text-align: center;\">\r\n  <a href=\"#top\">\r\n    <button type=\"button\" style=\"\r\n      padding: 2px 25px;\r\n      background-color: #de0ad0;\r\n      color: black;\r\n      font-weight: bold;\r\n      border: none;\r\n      border-radius: 12px;\r\n      font-size: 20px;\r\n      cursor: pointer;\r\n    \">Nouvelle recherche\r\n    <\/button>\r\n  <\/a>\r\n<\/div>\r\n\r\n\r\n\r\n<script>\r\n  \/\/ Cr\u00e9ation du bouton flottant\r\n  const floatingBtn = document.createElement('button');\r\n  floatingBtn.innerHTML = \"\u25b2\";\r\nfloatingBtn.style.fontSize = '20px';  \/\/ ajuste la taille selon ton besoin\r\n\r\n\r\n  floatingBtn.style.position = 'fixed';\r\n  floatingBtn.style.bottom = '15px';\r\n  floatingBtn.style.right = '15px';\r\n  floatingBtn.style.padding = '12px 20px';\r\n  floatingBtn.style.backgroundColor = '#4bd1ff';\r\n  floatingBtn.style.color = 'black';\r\n  floatingBtn.style.fontWeight = 'bold';\r\n  floatingBtn.style.border = 'none';\r\n  floatingBtn.style.borderRadius = '10px';\r\n  floatingBtn.style.cursor = 'pointer';\r\n  floatingBtn.style.zIndex = '1000';\r\n  floatingBtn.style.display = 'none';\r\n\r\n  document.body.appendChild(floatingBtn);\r\n\r\n  \/\/ Clic = scroll jusqu'\u00e0 la div #alphabetResultContainer\r\n  floatingBtn.addEventListener('click', () => {\r\n    document.getElementById('alphabetResultContainer').scrollIntoView({ behavior: 'smooth' });\r\n  });\r\n\r\n  \/\/ Affichage conditionnel\r\n  function handleFloatingBtnVisibility() {\r\n    const playlistTitle = document.querySelector('.playlist-title');\r\n    const karaokeForm = document.getElementById('karaokeForm');\r\n\r\n    if (!playlistTitle || !karaokeForm) return;\r\n\r\n    const playlistBottom = playlistTitle.getBoundingClientRect().bottom;\r\n    const formTop = karaokeForm.getBoundingClientRect().top;\r\n\r\n    const pastPlaylist = playlistBottom < 0;\r\n    const formIsVisible = formTop <= window.innerHeight;\r\n\r\n    \/\/ Afficher le bouton seulement si on est apr\u00e8s la playlist et que le formulaire n\u2019est pas encore visible\r\n    if (pastPlaylist && !formIsVisible) {\r\n      floatingBtn.style.display = 'block';\r\n    } else {\r\n      floatingBtn.style.display = 'none';\r\n    }\r\n  }\r\n\r\n  window.addEventListener('scroll', handleFloatingBtnVisibility);\r\n  window.addEventListener('load', handleFloatingBtnVisibility);\r\n<\/script>\r\n\r\n\r\n\r\n\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\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>Karaok\u00e9 Mister A Je veux voir \ud83d\udc40 FRA LISTE FILTR\u00c9E( \/NOMS de A &#8211; Z ) INT R\u00c9PERTOIRE COMPLET FRA INT \u2b07\ufe0f Playlist \u2b07\ufe0f Chargement&#8230; ARTISTE Selection Auto (Liste) TITRE Selection Auto (Liste) Ton NOM, Ton EQUIPE, C&rsquo;est ICI GO! Nouvelle recherche<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4004","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Karaok\u00e9 - Artistes du sud<\/title>\n<meta name=\"description\" content=\"Animations enfants et adultes dans le sud-ouest de la France. Chanteuse, Groupe de musique, DJ, Sculpteur de ballon, Tatouage \u00e9ph\u00e9m\u00e8re \u00e0 Pau, Biarritz, Bayonne, Saint Jean de Luz, Hossegor, Capbreton, Seignosse, Dax, Mont de Marsan, Tarbes, Lourdes, Arcachon, Cap Ferret, Dpt, 64, 65, 40, 32, 33, 31\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Karaok\u00e9 - Artistes du sud\" \/>\n<meta property=\"og:description\" content=\"Animations enfants et adultes dans le sud-ouest de la France. Chanteuse, Groupe de musique, DJ, Sculpteur de ballon, Tatouage \u00e9ph\u00e9m\u00e8re \u00e0 Pau, Biarritz, Bayonne, Saint Jean de Luz, Hossegor, Capbreton, Seignosse, Dax, Mont de Marsan, Tarbes, Lourdes, Arcachon, Cap Ferret, Dpt, 64, 65, 40, 32, 33, 31\" \/>\n<meta property=\"og:url\" content=\"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Artistes du sud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/alagnamarlene\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-30T16:03:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/artistesdusud.org\/wp-content\/uploads\/2025\/05\/Mis-ROND150.png\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"75 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/index.php\\\/karaoke-2\\\/\",\"url\":\"https:\\\/\\\/artistesdusud.org\\\/index.php\\\/karaoke-2\\\/\",\"name\":\"Karaok\u00e9 - Artistes du sud\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/index.php\\\/karaoke-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/index.php\\\/karaoke-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/artistesdusud.org\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Mis-ROND150.png\",\"datePublished\":\"2025-05-21T18:53:31+00:00\",\"dateModified\":\"2025-05-30T16:03:48+00:00\",\"description\":\"Animations enfants et adultes dans le sud-ouest de la France. Chanteuse, Groupe de musique, DJ, Sculpteur de ballon, Tatouage \u00e9ph\u00e9m\u00e8re \u00e0 Pau, Biarritz, Bayonne, Saint Jean de Luz, Hossegor, Capbreton, Seignosse, Dax, Mont de Marsan, Tarbes, Lourdes, Arcachon, Cap Ferret, Dpt, 64, 65, 40, 32, 33, 31\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/index.php\\\/karaoke-2\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/artistesdusud.org\\\/index.php\\\/karaoke-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/index.php\\\/karaoke-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/artistesdusud.org\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Mis-ROND150.png\",\"contentUrl\":\"https:\\\/\\\/artistesdusud.org\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/Mis-ROND150.png\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/index.php\\\/karaoke-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/artistesdusud.org\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Karaok\u00e9\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/#website\",\"url\":\"https:\\\/\\\/artistesdusud.org\\\/\",\"name\":\"Artistes du sud\",\"description\":\"Artistes - animations enfants et adulte \u00e0 Pau-Biarritz-Tarbes-Dpt 64-65-40-32-31\",\"publisher\":{\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/#organization\"},\"alternateName\":\"Artistes Sud-ouest\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/artistesdusud.org\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/#organization\",\"name\":\"Animations musicales et festives \u00e0 PAU\",\"url\":\"https:\\\/\\\/artistesdusud.org\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/artistesdusud.org\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/Black-and-Pink-Minimalist-Aesthetic-Modern-Simple-Typography-Brand-Logo-1.png\",\"contentUrl\":\"https:\\\/\\\/artistesdusud.org\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/Black-and-Pink-Minimalist-Aesthetic-Modern-Simple-Typography-Brand-Logo-1.png\",\"width\":500,\"height\":500,\"caption\":\"Animations musicales et festives \u00e0 PAU\"},\"image\":{\"@id\":\"https:\\\/\\\/artistesdusud.org\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/alagnamarlene\",\"https:\\\/\\\/www.facebook.com\\\/sofa.musicband\",\"https:\\\/\\\/www.facebook.com\\\/Mister.A.DJ64\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Karaok\u00e9 - Artistes du sud","description":"Animations enfants et adultes dans le sud-ouest de la France. Chanteuse, Groupe de musique, DJ, Sculpteur de ballon, Tatouage \u00e9ph\u00e9m\u00e8re \u00e0 Pau, Biarritz, Bayonne, Saint Jean de Luz, Hossegor, Capbreton, Seignosse, Dax, Mont de Marsan, Tarbes, Lourdes, Arcachon, Cap Ferret, Dpt, 64, 65, 40, 32, 33, 31","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/","og_locale":"fr_FR","og_type":"article","og_title":"Karaok\u00e9 - Artistes du sud","og_description":"Animations enfants et adultes dans le sud-ouest de la France. Chanteuse, Groupe de musique, DJ, Sculpteur de ballon, Tatouage \u00e9ph\u00e9m\u00e8re \u00e0 Pau, Biarritz, Bayonne, Saint Jean de Luz, Hossegor, Capbreton, Seignosse, Dax, Mont de Marsan, Tarbes, Lourdes, Arcachon, Cap Ferret, Dpt, 64, 65, 40, 32, 33, 31","og_url":"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/","og_site_name":"Artistes du sud","article_publisher":"https:\/\/www.facebook.com\/alagnamarlene","article_modified_time":"2025-05-30T16:03:48+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/artistesdusud.org\/wp-content\/uploads\/2025\/05\/Mis-ROND150.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"75 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/","url":"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/","name":"Karaok\u00e9 - Artistes du sud","isPartOf":{"@id":"https:\/\/artistesdusud.org\/#website"},"primaryImageOfPage":{"@id":"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/#primaryimage"},"image":{"@id":"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/#primaryimage"},"thumbnailUrl":"https:\/\/artistesdusud.org\/wp-content\/uploads\/2025\/05\/Mis-ROND150.png","datePublished":"2025-05-21T18:53:31+00:00","dateModified":"2025-05-30T16:03:48+00:00","description":"Animations enfants et adultes dans le sud-ouest de la France. Chanteuse, Groupe de musique, DJ, Sculpteur de ballon, Tatouage \u00e9ph\u00e9m\u00e8re \u00e0 Pau, Biarritz, Bayonne, Saint Jean de Luz, Hossegor, Capbreton, Seignosse, Dax, Mont de Marsan, Tarbes, Lourdes, Arcachon, Cap Ferret, Dpt, 64, 65, 40, 32, 33, 31","breadcrumb":{"@id":"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/artistesdusud.org\/index.php\/karaoke-2\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/#primaryimage","url":"https:\/\/artistesdusud.org\/wp-content\/uploads\/2025\/05\/Mis-ROND150.png","contentUrl":"https:\/\/artistesdusud.org\/wp-content\/uploads\/2025\/05\/Mis-ROND150.png","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/artistesdusud.org\/index.php\/karaoke-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/artistesdusud.org\/"},{"@type":"ListItem","position":2,"name":"Karaok\u00e9"}]},{"@type":"WebSite","@id":"https:\/\/artistesdusud.org\/#website","url":"https:\/\/artistesdusud.org\/","name":"Artistes du sud","description":"Artistes - animations enfants et adulte \u00e0 Pau-Biarritz-Tarbes-Dpt 64-65-40-32-31","publisher":{"@id":"https:\/\/artistesdusud.org\/#organization"},"alternateName":"Artistes Sud-ouest","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/artistesdusud.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/artistesdusud.org\/#organization","name":"Animations musicales et festives \u00e0 PAU","url":"https:\/\/artistesdusud.org\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/artistesdusud.org\/#\/schema\/logo\/image\/","url":"https:\/\/artistesdusud.org\/wp-content\/uploads\/2024\/02\/Black-and-Pink-Minimalist-Aesthetic-Modern-Simple-Typography-Brand-Logo-1.png","contentUrl":"https:\/\/artistesdusud.org\/wp-content\/uploads\/2024\/02\/Black-and-Pink-Minimalist-Aesthetic-Modern-Simple-Typography-Brand-Logo-1.png","width":500,"height":500,"caption":"Animations musicales et festives \u00e0 PAU"},"image":{"@id":"https:\/\/artistesdusud.org\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/alagnamarlene","https:\/\/www.facebook.com\/sofa.musicband","https:\/\/www.facebook.com\/Mister.A.DJ64"]}]}},"_links":{"self":[{"href":"https:\/\/artistesdusud.org\/index.php\/wp-json\/wp\/v2\/pages\/4004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artistesdusud.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/artistesdusud.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/artistesdusud.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artistesdusud.org\/index.php\/wp-json\/wp\/v2\/comments?post=4004"}],"version-history":[{"count":1960,"href":"https:\/\/artistesdusud.org\/index.php\/wp-json\/wp\/v2\/pages\/4004\/revisions"}],"predecessor-version":[{"id":6151,"href":"https:\/\/artistesdusud.org\/index.php\/wp-json\/wp\/v2\/pages\/4004\/revisions\/6151"}],"wp:attachment":[{"href":"https:\/\/artistesdusud.org\/index.php\/wp-json\/wp\/v2\/media?parent=4004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}