{"id":189,"date":"2025-07-18T16:18:03","date_gmt":"2025-07-18T16:18:03","guid":{"rendered":"https:\/\/swen-mercer.com\/de\/?page_id=189"},"modified":"2025-09-17T13:41:53","modified_gmt":"2025-09-17T13:41:53","slug":"music-2","status":"publish","type":"page","link":"https:\/\/swen-mercer.com\/de\/music-2\/","title":{"rendered":"Musik"},"content":{"rendered":"<style>.kadence-column189_39b63c-32 > .kt-inside-inner-col,.kadence-column189_39b63c-32 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column189_39b63c-32 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column189_39b63c-32 > .kt-inside-inner-col{flex-direction:column;}.kadence-column189_39b63c-32 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column189_39b63c-32 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column189_39b63c-32{position:relative;}@media all and (max-width: 1024px){.kadence-column189_39b63c-32 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column189_39b63c-32 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column189_39b63c-32\"><div class=\"kt-inside-inner-col\"><style>.kb-row-layout-id189_4d3d68-fd > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id189_4d3d68-fd > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id189_4d3d68-fd > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id189_4d3d68-fd > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id189_4d3d68-fd > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id189_4d3d68-fd > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id189_4d3d68-fd alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column189_c29e14-43 > .kt-inside-inner-col,.kadence-column189_c29e14-43 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column189_c29e14-43 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column189_c29e14-43 > .kt-inside-inner-col{flex-direction:column;}.kadence-column189_c29e14-43 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column189_c29e14-43 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column189_c29e14-43{position:relative;}@media all and (max-width: 1024px){.kadence-column189_c29e14-43 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column189_c29e14-43 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column189_c29e14-43\"><div class=\"kt-inside-inner-col\">    <div class=\"song-manager-container\">\n                <!-- Search and Filter Section -->\n            <div class=\"song-filters\">\n                <div class=\"search-box\">\n                    <input type=\"text\" id=\"song-search\" placeholder=\"\ud83d\udd0d Search songs...\" \/>\n                <\/div>\n\n                <div class=\"filter-buttons\">\n                    <select id=\"album-filter\">\n                        <option value=\"\">\ud83d\udcbf All Albums<\/option>\n                    <\/select>  \n                    <select id=\"genre-filter\">\n                        <option value=\"\">\ud83c\udfb5 All Genres<\/option>\n                    <\/select>\n                    <select id=\"year-filter\">\n                        <option value=\"\">\ud83d\udcc5 All Years<\/option>\n                    <\/select>\n                    <select id=\"language-filter\">\n                        <option value=\"\">\ud83d\udde3\ufe0f All Languages<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n                 <!-- Songs Grid -->\n        <div class=\"songs-grid\" id=\"songs-grid\">\n            <!-- Songs will be loaded here via JavaScript -->\n        <\/div>\n        <div id=\"pagination-controls\" class=\"pagination-controls\"><\/div>\n    <\/div>\n    <div id=\"song-modal\" class=\"song-modal\">\n        <div class=\"song-modal-content\">\n            <span class=\"song-modal-close\">&times;<\/span>\n            <div id=\"song-modal-body\">\n                <!-- Song details will be loaded here -->\n            <\/div>\n        <\/div>\n    <\/div>   \n    <script>\n        const SONG_VIEW_MODE = \"1\";\n        const SONG_LIMIT = \"0\"; \/\/ integer, safe\n        document.addEventListener('DOMContentLoaded', function() {\n            loadSongs();\n            setupFilters();\n            setupModal();\n        });\n    \n    let currentPage = 1;\n    let totalPages = 1;\n\n    function loadSongs(filters = {}) {\n        const formData = new FormData();\n        formData.append('action', 'get_songs');\n        formData.append('nonce', '361dbc4862');\n        formData.append('page', currentPage);\n        formData.append('limit', SONG_LIMIT);\n\n        if (filters.search) formData.append('search', filters.search);\n        if (filters.genre) formData.append('genre', filters.genre);\n        if (filters.year) formData.append('year', filters.year);\n        if (filters.language) formData.append('language', filters.language);\n        if (filters.album) formData.append('album', filters.album);\n\n        fetch('https:\/\/swen-mercer.com\/de\/wp-admin\/admin-ajax.php', {\n            method: 'POST',\n            body: formData\n        })\n        .then(response => response.json())\n        .then(data => {\n            if (data.success) {\n                displaySongs(data.data.songs);\n                updateFilterOptions(data.data.filters);\n                totalPages = data.data.pagination?.total_pages || 1;\n                currentPage = data.data.pagination?.current_page || 1;\n                renderPagination();\n            }\n        })\n        .catch(error => console.error('Error:', error));\n    }\n\n    function renderPagination() {\n        const pagination = document.getElementById('pagination-controls');\n        if (totalPages <= 1) {\n            pagination.innerHTML = '';\n            return;\n        }\n\n        let buttons = '';\n        for (let i = 1; i <= totalPages; i++) {\n            buttons += `<button class=\"pagination-btn ${i === currentPage ? 'active' : ''}\" onclick=\"gotoPage(${i})\">${i}<\/button>`;\n        }\n        pagination.innerHTML = buttons;\n    }\n\n    function gotoPage(page) {\n        currentPage = page;\n        loadSongs();\n    }\n\n\n        function displaySongs(songs) {\n                const grid = document.getElementById('songs-grid');\n                if (songs.length === 0) {\n                    grid.innerHTML = '<p>No songs found matching your criteria.<\/p>';\n                    return;\n                }\n\n            if (SONG_VIEW_MODE === 'small') {\n                \/\/ Small compact view: title + player inline\n                grid.innerHTML = songs.map(song => `\n                    <div class=\"song-row\">\n                        <span class=\"song-title-small\">${song.title}<\/span>\n                        ${song.audio_file ? `\n                            <audio controls class=\"song-audio-small\" onclick=\"event.stopPropagation()\">\n                                <source src=\"${song.audio_file}\" type=\"audio\/mpeg\">\n                                Your browser does not support the audio element.\n                            <\/audio>\n                        ` : ''}\n                    <\/div>\n                `).join('');\n            } else {\n                grid.innerHTML = songs.map(song => `\n                    <div class=\"song-card\" onclick=\"openSongModal(${song.id})\">\n                        ${song.cover ? `<img decoding=\"async\" src=\"${song.cover}\" alt=\"${song.title} Cover\" class=\"song-cover\">` : ''}\n                        <div class=\"song-title\">${song.title}<\/div>\n                        <div class=\"song-artist\">${song.artist}<\/div>\n                        <div class=\"song-meta\">\n                            <span>\ud83c\udfb5 ${song.genre}<\/span>\n                            <span>\ud83d\udcc5 ${song.year}<\/span>\n                            <span>\ud83d\udde3\ufe0f ${song.language}<\/span>\n                        <\/div>\n                        ${song.audio_file ? `\n                            <div class=\"song-audio\">\n                                <audio controls onclick=\"event.stopPropagation()\">\n                                    <source src=\"${song.audio_file}\" type=\"audio\/mpeg\">\n                                    Your browser does not support the audio element.\n                                <\/audio>\n                            <\/div>\n                        ` : ''}\n                        <div class=\"song-actions\" onclick=\"event.stopPropagation()\">\n                            <button class=\"btn btn-primary\" onclick=\"openSongModal(${song.id})\">View Details<\/button>\n                            ${song.download_link ? `<a href=\"${song.download_link}\" class=\"btn btn-secondary\">\u2b07\ufe0f Download<\/a>` : ''}\n                        <\/div>\n                    <\/div>\n                `).join('');\n            }\n        }  \n        function updateFilterOptions(filters) {\n            const genreSelect = document.getElementById('genre-filter');\n            const yearSelect = document.getElementById('year-filter');\n            const languageSelect = document.getElementById('language-filter');\n            const albumSelect = document.getElementById('album-filter'); \n            genreSelect.innerHTML = '<option value=\"\">\ud83c\udfb5 All Genres<\/option>';\n            filters.genres.forEach(genre => {\n                if (genre) genreSelect.innerHTML += `<option value=\"${genre}\">${genre}<\/option>`;\n            });\n            yearSelect.innerHTML = '<option value=\"\">\ud83d\udcc5 All Years<\/option>';\n            filters.years.forEach(year => {\n                if (year) yearSelect.innerHTML += `<option value=\"${year}\">${year}<\/option>`;\n            });\n            languageSelect.innerHTML = '<option value=\"\">\ud83d\udde3\ufe0f All Languages<\/option>';\n            filters.languages.forEach(language => {\n                if (language) languageSelect.innerHTML += `<option value=\"${language}\">${language}<\/option>`;\n            });\n            albumSelect.innerHTML = '<option value=\"\">\ud83d\udcbf All Albums<\/option>';\n            filters.albums.forEach(album => {\n                if (album) albumSelect.innerHTML += `<option value=\"${album}\">${album}<\/option>`;\n            });\n        }\n            \n        function setupFilters() {\n            const searchInput = document.getElementById('song-search');\n            const genreSelect = document.getElementById('genre-filter');\n            const yearSelect = document.getElementById('year-filter');\n            const languageSelect = document.getElementById('language-filter');\n            const albumSelect = document.getElementById('album-filter'); \/\/ added album filter\n\n            let timeout;\n\n            function handleFilter() {\n                clearTimeout(timeout);\n                timeout = setTimeout(() => {\n                    const filters = {\n                        search: searchInput.value,\n                        genre: genreSelect.value,\n                        year: yearSelect.value,\n                        language: languageSelect.value,\n                        album: albumSelect.value\n                    };\n                    loadSongs(filters);\n                }, 300);\n            }\n            searchInput.addEventListener('input', handleFilter);\n            genreSelect.addEventListener('change', handleFilter);\n            yearSelect.addEventListener('change', handleFilter);\n            languageSelect.addEventListener('change', handleFilter);\n            albumSelect.addEventListener('change', handleFilter);\n        }\n        function setupModal() {\n            const modal = document.getElementById('song-modal');\n            const closeBtn = document.querySelector('.song-modal-close');\n            closeBtn.onclick = function() {\n                modal.style.display = 'none';\n                const audio = modal.querySelector('audio');\n                if (audio) {\n                    audio.pause();\n                }\n            }\n            window.onclick = function(event) {\n                if (event.target === modal) {\n                    modal.style.display = 'none';\n                    const audio = modal.querySelector('audio');\n                    if (audio) {\n                        audio.pause();\n                    }\n                }\n            }\n            document.addEventListener('keydown', function(event) {\n                if (event.key === 'Escape' && modal.style.display === 'block') {\n                    modal.style.display = 'none';\n                    const audio = modal.querySelector('audio');\n                    if (audio) {\n                        audio.pause();\n                    }\n                }\n            });\n        }\n        \n        function openSongModal(songId) {\n            const formData = new FormData();\n            formData.append('action', 'get_song_details');\n            formData.append('song_id', songId);\n            formData.append('nonce', '361dbc4862');\n            \n            fetch('https:\/\/swen-mercer.com\/de\/wp-admin\/admin-ajax.php', {\n                method: 'POST',\n                body: formData\n            })\n            .then(response => response.json())\n            .then(data => {\n                if (data.success) {\n                    displaySongModal(data.data);\n                }\n            })\n            .catch(error => console.error('Error:', error));\n        }\n        \n        function displaySongModal(song) {\n            const modalBody = document.getElementById('song-modal-body');\n            \n            modalBody.innerHTML = `\n                <div class=\"modal-song-header\">\n                    <h1 class=\"modal-song-title\">${song.title}<\/h1>\n                    <p class=\"modal-song-artist\">by ${song.artist}<\/p>\n                    <div class=\"modal-song-meta\">\n                        <span>\ud83c\udfb5 ${song.genre}<\/span>\n                        <span>\ud83d\udcc5 ${song.year}<\/span>\n                        <span>\ud83d\udde3\ufe0f ${song.language}<\/span>\n                    <\/div>\n                <\/div>\n                \n                ${song.cover ? `\n                    <div class=\"modal-song-cover\">\n                        <img decoding=\"async\" src=\"${song.cover}\" alt=\"${song.title} cover\">\n                    <\/div>\n                ` : ''}\n                \n                ${song.audio_file ? `\n                    <div class=\"modal-song-player\">\n                        <h3>\ud83c\udfa7 Player<\/h3>\n                        <audio controls>\n                            <source src=\"${song.audio_file}\" type=\"audio\/mpeg\">\n                            Your browser does not support the audio element.\n                        <\/audio>\n                    <\/div>\n                ` : ''}\n                \n                ${song.lyrics ? `\n                    <div class=\"modal-song-lyrics\">\n                        <h3>\ud83d\udcdc Lyrics<\/h3>\n                        <div class=\"modal-lyrics-content\">${song.lyrics.replace(\/\\n\/g, '<br>')}<\/div>\n                    <\/div>\n                ` : ''}\n                \n                ${song.description ? `\n                    <div class=\"modal-song-description\">\n                        <h3>\u2139\ufe0f Description<\/h3>\n                        <div class=\"modal-description-content\">${song.description.replace(\/\\n\/g, '<br>')}<\/div>\n                    <\/div>\n                ` : ''}\n                \n                <div class=\"modal-song-actions\">\n                    ${song.download_link ? `<a href=\"${song.download_link}\" class=\"modal-btn modal-btn-download\">\u2b07\ufe0f Download<\/a>` : ''}\n                    ${song.buy_link ? `<a href=\"${song.buy_link}\" class=\"modal-btn modal-btn-buy\">\ud83d\udcb0 Buy<\/a>` : ''}\n                <\/div>\n            `;\n            \n            document.getElementById('song-modal').style.display = 'block';\n            document.querySelector('.song-modal-content').scrollTop = 0;\n        }\n    <\/script>\n    \n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":30,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-189","page","type-page","status-publish","hentry"],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"mike","author_link":"https:\/\/swen-mercer.com\/de\/author\/mike\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/swen-mercer.com\/de\/wp-json\/wp\/v2\/pages\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swen-mercer.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swen-mercer.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swen-mercer.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/swen-mercer.com\/de\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":8,"href":"https:\/\/swen-mercer.com\/de\/wp-json\/wp\/v2\/pages\/189\/revisions"}],"predecessor-version":[{"id":209,"href":"https:\/\/swen-mercer.com\/de\/wp-json\/wp\/v2\/pages\/189\/revisions\/209"}],"wp:attachment":[{"href":"https:\/\/swen-mercer.com\/de\/wp-json\/wp\/v2\/media?parent=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}