{"id":5443,"date":"2025-12-24T20:05:00","date_gmt":"2025-12-24T20:05:00","guid":{"rendered":"https:\/\/whatwhenwhy.de\/magazin\/?p=5443"},"modified":"2026-03-11T14:31:58","modified_gmt":"2026-03-11T14:31:58","slug":"wwweihnachten","status":"publish","type":"post","link":"https:\/\/whatwhenwhy.de\/magazin\/wwweihnachten\/","title":{"rendered":"Unser wwWeihnachtssong!"},"content":{"rendered":"\n<style>\n    * { box-sizing: border-box; }\n\n    html, body {\n        margin: 0;\n        padding: 0;\n        height: 100%;\n    }\n\n    #legal {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        min-height: 60vh;\n        padding-top: 0vh;\n padding-bottom: 0vh;\n    }\n\n    .player-wrapper {\n        position: relative;\n        width: 100%;\n        max-width: 900px;\n        padding: 16px;\n        text-align: center;\n    }\n\n    .cover {\n        width: 100%;\n        object-fit:contain;\n        display: block;\n        border-radius: 12px;\n        box-shadow: 0 12px 40px rgba(0,0,0,0.8);\n    }\n\n    audio {\n        width: 100%;\n        margin-top: 16px;\n        display: none;\n    }\n\n    .play-overlay {\n        position: absolute;\n        inset: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n    }\n\n    .play-button {\n        pointer-events: auto;\n        border: none;\n        border-radius: 999px;\n        padding: 5px 28px;\n        font-size: 25px;\n        font-weight: 800;\n        text-transform: uppercase;\n        letter-spacing: 0.08em;\n        background: rgba(255, 255, 255, 0.9);\n        color: #000;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;\n    }\n\n    .play-button:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 16px 40px rgba(0,0,0,0.5);\n        background: rgba(255, 255, 255, 1);\n    }\n\n    .button-icon {\n        width: 24px;\n        height: 24px;\n        display: inline-block;\n    }\n\n    .play-text {\n        white-space: nowrap;\n    }\n\n    .play-overlay.hidden {\n        display: none;\n    }\n\n    .progress-container {\n        width: 100%;\n        height: 6px;\n        background: #999;\n        border-radius: 3px;\n        margin: 16px 0;\n        overflow: hidden;\n    }\n\n    .progress-bar {\n        width: 0;\n        height: 100%;\n        background: #fff;\n        border-radius: 3px;\n        transition: width 0.1s linear;\n    }\n\n    .time-info {\n        display: flex;\n        justify-content: space-between;\n        font-size: 14px;\n        color: #666;\n        margin-top: 8px;\n    }\n<\/style>\n<section id=\"legal\">\n    <div class=\"player-wrapper\">\n        <!-- Coverbild -->\n        <img decoding=\"async\" src=\"https:\/\/whatwhenwhy.de\/img\/xmas.jpg\" alt=\"www Song Cover\" class=\"cover\">\n\n        <!-- Play\/Unlock Button -->\n        <div class=\"play-overlay\" id=\"playOverlay\">\n            <button onclick=\"togglePlayPause()\" class=\"play-button\" id=\"playButton\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 640\" class=\"button-icon\" fill=\"currentColor\">\n                    <path d=\"M187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6C135.4 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9z\"\/>\n                <\/svg>\n                <span class=\"play-text\">Play<\/span>\n            <\/button>\n        <\/div>\n\n        <!-- Progress Bar -->\n        <div class=\"progress-container\">\n            <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n        <\/div>\n        <div class=\"time-info\">\n            <span id=\"currentTime\">0:00<\/span>\n            <span id=\"totalTime\">0:00<\/span>\n        <\/div>\n\n        <!-- Audio Element -->\n        <audio id=\"player\" preload=\"auto\" playsinline><\/audio>\n    <\/div>\n<\/section>\n\n<script>\n    let audioContext = null;\n    let audioBuffer = null;\n    let isPlaying = false;\n    let source = null;\n    let startTime = 0;\n    let duration = 0;\n    const progressBar = document.getElementById('progressBar');\n    const currentTimeEl = document.getElementById('currentTime');\n    const totalTimeEl = document.getElementById('totalTime');\n    const playButton = document.getElementById('playButton');\n    const playText = document.querySelector('.play-text');\n\n    let progressInterval = null;\n    let currentProgress = 0;\n\n    \/\/ Initialize audio context\n    function initAudioContext() {\n        if ('AudioContext' in window || 'webkitAudioContext' in window) {\n            audioContext = new (window.AudioContext || window.webkitAudioContext)();\n            isPlaying = audioContext.state !== 'suspended';\n        }\n    }\n\n    \/\/ Toggle play\/pause\n    function togglePlayPause() {\n        if (isPlaying) {\n            pauseAudio();\n        } else {\n            playAudio();\n        }\n    }\n\n    \/\/ Play audio using Web Audio API\n    function playAudio() {\n        if (!audioBuffer) {\n            fetch('https:\/\/whatwhenwhy.de\/img\/xmas-song.mp3')\n                .then(response => response.arrayBuffer())\n                .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer, buffer => {\n                    audioBuffer = buffer;\n                    startPlayback();\n                }));\n        } else {\n            startPlayback();\n        }\n    }\n\n    function startPlayback() {\n        if (audioContext.state === 'suspended') {\n            audioContext.resume().then(() => {\n                play();\n            });\n        } else {\n            play();\n        }\n    }\n\n    function play() {\n        if (source) source.stop();\n        source = audioContext.createBufferSource();\n        source.buffer = audioBuffer;\n        source.connect(audioContext.destination);\n        source.start(0, startTime);\n        isPlaying = true;\n        duration = audioBuffer.duration;\n        totalTimeEl.textContent = formatTime(duration);\n        updateProgressBar();\n        playButton.innerHTML = `\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 320 512\" class=\"button-icon\" fill=\"currentColor\">\n                <path d=\"M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z\"\/>\n            <\/svg>\n            <span class=\"play-text\">Pause<\/span>\n        `;\n    }\n\n    function pauseAudio() {\n        if (source) {\n            source.stop();\n            currentProgress = (audioContext.currentTime - startTime) % duration;\n            startTime += currentProgress;\n        }\n        isPlaying = false;\n        playButton.innerHTML = `\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 640\" class=\"button-icon\" fill=\"currentColor\">\n                <path d=\"M187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6C135.4 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9z\"\/>\n            <\/svg>\n            <span class=\"play-text\">Play<\/span>\n        `;\n        clearInterval(progressInterval);\n    }\n\n    function updateProgressBar() {\n        clearInterval(progressInterval);\n        progressInterval = setInterval(() => {\n            const elapsed = (audioContext.currentTime - startTime) % duration;\n            const progress = (elapsed \/ duration) * 100;\n            progressBar.style.width = progress + '%';\n            currentTimeEl.textContent = formatTime(elapsed);\n        }, 100);\n    }\n\n    function formatTime(seconds) {\n        const mins = Math.floor(seconds \/ 60);\n        const secs = Math.floor(seconds % 60);\n        return `${mins}:${secs < 10 ? '0' : ''}${secs}`;\n    }\n\n    \/\/ Initialize on page load\n    window.addEventListener('load', initAudioContext);\n<\/script>\n\n\n\n<p><strong>Ein bisschen Magie, ein bisschen KI \u2026 \u2728<\/strong><\/p>\n\n\n\n<p>Weihnachten ist f\u00fcr uns jedes Jahr das sch\u00f6nste Beispiel daf\u00fcr, wie ein gro\u00dfes Event \u2013 mit der richtigen 360-Grad-Inszenierung - Wirkung entfaltet, Emotionen entfacht, Geschichten zum Leuchten bringt und Menschen in besonderen Momenten miteinander verbindet.<\/p>\n\n\n\n<p>Genau diesen Gedanken haben wir mit in unsere kreative&nbsp;<strong>W<\/strong>eihnachts<strong>W<\/strong>ichtel<strong>W<\/strong>erkstatt genommen.<\/p>\n\n\n\n<p>Zwischen viel Freude, Ideenfunken und einem Hauch KI-Magie ist etwas entstanden, das uns selbst begeistert und auch ein bisschen \u00fcberrascht hat: Unser www-Team als weihnachtliche Disney-Charaktere. Liebevoll gestaltet, m\u00e4rchenhaft \u00fcberzeichnet und eindeutig bereit, ein bisschen Festtagszauber zu verbreiten. Erkennt Ihr uns? \u2728<\/p>\n\n\n\n<p>Und weil zu einer gelungenen Inszenierung immer auch der richtige Sound geh\u00f6rt, haben wir bei unseren Avataren nicht Halt gemacht:<\/p>\n\n\n\n<p>Wir pr\u00e4sentieren Euch den wwWeihnachtssong \u2013 vertont und geschaffen, um gute Laune und weihnachtliche Vorfreude zu verbreiten.<\/p>\n\n\n\n<p>Nehmt Euch einen Moment zum Innehalten, zum Entschleunigen und h\u00f6rt doch einmal rein \u2013 Schmunzeln ausdr\u00fccklich erlaubt. \ud83d\ude0a<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ein bisschen Magie, ein bisschen KI \u2026 \u2728 Weihnachten ist f\u00fcr uns jedes Jahr das sch\u00f6nste Beispiel daf\u00fcr, wie ein gro\u00dfes Event \u2013 mit der richtigen 360-Grad-Inszenierung &#8211; Wirkung entfaltet, Emotionen entfacht, Geschichten zum Leuchten bringt und Menschen in besonderen Momenten miteinander verbindet.<\/p>\n","protected":false},"author":1,"featured_media":5456,"comment_status":"closed","ping_status":"open","sticky":false,"template":"blank","format":"standard","meta":{"footnotes":""},"categories":[270],"tags":[],"class_list":["post-5443","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-agentur-news"],"_links":{"self":[{"href":"https:\/\/whatwhenwhy.de\/magazin\/wp-json\/wp\/v2\/posts\/5443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/whatwhenwhy.de\/magazin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/whatwhenwhy.de\/magazin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/whatwhenwhy.de\/magazin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/whatwhenwhy.de\/magazin\/wp-json\/wp\/v2\/comments?post=5443"}],"version-history":[{"count":10,"href":"https:\/\/whatwhenwhy.de\/magazin\/wp-json\/wp\/v2\/posts\/5443\/revisions"}],"predecessor-version":[{"id":5462,"href":"https:\/\/whatwhenwhy.de\/magazin\/wp-json\/wp\/v2\/posts\/5443\/revisions\/5462"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/whatwhenwhy.de\/magazin\/wp-json\/wp\/v2\/media\/5456"}],"wp:attachment":[{"href":"https:\/\/whatwhenwhy.de\/magazin\/wp-json\/wp\/v2\/media?parent=5443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/whatwhenwhy.de\/magazin\/wp-json\/wp\/v2\/categories?post=5443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/whatwhenwhy.de\/magazin\/wp-json\/wp\/v2\/tags?post=5443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}