{"id":17474,"date":"2026-03-11T12:44:15","date_gmt":"2026-03-11T05:44:15","guid":{"rendered":"https:\/\/sd.rmutt.ac.th\/?page_id=17474"},"modified":"2026-03-12T15:13:20","modified_gmt":"2026-03-12T08:13:20","slug":"ai-podcasts-2","status":"publish","type":"page","link":"https:\/\/sd.rmutt.ac.th\/?page_id=17474","title":{"rendered":"\u0e2a\u0e32\u0e23\u0e30\u0e41\u0e25\u0e30\u0e22\u0e32\u0e17\u0e32\u0e07\u0e43\u0e08"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"17474\" class=\"elementor elementor-17474\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a000817 e-flex e-con-boxed e-con e-parent\" data-id=\"a000817\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;,&quot;_ha_eqh_enable&quot;:false}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68e6bbe elementor-widget elementor-widget-html\" data-id=\"68e6bbe\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"ai-podcast-wrapper\" class=\"bg-gray-50 text-gray-800\" style=\"min-height: 100vh; position: relative; overflow-x: hidden;\">\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n    \r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Sarabun:wght@300;400;700&display=swap');\r\n        #ai-podcast-wrapper { font-family: 'Sarabun', sans-serif; -webkit-tap-highlight-color: transparent; }\r\n        .rmutt-blue { background-color: #1e3a8a !important; }\r\n        #ai-podcast-wrapper h2, #ai-podcast-wrapper h3, #ai-podcast-wrapper h4 { margin: 0; line-height: 1.4; }\r\n        #ai-podcast-wrapper p { margin: 0; }\r\n        \r\n        \/* \ud83d\udd25 \u0e04\u0e25\u0e32\u0e2a\u0e0b\u0e48\u0e2d\u0e19\/\u0e42\u0e0a\u0e27\u0e4c \u0e41\u0e25\u0e30\u0e1b\u0e38\u0e48\u0e21\u0e08\u0e33\u0e25\u0e2d\u0e07 \ud83d\udd25 *\/\r\n        .ai-hide { display: none !important; }\r\n        .ai-show { display: block !important; }\r\n        .ai-flex-show { display: flex !important; } \r\n        .ai-click-btn { cursor: pointer; user-select: none; }\r\n        \r\n        \/* \u0e2a\u0e44\u0e15\u0e25\u0e4c Scrollbar \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Playlist *\/\r\n        .bgm-scroll::-webkit-scrollbar { width: 4px; }\r\n        .bgm-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\r\n    <\/style>\r\n\r\n    <audio id=\"bgm-audio\"><\/audio>\r\n    <div id=\"welcome-screen\" class=\"text-center flex-col items-center justify-center min-h-[60vh] ai-flex-show max-w-4xl mx-auto p-4 mt-4 w-full\">\r\n        <div class=\"w-20 h-20 md:w-24 md:h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6 md:mb-8 shadow-inner animate-bounce\" style=\"animation-duration: 3s;\">\r\n            <i class=\"fas fa-dove text-4xl md:text-5xl text-blue-500\"><\/i>\r\n        <\/div>\r\n        <h2 class=\"text-xl sm:text-2xl md:text-3xl font-bold text-gray-700 leading-relaxed mb-4 px-2\">\r\n            \u0e44\u0e21\u0e48\u0e27\u0e48\u0e32\u0e04\u0e38\u0e13\u0e08\u0e30\u0e40\u0e08\u0e2d\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2d\u0e30\u0e44\u0e23\u0e21\u0e32\u0e43\u0e19\u0e27\u0e31\u0e19\u0e19\u0e35\u0e49...<br>\r\n            <span class=\"text-blue-600\">\u0e02\u0e2d\u0e43\u0e2b\u0e49\u0e42\u0e25\u0e01\u0e19\u0e35\u0e49\u0e43\u0e08\u0e14\u0e35\u0e01\u0e31\u0e1a\u0e04\u0e38\u0e13\u0e19\u0e30 \u2764\ufe0f<\/span>\r\n        <\/h2>\r\n        \r\n        <div onclick=\"startApp()\" class=\"ai-click-btn mt-6 md:mt-10 bg-blue-600 hover:bg-blue-700 text-white font-bold text-sm sm:text-base md:text-lg py-3 md:py-4 px-6 md:px-10 rounded-[2rem] shadow-xl active:scale-95 transition-all flex items-center justify-center mx-auto w-[90%] sm:w-auto max-w-[350px] md:max-w-none text-center\">\r\n            <span class=\"leading-snug\">\u0e15\u0e23\u0e07\u0e19\u0e35\u0e49\u0e22\u0e31\u0e07\u0e21\u0e35\u0e01\u0e33\u0e25\u0e31\u0e07\u0e43\u0e08\u0e43\u0e2b\u0e49\u0e04\u0e38\u0e13\u0e2d\u0e35\u0e01\u0e19\u0e30 \u2764\ufe0f<\/span>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"app-split-layout\" class=\"max-w-6xl mx-auto p-4 md:p-6 mt-4 flex-col md:flex-row gap-8 lg:gap-12 ai-hide\">\r\n        \r\n        <div class=\"w-full md:w-1\/3 lg:w-2\/5 flex flex-col items-center md:items-start pt-4\">\r\n            <img decoding=\"async\" src=\"https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/S__17416205.png\" alt=\"\u0e40\u0e04\u0e25\u0e47\u0e14\u0e25\u0e31\u0e1a\u0e2e\u0e35\u0e25\u0e43\u0e08\" class=\"w-full max-w-sm md:max-w-full rounded-2xl shadow-xl border border-gray-100 transition-transform hover:scale-[1.02] duration-300\">\r\n        <\/div>\r\n\r\n        <main class=\"w-full md:w-2\/3 lg:w-3\/5 pb-24 relative\">\r\n            \r\n            <div id=\"page-role\" class=\"text-center space-y-6 ai-hide\">\r\n                <h2 class=\"text-2xl md:text-3xl font-bold text-gray-700 px-2\">\u0e27\u0e31\u0e19\u0e19\u0e35\u0e49\u0e04\u0e38\u0e13\u0e40\u0e02\u0e49\u0e32\u0e21\u0e32\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d...<\/h2>\r\n                <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6\">\r\n                    <div onclick=\"showTopics('self')\" class=\"ai-click-btn bg-white p-6 md:p-8 rounded-2xl shadow-lg border-2 border-transparent hover:border-blue-300 active:scale-95 transition-all group flex flex-col items-center\">\r\n                        <i class=\"fas fa-heart-pulse text-5xl text-rose-500 mb-4 group-hover:scale-110 transition\"><\/i>\r\n                        <h3 class=\"text-xl font-bold text-gray-800\">\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e01\u0e33\u0e25\u0e31\u0e07\u0e43\u0e08<\/h3>\r\n                        <p class=\"text-sm text-gray-500 mt-2\">\u0e2e\u0e35\u0e25\u0e43\u0e08, \u0e23\u0e30\u0e1a\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e2a\u0e36\u0e01<\/p>\r\n                    <\/div>\r\n                    <div onclick=\"showTopics('knowlage')\" class=\"ai-click-btn bg-white p-6 md:p-8 rounded-2xl shadow-lg border-2 border-transparent hover:border-blue-300 active:scale-95 transition-all group flex flex-col items-center\">\r\n                        <i class=\"fas fa-book text-5xl text-teal-500 mb-4 group-hover:scale-110 transition\"><\/i>\r\n                        <h3 class=\"text-xl font-bold text-gray-800\">\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e17\u0e32\u0e07\u0e43\u0e08<\/h3>\r\n                        <p class=\"text-sm text-gray-500 mt-2\">\u0e27\u0e34\u0e18\u0e35\u0e23\u0e31\u0e1a\u0e21\u0e37\u0e2d, \u0e2a\u0e31\u0e07\u0e40\u0e01\u0e15\u0e2d\u0e32\u0e01\u0e32\u0e23<\/p>\r\n                    <\/div>\r\n                    <div onclick=\"showTopics('talk')\" class=\"ai-click-btn bg-white p-6 md:p-8 rounded-2xl shadow-lg border-2 border-transparent hover:border-blue-300 active:scale-95 transition-all group flex flex-col items-center\">\r\n                        <i class=\"fas fa-comments text-5xl text-orange-500 mb-4 group-hover:scale-110 transition\"><\/i>\r\n                        <h3 class=\"text-xl font-bold text-gray-800\">\u0e17\u0e31\u0e01\u0e29\u0e30\u0e01\u0e32\u0e23\u0e1e\u0e39\u0e14<\/h3>\r\n                        <p class=\"text-sm text-gray-500 mt-2\">\u0e1e\u0e39\u0e14\u0e43\u0e2b\u0e49\u0e19\u0e48\u0e32\u0e1f\u0e31\u0e07\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08<\/p>\r\n                    <\/div>\r\n                    <div onclick=\"showTopics('info')\" class=\"ai-click-btn bg-white p-6 md:p-8 rounded-2xl shadow-lg border-2 border-transparent hover:border-blue-300 active:scale-95 transition-all group flex flex-col items-center\">\r\n                        <i class=\"fas fa-info-circle text-5xl text-blue-500 mb-4 group-hover:scale-110 transition\"><\/i>\r\n                        <h3 class=\"text-xl font-bold text-gray-800\">\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e07\u0e32\u0e19\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23<\/h3>\r\n                        <p class=\"text-sm text-gray-500 mt-2\">\u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48<\/p>\r\n                    <\/div>            \r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div id=\"page-topic\" class=\"ai-hide\">\r\n                <div onclick=\"goBack('page-role')\" class=\"ai-click-btn text-blue-600 font-bold mb-6 flex items-center w-max hover:text-blue-800\">\r\n                    <i class=\"fas fa-arrow-left mr-2\"><\/i> \u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a\r\n                <\/div>\r\n                <h2 id=\"topic-title\" class=\"text-2xl font-bold text-gray-700 mb-6\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e04\u0e38\u0e13\u0e2d\u0e22\u0e32\u0e01\u0e1f\u0e31\u0e07<\/h2>\r\n                <div id=\"topic-list\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\"><\/div>\r\n            <\/div>\r\n\r\n            <div id=\"page-player\" class=\"ai-hide text-center\">\r\n                <div onclick=\"stopAndBack()\" class=\"ai-click-btn text-blue-600 font-bold mb-6 flex items-center w-max hover:text-blue-800\">\r\n                    <i class=\"fas fa-arrow-left mr-2\"><\/i> \u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a\r\n                <\/div>\r\n                \r\n                <div class=\"bg-white p-6 md:p-8 rounded-3xl shadow-2xl max-w-lg mx-auto border-t-8 border-blue-800\">\r\n                    <div class=\"w-24 h-24 md:w-32 md:h-32 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6\">\r\n                        <i id=\"player-icon\" class=\"fas fa-headphones-alt text-4xl md:text-5xl text-blue-800\"><\/i>\r\n                    <\/div>\r\n                    <h2 id=\"player-title\" class=\"text-xl md:text-2xl font-bold text-gray-800 px-2\">\u0e0a\u0e37\u0e48\u0e2d\u0e15\u0e2d\u0e19...<\/h2>\r\n                    <p class=\"text-sm text-gray-500 mt-2 mb-8\" id=\"player-status\">\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e40\u0e25\u0e48\u0e19<\/p>\r\n                    \r\n                    <audio id=\"audio-player\" class=\"ai-hide\"><\/audio>\r\n\r\n                    <div id=\"play-btn\" onclick=\"togglePlay()\" class=\"ai-click-btn bg-blue-600 text-white rounded-full w-16 h-16 md:w-20 md:h-20 flex items-center justify-center mx-auto shadow-lg active:scale-90 transition-transform\">\r\n                        <i id=\"btn-icon\" class=\"fas fa-play text-xl md:text-2xl ml-1\"><\/i>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"w-full bg-gray-200 rounded-full h-2 mt-8 overflow-hidden\">\r\n                        <div id=\"progress-bar\" class=\"bg-blue-600 h-2 w-0 transition-all duration-300\"><\/div>\r\n                    <\/div>\r\n                    <div class=\"text-xs text-gray-400 mt-2 flex justify-between font-mono\">\r\n                        <span id=\"current-time\">0:00<\/span>\r\n                        <span id=\"duration\">0:00<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/main>\r\n    <\/div>\r\n\r\n    <div id=\"bgm-player-container\" class=\"fixed bottom-6 right-6 z-[999] flex flex-col items-end ai-hide opacity-0 transition-opacity duration-1000\">\r\n        \r\n        <div id=\"bgm-playlist-menu\" class=\"ai-hide bg-white w-[260px] rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.15)] border border-gray-100 mb-3 overflow-hidden transition-all\">\r\n            <div class=\"bg-blue-50 px-4 py-2 flex justify-between items-center border-b border-gray-100\">\r\n                <span class=\"text-xs font-bold text-blue-800 uppercase tracking-wider\">\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e1e\u0e25\u0e07 BGM<\/span>\r\n                <i onclick=\"toggleBgmMenu()\" class=\"ai-click-btn fas fa-chevron-down text-gray-400 hover:text-gray-600 text-xs p-1\"><\/i>\r\n            <\/div>\r\n            <div id=\"bgm-playlist-items\" class=\"max-h-[160px] overflow-y-auto bgm-scroll\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"bg-white p-3 rounded-2xl shadow-[0_10px_25px_rgba(0,0,0,0.15)] border border-gray-100 flex items-center gap-3 w-[260px] transition-transform hover:scale-[1.02]\">\r\n            <div class=\"w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center text-blue-600 flex-shrink-0 relative overflow-hidden\">\r\n                <div id=\"bgm-wave\" class=\"absolute inset-0 bg-blue-200 opacity-0 animate-ping rounded-full\"><\/div>\r\n                <i class=\"fas fa-music relative z-10\"><\/i>\r\n            <\/div>\r\n            \r\n            <div onclick=\"toggleBgmMenu()\" class=\"ai-click-btn flex-grow overflow-hidden hover:bg-gray-50 p-1 rounded transition-colors\" title=\"\u0e04\u0e25\u0e34\u0e01\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e1e\u0e25\u0e07\">\r\n                <div class=\"flex items-center gap-1\">\r\n                    <p class=\"text-[9px] text-gray-400 font-bold uppercase tracking-wider mb-0 leading-none\">BGM Music<\/p>\r\n                    <i class=\"fas fa-caret-up text-[9px] text-gray-300\"><\/i>\r\n                <\/div>\r\n                <p id=\"bgm-track-name\" class=\"text-xs font-bold text-gray-700 truncate mb-0 mt-0.5\">Track 1<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"flex items-center gap-2\">\r\n                <div onclick=\"nextBGM()\" class=\"ai-click-btn text-gray-400 hover:text-blue-600 transition-colors p-1\">\r\n                    <i class=\"fas fa-step-forward text-sm\"><\/i>\r\n                <\/div>\r\n                <div onclick=\"toggleBGM()\" class=\"ai-click-btn w-8 h-8 bg-blue-600 hover:bg-blue-700 text-white rounded-full flex items-center justify-center shadow-md active:scale-90 transition-all\">\r\n                    <i id=\"bgm-toggle-icon\" class=\"fas fa-play text-[10px] ml-0.5\"><\/i>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const topics = {\r\n            'self': [\r\n                { title: '\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e04\u0e27\u0e32\u0e21\u0e23\u0e31\u0e01', icon: 'fa-heart', color: 'text-red-500', file: 'https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/\u0e43\u0e2b\u0e49\u0e01\u0e33\u0e25\u0e31\u0e07\u0e43\u0e08-\u0e04\u0e27\u0e32\u0e21\u0e23\u0e31\u0e01.wav' },\r\n                { title: '\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19', icon: 'fa-book', color: 'text-indigo-500', file: 'https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/\u0e43\u0e2b\u0e49\u0e01\u0e33\u0e25\u0e31\u0e07\u0e43\u0e08-\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19.wav' },\r\n                { title: '\u0e23\u0e39\u0e49\u0e2a\u0e36\u0e01\u0e14\u0e34\u0e48\u0e07 \u0e44\u0e21\u0e48\u0e2d\u0e22\u0e32\u0e01\u0e17\u0e33\u0e2d\u0e30\u0e44\u0e23\u0e40\u0e25\u0e22', icon: 'fa-cloud-rain', color: 'text-blue-500', file: 'https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/\u0e43\u0e2b\u0e49\u0e01\u0e33\u0e25\u0e31\u0e07\u0e43\u0e08-\u0e14\u0e34\u0e48\u0e07-\u0e44\u0e21\u0e48\u0e2d\u0e22\u0e32\u0e01\u0e17\u0e33\u0e2d\u0e30\u0e44\u0e23.wav' },\r\n                { title: '\u0e09\u0e31\u0e19\u0e23\u0e39\u0e49\u0e2a\u0e36\u0e01\u0e01\u0e31\u0e07\u0e27\u0e25', icon: 'fa-cloud-rain', color: 'text-blue-500', file:'https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/\u0e43\u0e2b\u0e49\u0e01\u0e33\u0e25\u0e31\u0e07\u0e43\u0e08-\u0e01\u0e31\u0e07\u0e27\u0e25.wav'},\r\n                { title: '\u0e09\u0e31\u0e19\u0e23\u0e39\u0e49\u0e2a\u0e36\u0e01\u0e40\u0e04\u0e23\u0e35\u0e22\u0e14', icon: 'fa-cloud-rain', color: 'text-blue-500', file:'https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/\u0e43\u0e2b\u0e49\u0e01\u0e33\u0e25\u0e31\u0e07\u0e43\u0e08-\u0e01\u0e31\u0e07\u0e27\u0e25.wav'}\r\n            ],\r\n            'knowlage': [\r\n                { title: '\u0e04\u0e27\u0e32\u0e21\u0e27\u0e34\u0e15\u0e01\u0e01\u0e31\u0e07\u0e27\u0e25', icon: 'fa-eye', color: 'text-teal-500', file: 'https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49\u0e27\u0e34\u0e15\u0e01\u0e01\u0e31\u0e07\u0e27\u0e25.wav' },\r\n                { title: '\u0e04\u0e33\u0e1e\u0e39\u0e14\u0e17\u0e35\u0e48 \"\u0e2b\u0e49\u0e32\u0e21\u0e1e\u0e39\u0e14\"', icon: 'fa-comment-slash', color: 'text-orange-500', file: 'dont_say.mp3' },\r\n                { title: '\u0e19\u0e2d\u0e01\u0e43\u0e08', icon: 'fa-heart-crack', color: 'text-red-500', file: 'https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/AiPodcast\u0e04\u0e27\u0e32\u0e21\u0e23\u0e39\u0e49-\u0e19\u0e2d\u0e01\u0e43\u0e08.wav' }\r\n            ],\r\n            'info': [\r\n                { title: '\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e23\u0e31\u0e1a\u0e04\u0e33\u0e1b\u0e23\u0e36\u0e01\u0e29\u0e32', icon: 'fa-clipboard-list', color: 'text-blue-500', file: 'info_steps.mp3' }\r\n            ],\r\n            'talk': [\r\n                { title: '\u0e04\u0e33\u0e1e\u0e39\u0e14\u0e17\u0e35\u0e48 \"\u0e04\u0e27\u0e23\" \u0e1e\u0e39\u0e14', icon: 'fa-comment', color: 'text-green-500', file: 'should_say.mp3' },\r\n                { title: '\u0e04\u0e33\u0e1e\u0e39\u0e14\u0e17\u0e35\u0e48 \"\u0e44\u0e21\u0e48\u0e04\u0e27\u0e23\" \u0e1e\u0e39\u0e14', icon: 'fa-comment-slash', color: 'text-orange-500', file: 'not_say.mp3' }\r\n            ]\r\n        };\r\n\r\n        const bgmPlaylist = [\r\n            { name: \"\u0e23\u0e30\u0e1a\u0e32\u0e22\u0e21\u0e32\", file: \"https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/\u0e23\u0e30\u0e1a\u0e32\u0e22\u0e21\u0e32.mp3\" },\r\n            { name: \"\u0e2e\u0e35\u0e25\u0e43\u0e08\", file: \"https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/\u0e2e\u0e25\u0e43\u0e08-heal-jai-JIXGO-version.mp3\" },\r\n            { name: \"\u0e02\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e18\u0e2d\u0e43\u0e08\u0e14\u0e35\", file: \"https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/\u0e02\u0e2d\u0e43\u0e2b\u0e40\u0e18\u0e2d\u0e43\u0e08\u0e14-FREEHAND-Cover-by-Palm.mp3\" },\r\n            { neme:\"\u0e01\u0e48\u0e2d\u0e19\u0e25\u0e32\",file: \"https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/\u0e01\u0e2d\u0e19\u0e25\u0e32-\u0e27\u0e2a\u0e19\u0e1517-Official-MV.mp3\"},\r\n             {name: \"\u0e1e\u0e48\u0e2d\u0e01\u0e25\u0e31\u0e1a\u0e1a\u0e49\u0e32\u0e19\", file:\"https:\/\/sd.rmutt.ac.th\/wp-content\/uploads\/2026\/03\/\u0e1e\u0e2d\u0e01\u0e25\u0e1a\u0e1a\u0e32\u0e19-\u0e19\u0e2d\u0e07\u0e40\u0e01\u0e22\u0e21\u0e2dOFFICIAL-MV.mp3\" }\r\n        ];\r\n\r\n        \/\/ --- \u0e23\u0e30\u0e1a\u0e1a BGM ---\r\n        let currentBgmIndex = 0;\r\n        let isBgmStarted = false;\r\n\r\n        const bgmAudio = document.getElementById('bgm-audio');\r\n        const bgmToggleIcon = document.getElementById('bgm-toggle-icon');\r\n        const bgmTrackName = document.getElementById('bgm-track-name');\r\n        const bgmWave = document.getElementById('bgm-wave');\r\n        const bgmMenu = document.getElementById('bgm-playlist-menu');\r\n        const bgmContainer = document.getElementById('bgm-player-container');\r\n\r\n        bgmAudio.volume = 0.15;\r\n        bgmAudio.src = bgmPlaylist[currentBgmIndex].file;\r\n        bgmTrackName.innerText = bgmPlaylist[currentBgmIndex].name;\r\n\r\n        \/\/ \ud83d\udd25 \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e1b\u0e25\u0e14\u0e25\u0e47\u0e2d\u0e01\u0e40\u0e02\u0e49\u0e32\u0e41\u0e2d\u0e1b \ud83d\udd25\r\n        function startApp() {\r\n            \/\/ 1. \u0e0b\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32 Welcome \r\n            document.getElementById('welcome-screen').classList.replace('ai-flex-show', 'ai-hide');\r\n            \r\n            \/\/ 2. \u0e42\u0e0a\u0e27\u0e4c\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07 2 \u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c (\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e1d\u0e31\u0e48\u0e07\u0e0b\u0e49\u0e32\u0e22 + \u0e41\u0e2d\u0e1b\u0e1d\u0e31\u0e48\u0e07\u0e02\u0e27\u0e32)\r\n            document.getElementById('app-split-layout').classList.replace('ai-hide', 'ai-flex-show');\r\n            document.getElementById('page-role').classList.replace('ai-hide', 'ai-show');\r\n            \r\n            \/\/ 3. \u0e42\u0e0a\u0e27\u0e4c\u0e01\u0e25\u0e48\u0e2d\u0e07 BGM\r\n            bgmContainer.classList.remove('ai-hide');\r\n            setTimeout(() => { bgmContainer.classList.remove('opacity-0'); }, 100); \r\n\r\n            \/\/ 4. \u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e25\u0e48\u0e19 BGM \r\n            bgmAudio.play().then(() => {\r\n                updateBgmUI(true);\r\n                isBgmStarted = true;\r\n            }).catch(e => console.log(\"\u0e23\u0e2d\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e2a\u0e35\u0e22\u0e07\"));\r\n        }\r\n\r\n        function toggleBgmMenu() {\r\n            if (bgmMenu.classList.contains('ai-hide')) {\r\n                bgmMenu.classList.replace('ai-hide', 'ai-show');\r\n                renderBgmList();\r\n            } else {\r\n                bgmMenu.classList.replace('ai-show', 'ai-hide');\r\n            }\r\n        }\r\n\r\n        function renderBgmList() {\r\n            const list = document.getElementById('bgm-playlist-items');\r\n            list.innerHTML = '';\r\n            bgmPlaylist.forEach((track, index) => {\r\n                const isActive = (index === currentBgmIndex);\r\n                list.innerHTML += `\r\n                    <div onclick=\"selectBGM(${index})\" class=\"ai-click-btn px-4 py-3 border-b border-gray-50 flex items-center justify-between transition-colors ${isActive ? 'bg-blue-50 text-blue-700' : 'hover:bg-gray-50 text-gray-600'}\">\r\n                        <span class=\"text-xs font-bold truncate pr-2\">${track.name}<\/span>\r\n                        ${isActive ? '<i class=\"fas fa-volume-up text-blue-500 text-[10px] animate-pulse\"><\/i>' : '<i class=\"fas fa-play text-gray-300 text-[10px]\"><\/i>'}\r\n                    <\/div>\r\n                `;\r\n            });\r\n        }\r\n\r\n        function selectBGM(index) {\r\n            currentBgmIndex = index;\r\n            bgmAudio.src = bgmPlaylist[currentBgmIndex].file;\r\n            bgmTrackName.innerText = bgmPlaylist[currentBgmIndex].name;\r\n            \r\n            bgmAudio.play().then(() => {\r\n                updateBgmUI(true);\r\n                isBgmStarted = true;\r\n            }).catch(e => {});\r\n            \r\n            toggleBgmMenu();\r\n        }\r\n\r\n        function updateBgmUI(isPlaying) {\r\n            if(isPlaying) {\r\n                bgmToggleIcon.classList.replace('fa-play', 'fa-pause');\r\n                bgmToggleIcon.classList.remove('ml-0.5');\r\n                bgmWave.classList.replace('opacity-0', 'opacity-30');\r\n            } else {\r\n                bgmToggleIcon.classList.replace('fa-pause', 'fa-play');\r\n                bgmToggleIcon.classList.add('ml-0.5');\r\n                bgmWave.classList.replace('opacity-30', 'opacity-0');\r\n            }\r\n        }\r\n\r\n        function toggleBGM() {\r\n            if (bgmAudio.paused) {\r\n                bgmAudio.play().then(() => {\r\n                    updateBgmUI(true);\r\n                    isBgmStarted = true;\r\n                }).catch(err => alert(\"\u0e01\u0e23\u0e38\u0e13\u0e32\u0e43\u0e2a\u0e48\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e2a\u0e35\u0e22\u0e07 BGM \u0e01\u0e48\u0e2d\u0e19\u0e04\u0e23\u0e31\u0e1a\"));\r\n            } else {\r\n                bgmAudio.pause();\r\n                updateBgmUI(false);\r\n            }\r\n        }\r\n\r\n        function nextBGM() {\r\n            currentBgmIndex = (currentBgmIndex + 1) % bgmPlaylist.length;\r\n            bgmAudio.src = bgmPlaylist[currentBgmIndex].file;\r\n            bgmTrackName.innerText = bgmPlaylist[currentBgmIndex].name;\r\n            \r\n            bgmAudio.play().then(() => {\r\n                updateBgmUI(true);\r\n                isBgmStarted = true;\r\n                if(!bgmMenu.classList.contains('ai-hide')) renderBgmList();\r\n            }).catch(e => {});\r\n        }\r\n\r\n        bgmAudio.onended = function() { nextBGM(); };\r\n\r\n        \/\/ --- \u0e23\u0e30\u0e1a\u0e1a Podcast \u0e2b\u0e25\u0e31\u0e01 ---\r\n        const audio = document.getElementById('audio-player');\r\n        const playBtn = document.getElementById('btn-icon');\r\n        const progressBar = document.getElementById('progress-bar');\r\n        const statusText = document.getElementById('player-status');\r\n\r\n        function showTopics(role) {\r\n            document.getElementById('page-role').classList.replace('ai-show', 'ai-hide');\r\n            document.getElementById('page-topic').classList.replace('ai-hide', 'ai-show');\r\n            \r\n            const title = (role === 'self') ? '\u0e2e\u0e35\u0e25\u0e43\u0e08\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07...' : '\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e2b\u0e25\u0e37\u0e2d...';\r\n            document.getElementById('topic-title').innerText = title;\r\n\r\n            const list = document.getElementById('topic-list');\r\n            list.innerHTML = ''; \r\n\r\n            if(topics[role]) {\r\n                topics[role].forEach(topic => {\r\n                    list.innerHTML += `\r\n                        <div onclick=\"showPlayer('${topic.title}', '${topic.file}')\" class=\"ai-click-btn bg-white p-5 rounded-xl shadow border border-gray-100 hover:bg-blue-50 active:scale-95 text-left transition-all w-full flex flex-col items-start\">\r\n                            <i class=\"fas ${topic.icon} text-2xl ${topic.color} mb-2\"><\/i>\r\n                            <h4 class=\"font-bold text-gray-700 text-md leading-tight m-0\">${topic.title}<\/h4>\r\n                        <\/div>\r\n                    `;\r\n                });\r\n            }\r\n        }\r\n\r\n        function showPlayer(title, fileName) {\r\n            document.getElementById('page-topic').classList.replace('ai-show', 'ai-hide');\r\n            document.getElementById('page-player').classList.replace('ai-hide', 'ai-show');\r\n            document.getElementById('player-title').innerText = title;\r\n            \r\n            audio.src = fileName;\r\n            audio.load();\r\n            statusText.innerText = \"\u0e01\u0e14\u0e1b\u0e38\u0e48\u0e21\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e1f\u0e31\u0e07\";\r\n            playBtn.classList.replace('fa-pause', 'fa-play');\r\n            \r\n            bgmMenu.classList.replace('ai-show', 'ai-hide'); \/\/ \u0e1e\u0e31\u0e1a\u0e40\u0e21\u0e19\u0e39 BGM \u0e40\u0e01\u0e47\u0e1a\r\n        }\r\n\r\n        function togglePlay() {\r\n            if (audio.paused) {\r\n                audio.play().then(() => {\r\n                    playBtn.classList.replace('fa-play', 'fa-pause');\r\n                    statusText.innerText = \"\u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e25\u0e48\u0e19...\";\r\n                    document.getElementById('player-icon').classList.add('animate-pulse');\r\n                    bgmAudio.volume = 0.05; \/\/ \u0e2b\u0e23\u0e35\u0e48 BGM\r\n                }).catch(err => alert(\"\u0e44\u0e21\u0e48\u0e1e\u0e1a\u0e44\u0e1f\u0e25\u0e4c\u0e40\u0e2a\u0e35\u0e22\u0e07 \u0e2b\u0e23\u0e37\u0e2d\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e31\u0e1a\"));\r\n            } else {\r\n                audio.pause();\r\n                playBtn.classList.replace('fa-pause', 'fa-play');\r\n                statusText.innerText = \"\u0e2b\u0e22\u0e38\u0e14\u0e0a\u0e31\u0e48\u0e27\u0e04\u0e23\u0e32\u0e27\";\r\n                document.getElementById('player-icon').classList.remove('animate-pulse');\r\n                bgmAudio.volume = 0.15; \/\/ \u0e04\u0e37\u0e19 BGM\r\n            }\r\n        }\r\n\r\n        audio.ontimeupdate = function() {\r\n            if (audio.duration) {\r\n                const progress = (audio.currentTime \/ audio.duration) * 100;\r\n                progressBar.style.width = progress + \"%\";\r\n                document.getElementById('current-time').innerText = formatTime(audio.currentTime);\r\n                document.getElementById('duration').innerText = formatTime(audio.duration);\r\n            }\r\n        };\r\n\r\n        audio.onended = function() {\r\n            playBtn.classList.replace('fa-pause', 'fa-play');\r\n            statusText.innerText = \"\u0e08\u0e1a\u0e15\u0e2d\u0e19\";\r\n            document.getElementById('player-icon').classList.remove('animate-pulse');\r\n            bgmAudio.volume = 0.15;\r\n        };\r\n\r\n        function formatTime(seconds) {\r\n            const min = Math.floor(seconds \/ 60);\r\n            const sec = Math.floor(seconds % 60);\r\n            return min + \":\" + (sec < 10 ? \"0\" + sec : sec);\r\n        }\r\n\r\n        function stopAndBack() {\r\n            audio.pause();\r\n            audio.currentTime = 0;\r\n            bgmAudio.volume = 0.15;\r\n            goBack('page-topic');\r\n        }\r\n\r\n        function goBack(targetId) {\r\n            document.getElementById('page-role').classList.replace('ai-show', 'ai-hide');\r\n            document.getElementById('page-topic').classList.replace('ai-show', 'ai-hide');\r\n            document.getElementById('page-player').classList.replace('ai-show', 'ai-hide');\r\n            \r\n            document.getElementById(targetId).classList.replace('ai-hide', 'ai-show');\r\n        }\r\n    <\/script>\r\n<\/div>\r\n\r\n\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\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e44\u0e21\u0e48\u0e27\u0e48\u0e32\u0e04\u0e38\u0e13\u0e08\u0e30\u0e40\u0e08\u0e2d\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2d\u0e30\u0e44\u0e23\u0e21\u0e32&hellip; <a class=\"continue\" href=\"https:\/\/sd.rmutt.ac.th\/?page_id=17474\">\u0e2d\u0e48\u0e32\u0e19\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21<span> \u0e2a\u0e32\u0e23\u0e30\u0e41\u0e25\u0e30\u0e22\u0e32\u0e17\u0e32\u0e07\u0e43\u0e08<\/span><\/a><\/p>\n","protected":false},"author":6,"featured_media":-1,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"class_list":["post-17474","page","type-page","status-publish","has-post-thumbnail","hentry"],"coauthors":[],"author_meta":{"author_link":"https:\/\/sd.rmutt.ac.th\/?author=6","display_name":"\u0e19\u0e32\u0e07\u0e2a\u0e38\u0e27\u0e23\u0e23\u0e13\u0e35 \u0e1b\u0e23\u0e30\u0e14\u0e34\u0e29\u0e10"},"relative_dates":{"created":"Posted 1 \u0e40\u0e14\u0e37\u0e2d\u0e19 ago","modified":"Updated 1 \u0e40\u0e14\u0e37\u0e2d\u0e19 ago"},"absolute_dates":{"created":"Posted on \u0e21\u0e35\u0e19\u0e32\u0e04\u0e21 11, 2026","modified":"Updated on \u0e21\u0e35\u0e19\u0e32\u0e04\u0e21 12, 2026"},"absolute_dates_time":{"created":"Posted on \u0e21\u0e35\u0e19\u0e32\u0e04\u0e21 11, 2026 12:44 pm","modified":"Updated on \u0e21\u0e35\u0e19\u0e32\u0e04\u0e21 12, 2026 3:13 pm"},"featured_img_caption":"","featured_img":false,"series_order":"","_links":{"self":[{"href":"https:\/\/sd.rmutt.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/17474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sd.rmutt.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sd.rmutt.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sd.rmutt.ac.th\/index.php?rest_route=\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/sd.rmutt.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17474"}],"version-history":[{"count":28,"href":"https:\/\/sd.rmutt.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/17474\/revisions"}],"predecessor-version":[{"id":17634,"href":"https:\/\/sd.rmutt.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/17474\/revisions\/17634"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sd.rmutt.ac.th\/index.php?rest_route=\/"}],"wp:attachment":[{"href":"https:\/\/sd.rmutt.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}