{"id":3694,"date":"2024-07-17T00:18:29","date_gmt":"2024-07-17T00:18:29","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=3694"},"modified":"2024-07-17T14:46:36","modified_gmt":"2024-07-17T14:46:36","slug":"mp3-gpt","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/mp3-gpt\/","title":{"rendered":"mp3 GPT"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3694\" class=\"elementor elementor-3694\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53212bf e-flex e-con-boxed e-con e-parent\" data-id=\"53212bf\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0321e5b e-flex e-con-boxed e-con e-parent\" data-id=\"0321e5b\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-28ab9b9 e-con-full e-flex e-con e-child\" data-id=\"28ab9b9\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7ae44a6 e-con-full e-flex e-con e-child\" data-id=\"7ae44a6\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e14c0f5 elementor-widget elementor-widget-html\" data-id=\"e14c0f5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"audio-player\">\n  <div class=\"album-art\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/11\/texas-2021-maj-1.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/saturnnn.jpeg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/06\/hvorfor4.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/09\/Bondoloop-2023.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/09\/when-robots-go-to-war.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/09\/inwear-loop.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/09\/Slimslamslum-cafedisco.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/09\/galaxy-reggae.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/dream084-new23.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023-7.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023-5.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023-4.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023-3.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023-2.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/trippy-reaggae.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/15-Red-Light-for-Go-Original-Mix.mp3\" style=\"display: none;\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry1-scaled.jpg\" alt=\"Album art\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/droemmefanger-med-feat.mp3\" style=\"display: none;\">\n    <div class=\"album-indicator\"><\/div>\n    <div class=\"album-line\"><\/div>\n  <\/div>\n  <audio id=\"audio\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/11\/texas-2021-maj-1.mp3\"><\/audio>\n  <div class=\"progress-bar\">\n    <div class=\"progress\"><\/div>\n  <\/div>\n  <div class=\"time-display\">\n    <span id=\"currentTime\">0:00<\/span> \/ <span id=\"duration\">0:00<\/span>\n  <\/div>\n  <div class=\"controls\">\n    <button id=\"rewind15Btn\" class=\"btn\">-15s<\/button>\n    <button id=\"playPauseBtn\" class=\"btn\">Play\/Pause<\/button>\n    <button id=\"stopBtn\" class=\"btn\">Stop<\/button>\n    <button id=\"forward30Btn\" class=\"btn\">+30s<\/button>\n  <\/div>\n<\/div>\n<div class=\"playlist\">\n  <div class=\"playlist-item active\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/11\/texas-2021-maj-1.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play-hvid1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Texas 2021 Maj<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/06\/hvorfor4.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Hvorfor 4<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/09\/Bondoloop-2023.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Bondoloop 2023<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/09\/when-robots-go-to-war.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">When Robots Go to War<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/09\/inwear-loop.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">InWear Loop<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/09\/Slimslamslum-cafedisco.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Slimslamslum Cafedisco<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/09\/galaxy-reggae.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Galaxy Reggae<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/dream084-new23.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Dream084 New23<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Ole GM Loops 2023<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023-7.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Ole GM Loops 2023-7<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023-5.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Ole GM Loops 2023-5<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023-4.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Ole GM Loops 2023-4<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023-3.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Ole GM Loops 2023-3<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/Ole-GM-loops-2023-2.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Ole GM Loops 2023-2<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/trippy-reaggae.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Trippy Reaggae<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/15-Red-Light-for-Go-Original-Mix.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Red Light for Go (Original Mix)<\/span>\n  <\/div>\n  <div class=\"playlist-item\" data-src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/08\/droemmefanger-med-feat.mp3\">\n    <img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg\" alt=\"Play icon\" class=\"play-icon\">\n    <span class=\"playlist-title\">Dr\u00f8mmefanger med Feat<\/span>\n  <\/div>\n<\/div>\n<style>\n.audio-player {\n  width: 600px;\n  height: 220px;\n  background-color: #f0f0f0;\n  border-radius: 0px;\n  padding: 20px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n.album-art {\n  width: 100%;\n  height: 100px;\n  margin-bottom: 10px;\n  border-radius: 5px;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n}\n.album-art img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.album-indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 2px;\n  background-color: rgba(255, 255, 255, 0.5);\n  transition: width 0.1s linear;\n}\n.album-line {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 1px;\n  background-color: black;\n  transition: left 0.1s linear;\n}\n.progress-bar {\n  width: 100%;\n  height: 10px;\n  background-color: #ddd;\n  border-radius: 5px;\n  overflow: hidden;\n  margin-bottom: 5px;\n  cursor: pointer;\n}\n.progress {\n  width: 0;\n  height: 100%;\n  background-color: #4CAF50;\n  transition: width 0.1s linear;\n}\n.time-display {\n  font-size: 13px;\n  margin-bottom: 10px;\n  text-align: left;\n}\n.controls {\n  display: flex;\n  justify-content: center;\n  gap: 10px;\n}\n.btn {\n  padding: 10px 15px;\n  font-size: 14px;\n  cursor: pointer;\n  border: none;\n  border-radius: 5px;\n  background-color: #4CAF50;\n  color: white;\n  transition: background-color 0.3s;\n}\n.btn:hover {\n  background-color: #45a049;\n}\n.playlist {\n  margin-top: 3px;\n  width: 600px;\n}\n.playlist-item {\n  padding: 10px;\n  background-color: #ffffff;\n  margin-bottom: 3px;\n  cursor: pointer;\n  transition: background-color 0.3s;\n  display: flex;\n  align-items: center;\n}\n.playlist-item:hover {\n  background-color: #e0e0e0;\n}\n.playlist-item.active {\n  background-color: #666666;\n  font-weight: bold;\n  color: #dfdfdf;\n}\n.play-icon {\n  width: 12px;\n  height: 12px;\n  margin-right: 10px;\n}\n.playlist-title {\n  flex-grow: 1;\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const audio = document.getElementById('audio');\n  const playPauseBtn = document.getElementById('playPauseBtn');\n  const stopBtn = document.getElementById('stopBtn');\n  const rewind15Btn = document.getElementById('rewind15Btn');\n  const forward30Btn = document.getElementById('forward30Btn');\n  const progressBar = document.querySelector('.progress-bar');\n  const progress = document.querySelector('.progress');\n  const albumArt = document.querySelector('.album-art');\n  const albumIndicator = document.querySelector('.album-indicator');\n  const albumLine = document.querySelector('.album-line');\n  const playlistItems = document.querySelectorAll('.playlist-item');\n  const currentTimeDisplay = document.getElementById('currentTime');\n  const durationDisplay = document.getElementById('duration');\n  const albumArtImages = document.querySelectorAll('.album-art img');\n\n  playPauseBtn.addEventListener('click', togglePlayPause);\n  stopBtn.addEventListener('click', stopAudio);\n  rewind15Btn.addEventListener('click', rewind15);\n  forward30Btn.addEventListener('click', forward30);\n  audio.addEventListener('timeupdate', updateProgress);\n  audio.addEventListener('loadedmetadata', setDuration);\n  progressBar.addEventListener('click', seek);\n  albumArt.addEventListener('click', seek);\n\n  playlistItems.forEach(item => {\n    item.addEventListener('click', () => {\n      const src = item.getAttribute('data-src');\n      audio.src = src;\n      playlistItems.forEach(i => {\n        i.classList.remove('active');\n        i.querySelector('.play-icon').src = 'http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play1.svg';\n      });\n      item.classList.add('active');\n      item.querySelector('.play-icon').src = 'http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/playlist-play-hvid1.svg';\n      updateAlbumArt(src);\n      audio.play();\n      playPauseBtn.textContent = 'Pause';\n    });\n  });\n\n  function updateAlbumArt(src) {\n    albumArtImages.forEach(img => {\n      if (img.getAttribute('data-src') === src) {\n        img.style.display = 'block';\n      } else {\n        img.style.display = 'none';\n      }\n    });\n  }\n\n  function togglePlayPause() {\n    if (audio.paused) {\n      audio.play();\n      playPauseBtn.textContent = 'Pause';\n    } else {\n      audio.pause();\n      playPauseBtn.textContent = 'Play';\n    }\n  }\n\n  function stopAudio() {\n    audio.pause();\n    audio.currentTime = 0;\n    playPauseBtn.textContent = 'Play';\n    progress.style.width = '0%';\n    albumIndicator.style.width = '0%';\n    albumLine.style.left = '0%';\n    updateTimeDisplay();\n  }\n\n  function rewind15() {\n    audio.currentTime = Math.max(audio.currentTime - 15, 0);\n  }\n\n  function forward30() {\n    audio.currentTime = Math.min(audio.currentTime + 30, audio.duration);\n  }\n\n  function updateProgress() {\n    const progressPercentage = (audio.currentTime \/ audio.duration) * 100;\n    progress.style.width = `${progressPercentage}%`;\n    albumIndicator.style.width = `${progressPercentage}%`;\n    albumLine.style.left = `${progressPercentage}%`;\n    updateTimeDisplay();\n  }\n\n  function setDuration() {\n    durationDisplay.textContent = formatTime(audio.duration);\n  }\n\n  function updateTimeDisplay() {\n    currentTimeDisplay.textContent = formatTime(audio.currentTime);\n  }\n\n  function formatTime(time) {\n    const minutes = Math.floor(time \/ 60);\n    const seconds = Math.floor(time % 60);\n    return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n  }\n\n  function seek(event) {\n    const rect = this.getBoundingClientRect();\n    const clickPosition = (event.clientX - rect.left) \/ rect.width;\n    audio.currentTime = clickPosition * audio.duration;\n  }\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-94bc22c e-con-full e-flex e-con e-child\" data-id=\"94bc22c\" data-element_type=\"container\">\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-5813d7ff e-flex e-con-boxed e-con e-parent\" data-id=\"5813d7ff\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7b9f4b66 elementor-widget elementor-widget-spacer\" data-id=\"7b9f4b66\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64c1dad7 elementor-widget elementor-widget-heading\" data-id=\"64c1dad7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">A + B    Console v.01<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d8d72df elementor-widget elementor-widget-spacer\" data-id=\"5d8d72df\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-764e4c4e elementor-widget elementor-widget-html\" data-id=\"764e4c4e\" data-element_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>\n<html lang=\"da\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Audio Player med Tidsm\u00e5ler<\/title>\n<style>\n  .custom-container {\n    width: 600px; \/* Bredde p\u00e5 containeren *\/\n    background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/first-backdrop1.jpg'); \/* Baggrundsbillede *\/\n    background-size: cover; \/* D\u00e6kker hele containeren med baggrundsgrafikken *\/\n    padding: 20px; \/* Afstand inden i kassen *\/\n    text-align: center; \/* Centrer indholdet i kassen *\/\n    margin: 0 auto; \/* Centrerer kassen vandret *\/\n    margin-top: 20px; \/* Afstand til toppen *\/\n    margin-bottom: 20px; \/* Afstand til bunden *\/\n  }\n\n  .custom-container .player-container {\n    width: 100%;\n    max-width: 800px;\n    margin: 0 auto 20px; \/* Centreret med afstand nedenunder *\/\n    text-align: center;\n  }\n\n  .custom-container #timeContainer {\n    margin-bottom: 40px;\n    text-align: center;\n    background-color: black;\n    padding: 5px;\n    display: inline-block;\n    position: relative;\n  }\n\n  .custom-container #timeDisplay {\n    font-size: 18px;\n    color: #ffcc99;\n    font-family: 'Bungee Hairline', sans-serif; \/* Skift til Bungee Hairline skrifttype *\/\n    text-align: right; \/* H\u00f8jrestil teksten *\/\n  }\n\n  .custom-container #progressContainer {\n    width: 278px; \/* Bredden er \u00e6ndret til 260 pixels *\/\n    height: 100px;\n    background-image: url('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/wave2.jpg');\n    background-size: cover; \/* D\u00e6kker hele containeren *\/\n    position: relative;\n    margin: -30px auto 0px; \/* Rykker containeren 30px op og centrer den vandret *\/\n  }\n\n  .custom-container #progressBar {\n    width: 2px;\n    height: 100%;\n    background-color: black;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  .custom-container .controls {\n    display: flex;\n    justify-content: center;\n    align-items: flex-end;\n    height: 80px; \/* Fast h\u00f8jde for at justere bunden *\/\n  }\n\n  .custom-container .controls button {\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0 5px;\n    cursor: pointer;\n  }\n\n  .custom-container .controls button img {\n    height: 50px; \/* Ens h\u00f8jde for alle knapper *\/\n    width: auto;\n  }\n\n  .custom-container .controls .img-button {\n    background-color: transparent;\n    padding: 0;\n    margin: 0 5px;\n    border: none;\n    display: flex;\n    align-items: flex-end; \/* Juster billedet til bunden *\/\n  }\n<\/style>\n<\/head>\n<body>\n<div class=\"custom-container\">\n  <div class=\"player-container\">\n    <div id=\"timeContainer\">\n      <div id=\"timeDisplay\">0:00.000<\/div>\n    <\/div>\n    <div id=\"progressContainer\">\n      <div id=\"progressBar\"><\/div>\n    <\/div>\n    <div class=\"controls\">\n      <button id=\"restartButton\" onmousedown=\"restartAudio()\" onmouseup=\"resetRestartButton()\">\n        <img decoding=\"async\" src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/replay-off.jpg\" alt=\"Replay\" id=\"restartButtonImage\">\n      <\/button>\n      <button id=\"playButton\" onclick=\"togglePlay()\">\n        <img decoding=\"async\" src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/play-off.jpg\" alt=\"Play\" id=\"playButtonImage\">\n      <\/button>\n      <button id=\"buttonA\" class=\"img-button\" onclick=\"playAudio('audioA')\">\n        <img decoding=\"async\" src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/a-off.jpg\" alt=\"A\" id=\"buttonAImage\">\n      <\/button>\n      <button id=\"buttonB\" class=\"img-button\" onclick=\"playAudio('audioB')\">\n        <img decoding=\"async\" src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/b-off.jpg\" alt=\"B\" id=\"buttonBImage\">\n      <\/button>\n    <\/div>\n  <\/div>\n\n  <audio id=\"audioA\">\n    <source src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/de9-test-raa.mp3\" type=\"audio\/mpeg\">\n    Din browser underst\u00f8tter ikke lydafspilleren.\n  <\/audio>\n  <audio id=\"audioB\">\n    <source src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/masterx2-1.mp3\" type=\"audio\/mpeg\">\n    Din browser underst\u00f8tter ikke lydafspilleren.\n  <\/audio>\n\n<\/div>\n\n<script>\n  var audioA = document.getElementById('audioA');\n  var audioB = document.getElementById('audioB');\n  var playButton = document.getElementById('playButton');\n  var playButtonImage = document.getElementById('playButtonImage');\n  var buttonA = document.getElementById('buttonA');\n  var buttonB = document.getElementById('buttonB');\n  var buttonAImage = document.getElementById('buttonAImage');\n  var buttonBImage = document.getElementById('buttonBImage');\n  var restartButtonImage = document.getElementById('restartButtonImage');\n  var progressBar = document.getElementById('progressBar');\n  var timeDisplay = document.getElementById('timeDisplay');\n  var currentAudio = null; \/\/ Holder styr p\u00e5 den aktuelle lydfil\n  var fadeDuration = 50; \/\/ Crossfade varighed i millisekunder (maksimalt 50 ms)\n\n  function togglePlay() {\n    if (currentAudio) {\n      if (currentAudio.paused) {\n        currentAudio.play();\n        playButtonImage.src = 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/play-on.jpg';\n        updateProgress();\n        updateTimeDisplay(); \/\/ Start opdatering af tidsdisplay ved genoptagelse\n      } else {\n        currentAudio.pause();\n        playButtonImage.src = 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/play-off.jpg';\n      }\n    } else {\n      playAudio('audioA');\n    }\n  }\n\n  function playAudio(audioElementId) {\n    var newAudio = document.getElementById(audioElementId);\n\n    \/\/ Gem den aktuelle afspilningsposition for den aktuelle lydfil\n    if (currentAudio) {\n      currentAudio.currentTime = currentAudio.currentTime;\n    }\n\n    \/\/ Hvis der allerede afspilles en lydfil og det ikke er den samme som den nye\n    if (currentAudio && currentAudio !== newAudio) {\n      crossfade(currentAudio, newAudio);\n      currentAudio.pause();\n    } else if (!currentAudio) { \/\/ Hvis der ikke afspilles nogen lyd\n      newAudio.volume = 1.0;\n      newAudio.play();\n    }\n\n    currentAudio = newAudio;\n    playButtonImage.src = 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/play-on.jpg';\n\n    \/\/ Opdater knapbilleder\n    if (audioElementId === 'audioA') {\n      buttonAImage.src = 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/a-on.jpg';\n      buttonBImage.src = 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/b-off.jpg';\n    } else if (audioElementId === 'audioB') {\n      buttonAImage.src = 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/a-off.jpg';\n      buttonBImage.src = 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/b-on.jpg';\n    }\n\n    \/\/ Start opdatering af progress bar og tidsdisplay\n    updateProgress();\n    updateTimeDisplay();\n  }\n\n  function crossfade(outgoing, incoming) {\n    var fadeOutInterval = setInterval(function() {\n      var volume = outgoing.volume - 0.05;\n      if (volume <= 0.05) {\n        clearInterval(fadeOutInterval);\n        outgoing.pause();\n        outgoing.volume = 1.0;\n      } else {\n        outgoing.volume = volume;\n      }\n    }, fadeDuration \/ 10);\n\n    incoming.volume = 0.0;\n    incoming.currentTime = outgoing.currentTime;\n    incoming.play();\n\n    var fadeInInterval = setInterval(function() {\n      var volume = incoming.volume + 0.05;\n      if (volume >= 1.0) {\n        clearInterval(fadeInInterval);\n        incoming.volume = 1.0;\n      } else {\n        incoming.volume = volume;\n      }\n    }, fadeDuration \/ 10);\n  }\n\n  function restartAudio() {\n    if (currentAudio) {\n      currentAudio.currentTime = 0;\n      currentAudio.play();\n      restartButtonImage.src = 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/replay-on.jpg';\n      updateTimeDisplay(); \/\/ Opdater tidsdisplay ved nulstilling\n      updateProgress(); \/\/ Opdater progress bar ved nulstilling\n    } else {\n      playAudio('audioA');\n    }\n    playButtonImage.src = 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/play-on.jpg';\n  }\n\n  function resetRestartButton() {\n    restartButtonImage.src = 'http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/06\/replay-off.jpg';\n  }\n\n  function updateProgress() {\n    if (currentAudio) {\n      var duration = currentAudio.duration;\n      var currentTime = currentAudio.currentTime;\n      var progress = (currentTime \/ duration) * 100;\n      progressBar.style.left = progress + '%';\n\n      if (!currentAudio.paused) {\n        requestAnimationFrame(updateProgress);\n      }\n    }\n  }\n\n  function updateTimeDisplay() {\n    if (currentAudio) {\n      var currentTime = formatTime(currentAudio.currentTime);\n      timeDisplay.textContent = currentTime;\n\n      if (!currentAudio.paused) {\n        setTimeout(updateTimeDisplay, 100); \/\/ Opdater hvert 100 ms for at undg\u00e5 overdreven opdatering\n      }\n    }\n  }\n\n  function formatTime(seconds) {\n    var minutes = Math.floor(seconds \/ 60);\n    var secs = Math.floor(seconds % 60);\n    var milliseconds = Math.floor((seconds % 1) * 1000);\n    return minutes + ':' + secs.toString().padStart(2, '0') + '.' + milliseconds.toString().padStart(3, '0');\n  }\n\n  function resetProgress() {\n    progressBar.style.left = '0%';\n  }\n\n  \/\/ Event listener for spacebar to toggle play\/pause\n  document.body.addEventListener('keydown', function(event) {\n    if (event.code === 'Space') {\n      event.preventDefault(); \/\/ Forhindre standard scrolling ved mellemrumstasten\n      togglePlay();\n    }\n  });\n\n  \/\/ Initialisering af tidsdisplayet til 0 ved start\n  updateTimeDisplay();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47b6fc60 elementor-widget elementor-widget-spacer\" data-id=\"47b6fc60\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>0:00 \/ 0:00 -15s Play\/Pause Stop +30s Texas 2021 Maj Hvorfor 4 Bondoloop 2023 When Robots Go to War InWear Loop Slimslamslum Cafedisco Galaxy Reggae Dream084 New23 Ole GM Loops 2023 Ole GM Loops 2023-7 Ole GM Loops 2023-5 Ole GM Loops 2023-4 Ole GM Loops 2023-3 Ole GM Loops 2023-2 Trippy Reaggae Red Light&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-3694","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=3694"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3694\/revisions"}],"predecessor-version":[{"id":3789,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3694\/revisions\/3789"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=3694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}