{"id":132,"date":"2016-02-28T11:42:30","date_gmt":"2016-02-28T19:42:30","guid":{"rendered":"http:\/\/deftek.net\/?p=132"},"modified":"2025-11-27T12:41:42","modified_gmt":"2025-11-27T20:41:42","slug":"ghstly","status":"publish","type":"post","link":"https:\/\/deftek.net\/?p=132","title":{"rendered":"GHSTLY"},"content":{"rendered":"\n<p><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" class=\"alignnone size-medium wp-image-133\" src=\"http:\/\/deftek.net\/wp-content\/uploads\/2016\/02\/GHSTLY-300x300.jpg\" alt=\"GHSTLY\" srcset=\"https:\/\/deftek.net\/wp-content\/uploads\/2016\/02\/GHSTLY-300x300.jpg 300w, https:\/\/deftek.net\/wp-content\/uploads\/2016\/02\/GHSTLY-150x150.jpg 150w, https:\/\/deftek.net\/wp-content\/uploads\/2016\/02\/GHSTLY-768x768.jpg 768w, https:\/\/deftek.net\/wp-content\/uploads\/2016\/02\/GHSTLY.jpg 800w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><br><span style=\"font-family: Calibri;\">Format: 320kbps mp3<br>Original Release:\u00a02015<\/span><\/p>\n\n\n        <div id=\"mp3-player-69e1c150296fc\" class=\"mp3-directory-player\">\n            <div class=\"player-container\">\n                <canvas id=\"mp3-player-69e1c150296fc-canvas\" class=\"visualizer\"><\/canvas>\n                <div class=\"player-controls\">\n                    <div class=\"current-track\">No track selected<\/div>\n                    <div class=\"control-buttons\">\n                        <button class=\"btn-prev\" title=\"Previous\">\u23ee<\/button>\n                        <button class=\"btn-play\" title=\"Play\">\u25b6<\/button>\n                        <button class=\"btn-next\" title=\"Next\">\u23ed<\/button>\n                    <\/div>\n                    <div class=\"progress-container\">\n                        <div class=\"time-display\">\n                            <span class=\"current-time\">0:00<\/span>\n                            <span class=\"duration\">0:00<\/span>\n                        <\/div>\n                        <input type=\"range\" class=\"progress-bar\" min=\"0\" max=\"100\" value=\"0\">\n                    <\/div>\n                    <div class=\"volume-container\">\n                        <span class=\"volume-icon\">\ud83d\udd0a<\/span>\n                        <input type=\"range\" class=\"volume-bar\" min=\"0\" max=\"100\" value=\"70\">\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"playlist\">\n                <ul class=\"track-list\">\n                                            <li class=\"track-item\" data-index=\"0\" data-url=\"https:\/\/deftek.net\/tendo\/mp3\/DJ%20Tendo%20-%20GHSTLY\/dj_tendo-GHSTLY-remastered.mp3\">\n                            <span class=\"track-number\">1<\/span>\n                            <span class=\"track-name\">Dj Tendo GHSTLY Remastered<\/span>\n                            <span class=\"track-duration\">--:--<\/span>\n                            <a href=\"https:\/\/deftek.net\/tendo\/mp3\/DJ%20Tendo%20-%20GHSTLY\/dj_tendo-GHSTLY-remastered.mp3\" download class=\"track-download\" title=\"Download\">\u2b07<\/a>\n                        <\/li>\n                                    <\/ul>\n            <\/div>\n        <\/div>\n        \n        <style>\n            .mp3-directory-player {\n                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n                max-width: 800px;\n                margin: 20px auto;\n                background: #2c3e50;\n                border-radius: 12px;\n                padding: 20px;\n                box-shadow: 0 10px 40px rgba(0,0,0,0.3);\n            }\n            \n            .player-container {\n                background: #34495e;\n                border-radius: 8px;\n                padding: 20px;\n                margin-bottom: 20px;\n            }\n            \n            .visualizer {\n                width: 100%;\n                height: 120px;\n                border-radius: 8px;\n                background: rgba(0,0,0,0.3);\n                margin-bottom: 15px;\n            }\n            \n            .current-track {\n                color: white;\n                font-size: 18px;\n                font-weight: 600;\n                margin-bottom: 15px;\n                text-align: center;\n                text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n            }\n            \n            .control-buttons {\n                display: flex;\n                justify-content: center;\n                gap: 15px;\n                margin-bottom: 15px;\n            }\n            \n            .control-buttons button {\n                background: #3498db;\n                border: none;\n                color: white;\n                font-size: 20px;\n                width: 50px;\n                height: 50px;\n                border-radius: 6px;\n                cursor: pointer;\n                transition: all 0.3s ease;\n                box-shadow: 0 4px 6px rgba(0,0,0,0.3);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                line-height: 1;\n            }\n            \n            .control-buttons button:hover {\n                background: #2980b9;\n                transform: translateY(-2px);\n                box-shadow: 0 6px 8px rgba(0,0,0,0.4);\n            }\n            \n            .control-buttons button:active {\n                transform: translateY(0);\n                box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n            }\n            \n            .btn-play {\n                width: 60px;\n                height: 60px;\n                font-size: 24px;\n                background: #e74c3c;\n            }\n            \n            .btn-play:hover {\n                background: #c0392b;\n            }\n            \n            .progress-container {\n                margin-bottom: 10px;\n            }\n            \n            .time-display {\n                display: flex;\n                justify-content: space-between;\n                color: rgba(255,255,255,0.8);\n                font-size: 12px;\n                margin-bottom: 5px;\n            }\n            \n            .progress-bar, .volume-bar {\n                width: 100%;\n                height: 6px;\n                -webkit-appearance: none;\n                appearance: none;\n                background: rgba(255,255,255,0.2);\n                border-radius: 3px;\n                outline: none;\n            }\n            \n            .progress-bar::-webkit-slider-thumb, .volume-bar::-webkit-slider-thumb {\n                -webkit-appearance: none;\n                appearance: none;\n                width: 16px;\n                height: 16px;\n                background: #3498db;\n                border-radius: 50%;\n                cursor: pointer;\n                box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n            }\n            \n            .volume-container {\n                display: flex;\n                align-items: center;\n                gap: 10px;\n            }\n            \n            .volume-icon {\n                font-size: 20px;\n            }\n            \n            .volume-bar {\n                width: 100px;\n            }\n            \n            .playlist {\n                background: rgba(255,255,255,0.95);\n                border-radius: 8px;\n                padding: 15px;\n            }\n            \n            .track-list {\n                list-style: none;\n                padding: 0;\n                margin: 0;\n                max-height: 300px;\n                overflow-y: auto;\n            }\n            \n            .track-item {\n                display: flex;\n                align-items: center;\n                padding: 10px;\n                margin-bottom: 5px;\n                border-radius: 6px;\n                cursor: pointer;\n                transition: background 0.2s;\n            }\n            \n            .track-item:hover {\n                background: #3498db;\n                color: white;\n            }\n            \n            .track-item.active {\n                background: #2980b9;\n                color: white;\n                font-weight: 600;\n            }\n            \n            .track-item.active .track-number,\n            .track-item.active .track-duration,\n            .track-item:hover .track-number,\n            .track-item:hover .track-duration {\n                color: rgba(255,255,255,0.9);\n            }\n            \n            .track-number {\n                width: 30px;\n                color: #666;\n                font-size: 14px;\n            }\n            \n            .track-name {\n                flex: 1;\n                color: #333;\n            }\n            \n            .track-duration {\n                color: #999;\n                font-size: 14px;\n                margin-right: 10px;\n            }\n            \n            .track-download {\n                color: #3498db;\n                text-decoration: none;\n                font-size: 18px;\n                padding: 5px 10px;\n                border-radius: 4px;\n                transition: all 0.2s;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n            }\n            \n            .track-download:hover {\n                background: #3498db;\n                color: white;\n            }\n            \n            .track-item:hover .track-download {\n                color: white;\n            }\n            \n            .track-item:hover .track-download:hover {\n                background: rgba(255,255,255,0.2);\n            }\n        <\/style>\n        \n        <script>\n        (function() {\n            const player = document.getElementById('mp3-player-69e1c150296fc');\n            const canvas = player.querySelector('.visualizer');\n            const ctx = canvas.getContext('2d');\n            const playBtn = player.querySelector('.btn-play');\n            const prevBtn = player.querySelector('.btn-prev');\n            const nextBtn = player.querySelector('.btn-next');\n            const progressBar = player.querySelector('.progress-bar');\n            const volumeBar = player.querySelector('.volume-bar');\n            const currentTimeEl = player.querySelector('.current-time');\n            const durationEl = player.querySelector('.duration');\n            const currentTrackEl = player.querySelector('.current-track');\n            const trackItems = player.querySelectorAll('.track-item');\n            \n            let audio = new Audio();\n            let currentTrackIndex = -1;\n            let audioContext, analyser, source, dataArray;\n            let isPlaying = false;\n            \n            \/\/ Set canvas size\n            canvas.width = canvas.offsetWidth;\n            canvas.height = canvas.offsetHeight;\n            \n            \/\/ Initialize audio context for visualization\n            function initAudioContext() {\n                if (!audioContext) {\n                    audioContext = new (window.AudioContext || window.webkitAudioContext)();\n                    analyser = audioContext.createAnalyser();\n                    analyser.fftSize = 256;\n                    \n                    source = audioContext.createMediaElementSource(audio);\n                    source.connect(analyser);\n                    analyser.connect(audioContext.destination);\n                    \n                    const bufferLength = analyser.frequencyBinCount;\n                    dataArray = new Uint8Array(bufferLength);\n                }\n            }\n            \n            \/\/ Visualization animation\n            function visualize() {\n                requestAnimationFrame(visualize);\n                \n                if (!analyser) return;\n                \n                analyser.getByteFrequencyData(dataArray);\n                \n                ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';\n                ctx.fillRect(0, 0, canvas.width, canvas.height);\n                \n                const barWidth = (canvas.width \/ dataArray.length) * 2;\n                let x = 0;\n                \n                for (let i = 0; i < dataArray.length; i++) {\n                    const barHeight = (dataArray[i] \/ 255) * canvas.height;\n                    \n                    \/\/ Solid blue bars\n                    ctx.fillStyle = '#3498db';\n                    ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);\n                    \n                    x += barWidth + 1;\n                }\n            }\n            \n            visualize();\n            \n            \/\/ Format time\n            function formatTime(seconds) {\n                const mins = Math.floor(seconds \/ 60);\n                const secs = Math.floor(seconds % 60);\n                return `${mins}:${secs.toString().padStart(2, '0')}`;\n            }\n            \n            \/\/ Load track\n            function loadTrack(index) {\n                if (index < 0 || index >= trackItems.length) return;\n                \n                const track = trackItems[index];\n                const url = track.dataset.url;\n                const name = track.querySelector('.track-name').textContent;\n                \n                audio.src = url;\n                currentTrackIndex = index;\n                currentTrackEl.textContent = name;\n                \n                \/\/ Update active state\n                trackItems.forEach(item => item.classList.remove('active'));\n                track.classList.add('active');\n                \n                \/\/ Load metadata\n                audio.addEventListener('loadedmetadata', function() {\n                    durationEl.textContent = formatTime(audio.duration);\n                    track.querySelector('.track-duration').textContent = formatTime(audio.duration);\n                }, { once: true });\n            }\n            \n            \/\/ Play\/Pause\n            function togglePlay() {\n                if (currentTrackIndex === -1) {\n                    loadTrack(0);\n                }\n                \n                initAudioContext();\n                \n                if (isPlaying) {\n                    audio.pause();\n                    playBtn.textContent = '\u25b6';\n                } else {\n                    audio.play();\n                    playBtn.textContent = '\u23f8';\n                }\n                isPlaying = !isPlaying;\n            }\n            \n            \/\/ Event listeners\n            playBtn.addEventListener('click', togglePlay);\n            \n            prevBtn.addEventListener('click', () => {\n                const newIndex = currentTrackIndex - 1;\n                if (newIndex >= 0) {\n                    loadTrack(newIndex);\n                    if (isPlaying) audio.play();\n                }\n            });\n            \n            nextBtn.addEventListener('click', () => {\n                const newIndex = currentTrackIndex + 1;\n                if (newIndex < trackItems.length) {\n                    loadTrack(newIndex);\n                    if (isPlaying) audio.play();\n                }\n            });\n            \n            audio.addEventListener('timeupdate', () => {\n                if (audio.duration) {\n                    const progress = (audio.currentTime \/ audio.duration) * 100;\n                    progressBar.value = progress;\n                    currentTimeEl.textContent = formatTime(audio.currentTime);\n                }\n            });\n            \n            audio.addEventListener('ended', () => {\n                const nextIndex = currentTrackIndex + 1;\n                if (nextIndex < trackItems.length) {\n                    loadTrack(nextIndex);\n                    audio.play();\n                } else {\n                    isPlaying = false;\n                    playBtn.textContent = '\u25b6';\n                }\n            });\n            \n            progressBar.addEventListener('input', () => {\n                const time = (progressBar.value \/ 100) * audio.duration;\n                audio.currentTime = time;\n            });\n            \n            volumeBar.addEventListener('input', () => {\n                audio.volume = volumeBar.value \/ 100;\n            });\n            \n            \/\/ Set initial volume\n            audio.volume = 0.7;\n            \n            \/\/ Track item clicks\n            trackItems.forEach((item, index) => {\n                item.addEventListener('click', (e) => {\n                    \/\/ Don't play if clicking the download button\n                    if (e.target.classList.contains('track-download')) {\n                        return;\n                    }\n                    loadTrack(index);\n                    if (!isPlaying) togglePlay();\n                });\n            });\n            \n            \/\/ Autoplay first track\n            if (trackItems.length > 0) {\n                loadTrack(0);\n                initAudioContext();\n                audio.play().then(() => {\n                    isPlaying = true;\n                    playBtn.textContent = '\u23f8';\n                }).catch(err => {\n                    \/\/ Autoplay blocked by browser, user will need to click play\n                    console.log('Autoplay prevented:', err);\n                });\n            }\n        })();\n        <\/script>\n        \n\n\n<ol class=\"wp-block-list\">\n<li><span style=\"font-family: Calibri; font-size: 11.0pt; font-weight: normal; font-style: normal;\">Onra &#8211; We Ridin&#8217; (2015)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Young Fathers &#8211; Rain or Shine (2015)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Tame Impala &#8211; Eventually (2015)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Chromatics &#8211; Into the Black (2015)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Big Data &#8211; Dangerous (feat. Joywave) (2015)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Until the Ribbon Breaks &#8211; Pressure (2013)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Groundislava &#8211; Cool Party (2012)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Dr Meaker &#8211; Right Back (feat. Sian Evans)(Break Remix) (2014)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Flume &#8211; Hyperparadise (Flume Remix) (2013)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Com Truise &#8211; Norkuy (2010)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Shlohmo &#8211; Rained the Whole Time (Nicholas Jaar Remix) (2014)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Caribou &#8211; Second Chance (2014)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Nosaj Thing &#8211; Eclipse Blue (feat. Kazu Makino) (2012)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Cashmere Cat &#8211; Mirror Maru (2013)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">Hippie Sabotage &#8211; Your Soul (2014)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">New Order &#8211; Your Silent Face (1983)<\/span><\/li>\n\n\n\n<li><span style=\"font-family: Calibri; font-size: 11.0pt;\">The Kills &#8211; Monkey 23 (2003)<\/span><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Format: 320kbps mp3Original Release:\u00a02015<\/p>\n","protected":false},"author":1,"featured_media":133,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-132","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tendoboxen"],"_links":{"self":[{"href":"https:\/\/deftek.net\/index.php?rest_route=\/wp\/v2\/posts\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/deftek.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/deftek.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/deftek.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deftek.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=132"}],"version-history":[{"count":7,"href":"https:\/\/deftek.net\/index.php?rest_route=\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":291,"href":"https:\/\/deftek.net\/index.php?rest_route=\/wp\/v2\/posts\/132\/revisions\/291"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/deftek.net\/index.php?rest_route=\/wp\/v2\/media\/133"}],"wp:attachment":[{"href":"https:\/\/deftek.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/deftek.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/deftek.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}