{"id":563,"date":"2026-07-29T09:26:27","date_gmt":"2026-07-29T07:26:27","guid":{"rendered":"https:\/\/lapattack.de\/?page_id=563"},"modified":"2026-07-29T09:50:51","modified_gmt":"2026-07-29T07:50:51","slug":"twitch-sounds","status":"publish","type":"page","link":"https:\/\/lapattack.de\/?page_id=563","title":{"rendered":"Twitch Sounds"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"563\" class=\"elementor elementor-563\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d45e16 e-flex e-con-boxed e-con e-parent\" data-id=\"0d45e16\" 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-7b62fb8 elementor-widget elementor-widget-html\" data-id=\"7b62fb8\" 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\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  .la-page{\r\n    --asphalt:#0B0D0F;--carbon:#1A1D21;--carbon-2:#232730;--line:#2E3238;\r\n    --papaya:#FF7A1A;--chalk:#EDEDE8;--steel:#8B92A0;--steel-dim:#5B6270;\r\n    background:var(--asphalt);color:var(--chalk);font-family:'Inter',sans-serif;\r\n    -webkit-font-smoothing:antialiased;overflow-x:hidden;margin:0 -1000px;padding:0 1000px;\r\n  }\r\n  .la-page *{box-sizing:border-box;}\r\n  .la-page .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}\r\n  .la-page .mono{font-family:'JetBrains Mono',monospace;}\r\n\r\n  .la-page .sb-hero{padding:70px 0 40px;}\r\n  .la-page .kicker{display:flex;align-items:center;gap:10px;color:var(--papaya);font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:22px;}\r\n  .la-page .kicker::before{content:\"\";width:24px;height:1px;background:var(--papaya);}\r\n  .la-page .sb-hero h1{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(32px,5vw,52px);line-height:1.05;font-weight:700;margin:0 0 20px;}\r\n  .la-page .sb-hero p{font-size:17px;color:var(--steel);max-width:600px;line-height:1.6;margin:0 0 28px;}\r\n\r\n  .la-page .sb-search{\r\n    width:100%;max-width:420px;padding:13px 18px;border-radius:6px;\r\n    border:1px solid var(--line);background:var(--carbon);color:var(--chalk);\r\n    font-family:'Inter',sans-serif;font-size:15px;\r\n  }\r\n  .la-page .sb-search::placeholder{color:var(--steel-dim);}\r\n  .la-page .sb-search:focus{outline:none;border-color:var(--papaya);}\r\n\r\n  .la-page .sb-section{padding:0 0 100px;}\r\n  .la-page .sb-grid{\r\n    display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));\r\n    gap:10px;margin-top:30px;\r\n  }\r\n  .la-page .sb-card{\r\n    position:relative;background:var(--carbon);border:1px solid var(--line);border-radius:6px;\r\n    padding:16px 14px;cursor:pointer;transition:background .12s, border-color .12s, transform .08s;\r\n    display:flex;flex-direction:column;gap:10px;\r\n  }\r\n  .la-page .sb-card:hover{background:var(--carbon-2);}\r\n  .la-page .sb-card:active{transform:scale(0.97);}\r\n  .la-page .sb-card.playing{border-color:var(--papaya);background:var(--carbon-2);}\r\n  .la-page .sb-card-top{display:flex;align-items:center;justify-content:flex-start;gap:8px;}\r\n  .la-page .sb-icon{\r\n    width:30px;height:30px;border-radius:50%;background:var(--asphalt);\r\n    display:flex;align-items:center;justify-content:center;flex:none;\r\n    border:1px solid var(--line);\r\n  }\r\n  .la-page .sb-card.playing .sb-icon{border-color:var(--papaya);}\r\n  .la-page .sb-icon svg{width:14px;height:14px;fill:var(--steel);}\r\n  .la-page .sb-card.playing .sb-icon svg{fill:var(--papaya);}\r\n  .la-page .sb-name{\r\n    font-size:13px;font-weight:600;color:var(--chalk);line-height:1.35;\r\n    word-break:break-word;\r\n  }\r\n  .la-page .sb-empty, .la-page .sb-loading{color:var(--steel);font-size:15px;padding:20px 0;}\r\n  .la-page .sb-count{color:var(--steel-dim);font-size:13px;margin-top:10px;}\r\n\r\n  @media (max-width:700px){\r\n    .la-page .sb-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;}\r\n    .la-page .sb-card{padding:12px 10px;}\r\n  }\r\n<\/style>\r\n\r\n<div class=\"la-page\">\r\n\r\n<section class=\"sb-hero\">\r\n  <div class=\"wrap\">\r\n    <div class=\"kicker\">Stream-Toolkit<\/div>\r\n    <h1>Soundboard<\/h1>\r\n    <p>Alle Sounds vom Stream an einem Ort \u2014 anklicken zum Abspielen, nochmal klicken zum Stoppen. Falls du einen Sound brauchst, schreib mir einfach kurz an <a href=\"mailto:admin@lapattack.de\" style=\"color:#FF7A1A;\">admin@lapattack.de<\/a>.<\/p>\r\n    <input type=\"text\" class=\"sb-search\" id=\"sb-search\" placeholder=\"Sound suchen\u2026\">\r\n    <div class=\"sb-count\" id=\"sb-count\"><\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<section class=\"sb-section\">\r\n  <div class=\"wrap\">\r\n    <div class=\"sb-grid\" id=\"sb-grid\">\r\n      <p class=\"sb-loading\">Lade Sounds\u2026<\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  var allSounds = [];\r\n  var currentAudio = null;\r\n  var currentCard = null;\r\n\r\n  function formatLabel(item) {\r\n    if (item.title && item.title.rendered) {\r\n      var t = item.title.rendered.trim();\r\n      \/\/ Falls der Titel einfach der Dateiname ist (z. B. \"mein-sound-01\"),\r\n      \/\/ trotzdem h\u00fcbsch formatieren.\r\n      if (!\/\\.(mp3|wav|ogg|m4a)$\/i.test(t) && !\/^[a-z0-9_-]+$\/i.test(t.replace(\/\\s\/g,''))) {\r\n        return t;\r\n      }\r\n      t = t.replace(\/\\.(mp3|wav|ogg|m4a)$\/i, '');\r\n      t = t.replace(\/[-_]+\/g, ' ').trim();\r\n      return t.replace(\/\\w\\S*\/g, function(w){ return w.charAt(0).toUpperCase() + w.slice(1).toLowerCase(); });\r\n    }\r\n    return 'Sound';\r\n  }\r\n\r\n  function playIcon() {\r\n    return '<svg viewBox=\"0 0 24 24\"><path d=\"M8 5v14l11-7z\"\/><\/svg>';\r\n  }\r\n  function stopIcon() {\r\n    return '<svg viewBox=\"0 0 24 24\"><path d=\"M6 6h12v12H6z\"\/><\/svg>';\r\n  }\r\n\r\n  function stopCurrent() {\r\n    if (currentAudio) {\r\n      currentAudio.pause();\r\n      currentAudio.currentTime = 0;\r\n    }\r\n    if (currentCard) {\r\n      currentCard.classList.remove('playing');\r\n      var icon = currentCard.querySelector('.sb-icon');\r\n      if (icon) icon.innerHTML = playIcon();\r\n    }\r\n    currentAudio = null;\r\n    currentCard = null;\r\n  }\r\n\r\n  function renderGrid(sounds) {\r\n    var grid = document.getElementById('sb-grid');\r\n    var countEl = document.getElementById('sb-count');\r\n    if (!sounds.length) {\r\n      grid.innerHTML = '<p class=\"sb-empty\">Keine Sounds gefunden.<\/p>';\r\n      countEl.textContent = '';\r\n      return;\r\n    }\r\n    countEl.textContent = sounds.length + ' Sound' + (sounds.length === 1 ? '' : 's');\r\n    var html = '';\r\n    sounds.forEach(function(s, i){\r\n      html += '<div class=\"sb-card\" data-index=\"' + i + '\">' +\r\n        '<div class=\"sb-card-top\">' +\r\n          '<div class=\"sb-icon\">' + playIcon() + '<\/div>' +\r\n        '<\/div>' +\r\n        '<div class=\"sb-name\">' + s.label + '<\/div>' +\r\n      '<\/div>';\r\n    });\r\n    grid.innerHTML = html;\r\n\r\n    grid.querySelectorAll('.sb-card').forEach(function(card){\r\n      card.addEventListener('click', function(e){\r\n        var idx = parseInt(card.getAttribute('data-index'), 10);\r\n        var sound = sounds[idx];\r\n\r\n        if (currentCard === card) {\r\n          stopCurrent();\r\n          return;\r\n        }\r\n        stopCurrent();\r\n\r\n        var audio = new Audio(sound.url);\r\n        audio.play();\r\n        audio.addEventListener('ended', stopCurrent);\r\n\r\n        currentAudio = audio;\r\n        currentCard = card;\r\n        card.classList.add('playing');\r\n        var icon = card.querySelector('.sb-icon');\r\n        if (icon) icon.innerHTML = stopIcon();\r\n      });\r\n    });\r\n  }\r\n\r\n  function applyFilter() {\r\n    var q = document.getElementById('sb-search').value.trim().toLowerCase();\r\n    if (!q) { renderGrid(allSounds); return; }\r\n    var filtered = allSounds.filter(function(s){\r\n      return s.label.toLowerCase().indexOf(q) !== -1;\r\n    });\r\n    renderGrid(filtered);\r\n  }\r\n\r\n  document.getElementById('sb-search').addEventListener('input', applyFilter);\r\n\r\n  fetch('\/?rest_route=\/wp\/v2\/media&media_type=audio&per_page=100')\r\n    .then(function(res){ return res.json(); })\r\n    .then(function(items){\r\n      if (!Array.isArray(items) || !items.length) {\r\n        document.getElementById('sb-grid').innerHTML = '<p class=\"sb-empty\">Noch keine Sounds hochgeladen. Lad welche in die Mediathek, dann tauchen sie hier automatisch auf.<\/p>';\r\n        return;\r\n      }\r\n      allSounds = items.map(function(item){\r\n        return { label: formatLabel(item), url: item.source_url };\r\n      }).sort(function(a, b){ return a.label.localeCompare(b.label); });\r\n      renderGrid(allSounds);\r\n    })\r\n    .catch(function(err){\r\n      document.getElementById('sb-grid').innerHTML = '<p class=\"sb-empty\">Sounds konnten gerade nicht geladen werden.<\/p>';\r\n      console.log('Soundboard-Fehler', err);\r\n    });\r\n})();\r\n<\/script>\r\n\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>Stream-Toolkit Soundboard Alle Sounds vom Stream an einem Ort \u2014 anklicken zum Abspielen, nochmal klicken zum Stoppen. Falls du einen Sound brauchst, schreib mir einfach kurz an admin@lapattack.de. Lade Sounds\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-563","page","type-page","status-publish"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/lapattack.de\/index.php?rest_route=\/wp\/v2\/pages\/563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lapattack.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lapattack.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lapattack.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lapattack.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=563"}],"version-history":[{"count":7,"href":"https:\/\/lapattack.de\/index.php?rest_route=\/wp\/v2\/pages\/563\/revisions"}],"predecessor-version":[{"id":573,"href":"https:\/\/lapattack.de\/index.php?rest_route=\/wp\/v2\/pages\/563\/revisions\/573"}],"wp:attachment":[{"href":"https:\/\/lapattack.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}