{"id":3637,"date":"2024-07-16T15:17:45","date_gmt":"2024-07-16T15:17:45","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=3637"},"modified":"2024-07-19T12:51:57","modified_gmt":"2024-07-19T12:51:57","slug":"mp3","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/mp3\/","title":{"rendered":"mp3"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3637\" class=\"elementor elementor-3637\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8a80b5 e-flex e-con-boxed e-con e-parent\" data-id=\"c8a80b5\" data-element_type=\"container\">\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-c8d0546 e-flex e-con-boxed e-con e-parent\" data-id=\"c8d0546\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97ce6d8 elementor-widget elementor-widget-html\" data-id=\"97ce6d8\" 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<style>\n#mp3-player {\n    text-align: center;\n    max-width: 600px;\n    margin: 0 auto;\n    font-family: Arial, sans-serif;\n}\n\n#title-bar {\n    font-size: 18px;\n    margin-bottom: 10px;\n}\n\n#album-art {\n    position: relative;\n    width: 100%;\n    max-width: 595px;\n    margin: 0 auto 10px;\n}\n\n#album-art img {\n    width: 100%;\n    height: auto;\n    max-height: 100px;\n}\n\n#art-progress-container {\n    position: absolute;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 128, 0, 0);\n}\n\n#art-progress-bar {\n    height: 100%;\n    width: 0;\n    background: rgba(0, 128, 0, 0.5);\n    position: relative;\n}\n\n#progress-indicator {\n    position: relative;\n    height: 100%;\n    width: 2px;\n    background: white;\n    right: 0;\n    top: 0;\n}\n\n#progress-container {\n    display: none;\n}\n\n#progress-container span {\n    display: inline-block;\n    margin-top: 5px;\n    font-size: 12px;\n}\n\n#controls {\n    display: flex;\n    justify-content: center;\n    margin: 10px 0;\n}\n\n#controls button {\n    margin: 0 5px;\n    padding: 0;\n    border: none;\n    background: none;\n}\n\n#controls button img {\n    width: 50px;\n    height: 50px;\n}\n\n#playlist {\n    margin-top: 20px;\n    width: 100%;\n}\n\n#playlist ul {\n    list-style-type: none;\n    padding: 0;\n    width: 100%;\n}\n\n#playlist li {\n    cursor: pointer;\n    padding: 10px;\n    border-bottom: 1px solid #e0e0e0;\n    text-align: left;\n}\n\n#playlist li:hover {\n    background: #f0f0f0;\n}\n<\/style>\n\n<div id=\"mp3-player\">\n    <div id=\"title-bar\">Nu spiller: Titel p\u00e5 sang<\/div>\n    <div id=\"album-art\">\n        <img decoding=\"async\" id=\"album-art-img\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/waveform-texastry3-scaled.jpg\" alt=\"Album Art\">\n        <div id=\"art-progress-container\">\n            <div id=\"art-progress-bar\">\n                <div id=\"progress-indicator\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    <audio id=\"audio-player\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2023\/09\/Bondoloop-2023.mp3\"><\/audio>\n    <div id=\"progress-container\">\n        <div id=\"progress-bar\"><\/div>\n        <span id=\"current-time\">0:00<\/span> \/ <span id=\"total-time\">0:00<\/span>\n    <\/div>\n    <div id=\"controls\">\n        <button id=\"play-pause\"><img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/xzplay.png\" alt=\"Play\"><\/button>\n        <button id=\"reset\"><img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/xzstopback.png\" alt=\"Reset\"><\/button>\n        <button id=\"forward\"><img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/xzfrem10.png\" alt=\"+10s\"><\/button>\n        <button id=\"backward\"><img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/xzback5.png\" alt=\"-5s\"><\/button>\n        <button id=\"autoplay\"><img decoding=\"async\" src=\"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/xzautoplay-off.png\" alt=\"Autoplay Off\"><\/button>\n    <\/div>\n    <div id=\"playlist\">\n        <ul>\n            <li data-src=\"path-to-your-audio1.mp3\" data-art=\"path-to-your-album-art1.jpg\">Sang 1<\/li>\n            <li data-src=\"path-to-your-audio2.mp3\" data-art=\"path-to-your-album-art2.jpg\">Sang 2<\/li>\n            <li data-src=\"path-to-your-audio3.mp3\" data-art=\"path-to-your-album-art3.jpg\">Sang 3<\/li>\n        <\/ul>\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    const audioPlayer = document.getElementById(\"audio-player\");\n    const playPauseBtn = document.getElementById(\"play-pause\");\n    const resetBtn = document.getElementById(\"reset\");\n    const forwardBtn = document.getElementById(\"forward\");\n    const backwardBtn = document.getElementById(\"backward\");\n    const autoplayBtn = document.getElementById(\"autoplay\");\n    const artProgressBar = document.getElementById(\"art-progress-bar\");\n    const progressIndicator = document.getElementById(\"progress-indicator\");\n    const progressContainer = document.getElementById(\"art-progress-container\");\n    const currentTimeElem = document.getElementById(\"current-time\");\n    const totalTimeElem = document.getElementById(\"total-time\");\n    const albumArtImg = document.getElementById(\"album-art-img\");\n    const titleBar = document.getElementById(\"title-bar\");\n    const playlistItems = document.querySelectorAll(\"#playlist li\");\n\n    let isPlaying = false;\n    let isAutoplay = false;\n\n    playPauseBtn.addEventListener(\"click\", function() {\n        if (isPlaying) {\n            audioPlayer.pause();\n            playPauseBtn.querySelector(\"img\").src = \"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/xzplay.png\";\n        } else {\n            audioPlayer.play();\n            playPauseBtn.querySelector(\"img\").src = \"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/xzpause.png\";\n        }\n        isPlaying = !isPlaying;\n    });\n\n    resetBtn.addEventListener(\"click\", function() {\n        audioPlayer.currentTime = 0;\n    });\n\n    forwardBtn.addEventListener(\"click\", function() {\n        audioPlayer.currentTime += 10;\n    });\n\n    backwardBtn.addEventListener(\"click\", function() {\n        audioPlayer.currentTime -= 5;\n    });\n\n    autoplayBtn.addEventListener(\"click\", function() {\n        isAutoplay = !isAutoplay;\n        autoplayBtn.querySelector(\"img\").src = isAutoplay ? \"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/xzautoplay-on.png\" : \"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/xzautoplay-off.png\";\n    });\n\n    audioPlayer.addEventListener(\"timeupdate\", function() {\n        const currentTime = audioPlayer.currentTime;\n        const duration = audioPlayer.duration;\n        const progressPercentage = (currentTime \/ duration) * 100;\n        artProgressBar.style.width = progressPercentage + \"%\";\n        progressIndicator.style.right = (100 - progressPercentage) + \"%\";\n        currentTimeElem.textContent = formatTime(currentTime);\n        totalTimeElem.textContent = formatTime(duration);\n    });\n\n    progressContainer.addEventListener(\"click\", function(e) {\n        const width = this.clientWidth;\n        const clickX = e.offsetX;\n        const duration = audioPlayer.duration;\n        audioPlayer.currentTime = (clickX \/ width) * duration;\n    });\n\n    audioPlayer.addEventListener(\"ended\", function() {\n        if (isAutoplay) {\n            playNextTrack();\n        }\n    });\n\n    playlistItems.forEach(function(item) {\n        item.addEventListener(\"click\", function() {\n            loadTrack(this);\n        });\n    });\n\n    function formatTime(seconds) {\n        const minutes = Math.floor(seconds \/ 60);\n        seconds = Math.floor(seconds % 60);\n        return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;\n    }\n\n    function loadTrack(item) {\n        audioPlayer.src = item.getAttribute(\"data-src\");\n        albumArtImg.src = item.getAttribute(\"data-art\");\n        titleBar.textContent = \"Nu spiller: \" + item.textContent;\n        audioPlayer.play();\n        playPauseBtn.querySelector(\"img\").src = \"http:\/\/anderskisling.dk\/wp-content\/uploads\/2024\/07\/xzpause.png\";\n        isPlaying = true;\n    }\n\n    function playNextTrack() {\n        const currentTrack = document.querySelector(\"#playlist li[data-src='\" + audioPlayer.src + \"']\");\n        const nextTrack = currentTrack.nextElementSibling || playlistItems[0];\n        loadTrack(nextTrack);\n    }\n});\n<\/script>\n\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>Nu spiller: Titel p\u00e5 sang 0:00 \/ 0:00 Sang 1 Sang 2 Sang 3<\/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-3637","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3637","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=3637"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3637\/revisions"}],"predecessor-version":[{"id":3866,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/3637\/revisions\/3866"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=3637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}