{"id":468,"date":"2024-08-23T17:55:08","date_gmt":"2024-08-23T16:55:08","guid":{"rendered":"https:\/\/www.ceylu.com\/?page_id=468"},"modified":"2024-09-17T15:03:20","modified_gmt":"2024-09-17T14:03:20","slug":"audio","status":"publish","type":"page","link":"https:\/\/www.ceylu.com\/index.php\/audio\/","title":{"rendered":"Audios"},"content":{"rendered":"<div id=\"player\" style=\"width: 100%; max-width: 500px; height: 750px; margin: 0 auto; padding: 20px; background-color: #D27D29; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; box-sizing: border-box;\">\n    <img decoding=\"async\" src=\"https:\/\/www.ceylu.com\/wp-content\/uploads\/2024\/09\/Ceylon-Radio.jpg\" alt=\"Album Cover\" style=\"width:100%; max-width:300px; height: auto; margin-bottom: 20px;\">\n    <audio id=\"audio-player\" controls preload=\"metadata\" style=\"width:100%; margin-bottom: 20px;\">\n        <source src=\"\" type=\"audio\/mpeg\">\n        Your browser does not support the audio element.\n    <\/audio>\n    <button id=\"play-btn\" style=\"font-size:16px; padding:10px 20px; margin:10px 5px; border:none; background-color:#333; color:white; cursor:pointer; border-radius:5px;\">Play<\/button>\n    <button id=\"pause-btn\" style=\"font-size:16px; padding:10px 20px; margin:10px 5px; border:none; background-color:#333; color:white; cursor:pointer; border-radius:5px;\">Pause<\/button>\n    <button id=\"next-btn\" style=\"font-size:16px; padding:10px 20px; margin:10px 5px; border:none; background-color:#333; color:white; cursor:pointer; border-radius:5px;\">Next<\/button>\n    <ul id=\"song-list\" style=\"list-style:none; padding:0; margin-top:20px; height:200px; overflow-y:auto; border:1px solid #ddd; background-color:#f9f9f9; color: black;\">\n    <\/ul>\n<\/div>\n\n<style>\n    \/* Styling for song list *\/\n    #song-list li {\n        padding: 10px;\n        border-bottom: 1px solid #ddd;\n        cursor: pointer;\n        background-color: #f9f9f9;\n        color: black; \/* Change font color to black *\/\n        transition: background-color 0.3s;\n    }\n\n    #song-list li:hover {\n        background-color: #eee;\n    }\n\n    \/* Media Query for Tablets (Portrait and Landscape) *\/\n    @media (max-width: 768px) {\n        #player {\n            max-width: 400px;\n            height: 650px;\n        }\n    }\n\n    \/* Media Query for Mobile Phones *\/\n    @media (max-width: 480px) {\n        #player {\n            max-width: 300px;\n            height: 550px;\n        }\n    }\n\n    \/* Optional: Adjust Button Text Size on Smaller Screens *\/\n    @media (max-width: 480px) {\n        button {\n            font-size: 14px;\n            padding: 8px 16px;\n        }\n    }\n<\/style>\n\n<script>\n    const playlist = [\n        { title: \"\u0db8\u0dd0\u0dab\u0dd2\u0d9a\u0dda \u0db8\u0d9c\u0dda \u0dc4\u0dd2\u0dad\u0dda\", file: \"https:\/\/www.ceylu.com\/wp-content\/uploads\/2024\/08\/Manike-mage-hithe-TR.mp3\" },\n        { title: \"\u0dbb\u0dda\u0da9\u0dd2\u0dba\u0ddd \u0d91\u0d9a\u0da7 \u0d9a\u0dd9\u0dbd\u0dc0\u0dd9\u0dbd\u0dcf\u0daf?\", file: \"https:\/\/www.ceylu.com\/wp-content\/uploads\/2024\/08\/Kelawelada-TR.mp3\" },\n        { title: \"\u0d85\u0db9\", file: \"https:\/\/www.ceylu.com\/wp-content\/uploads\/2024\/08\/Amba-TR.mp3\" },\n        { title: \"\u0d85\u0dbd\u0dd2 \u0d9a\u0dbd\u0db6\u0dbd\", file: \"https:\/\/www.ceylu.com\/wp-content\/uploads\/2024\/08\/Ali-Kalabalae-Teaser-MIX-03.mp3\" },\n        { title: \"\u0d9a\u0ddc\u0dad\u0dca\u0dad\u0dd4\", file: \"https:\/\/www.ceylu.com\/wp-content\/uploads\/2024\/08\/Kottu-TR.mp3\" },\n        { title: \"\u0dc4\u0dda\u0db1\", file: \"https:\/\/www.ceylu.com\/wp-content\/uploads\/2024\/08\/Hena-Final-MIX-01.mp3\" },\n        { title: \"Broken Promises\", file: \"https:\/\/www.ceylu.com\/wp-content\/uploads\/2024\/09\/Broken-Promises.mp3\" }\n    ];\n\n    let currentTrackIndex = 0;\n\n    const audioPlayer = document.getElementById('audio-player');\n    const playBtn = document.getElementById('play-btn');\n    const pauseBtn = document.getElementById('pause-btn');\n    const nextBtn = document.getElementById('next-btn');\n    const songList = document.getElementById('song-list');\n\n    \/\/ Play the next track in the playlist\n    function playNextTrack() {\n        currentTrackIndex++;\n        if (currentTrackIndex >= playlist.length) {\n            currentTrackIndex = 0;\n        }\n        audioPlayer.src = playlist[currentTrackIndex].file;\n        audioPlayer.play();\n        updateSongList();\n    }\n\n    \/\/ Update the song list display\n    function updateSongList() {\n        songList.innerHTML = '';\n        playlist.forEach((track, index) => {\n            const listItem = document.createElement('li');\n            listItem.textContent = track.title;\n            listItem.addEventListener('click', () => {\n                currentTrackIndex = index;\n                audioPlayer.src = track.file;\n                audioPlayer.play();\n            });\n            songList.appendChild(listItem);\n        });\n    }\n\n    \/\/ Event listeners for play, pause, and next buttons\n    playBtn.addEventListener('click', () => {\n        audioPlayer.play();\n    });\n\n    pauseBtn.addEventListener('click', () => {\n        audioPlayer.pause();\n    });\n\n    nextBtn.addEventListener('click', () => {\n        playNextTrack();\n    });\n\n    \/\/ Automatically play next track when the current one ends\n    audioPlayer.addEventListener('ended', playNextTrack);\n\n    \/\/ Update the song list when the page loads\n    updateSongList();\n<\/script>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Your browser does not support the audio element. Play Pause Next<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-468","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ceylu.com\/index.php\/wp-json\/wp\/v2\/pages\/468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ceylu.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ceylu.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ceylu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ceylu.com\/index.php\/wp-json\/wp\/v2\/comments?post=468"}],"version-history":[{"count":41,"href":"https:\/\/www.ceylu.com\/index.php\/wp-json\/wp\/v2\/pages\/468\/revisions"}],"predecessor-version":[{"id":1217,"href":"https:\/\/www.ceylu.com\/index.php\/wp-json\/wp\/v2\/pages\/468\/revisions\/1217"}],"wp:attachment":[{"href":"https:\/\/www.ceylu.com\/index.php\/wp-json\/wp\/v2\/media?parent=468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}