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-85c8c8d elementor-widget elementor-widget-spacer\" data-id=\"85c8c8d\" 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>A + B Console v.01 Audio Player med Tidsm\u00e5ler 0:00.000 Din browser underst\u00f8tter ikke lydafspilleren. Din browser underst\u00f8tter ikke lydafspilleren.<\/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-1210","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1210","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=1210"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1210\/revisions"}],"predecessor-version":[{"id":1552,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1210\/revisions\/1552"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=1210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}