Lecteur Elson Am\u00e9lior\u00e9<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/amplitudejs@5.3.2\/dist\/amplitude.min.js\"><\/script>\n <style>\n #elson-player {\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border-radius: 12px;\n background: #f8f8f8;\n text-align: center;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n font-family: sans-serif;\n }\n\n #elson-player img.logo {\n max-height: 60px;\n margin-bottom: 20px;\n }\n\n .song-title {\n font-size: 1.1em;\n font-weight: bold;\n margin-bottom: 10px;\n color: #310046;\n }\n\n .controls {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 15px;\n margin: 20px 0;\n }\n\n .amplitude-btn {\n background-color: #310046;\n color: white;\n border: none;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n font-size: 18px;\n line-height: 50px;\n cursor: pointer;\n }\n\n .amplitude-btn:hover {\n background-color: #4a0072;\n }\n\n .progress-bar {\n height: 8px;\n width: 100%;\n background-color: #ddd;\n border-radius: 4px;\n overflow: hidden;\n }\n\n .progress-fill {\n background-color: #310046;\n width: 0%;\n height: 100%;\n }\n\n .time {\n margin-top: 10px;\n font-size: 0.9em;\n color: #444;\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"elson-player\">\n <a href=\"https:\/\/elson.media\" target=\"_blank\" rel=\"noopener\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/LOGO-ELSON-maj-2025.png\" alt=\"Logo Elson\" class=\"logo\">\n <\/a>\n\n <div class=\"song-title\" data-amplitude-song-info=\"name\"><\/div>\n\n <div class=\"controls\">\n <button class=\"amplitude-btn\" data-amplitude-decrease-by=\"15\">\u00ab 15<\/button>\n <button class=\"amplitude-btn amplitude-play-pause\" data-amplitude-song-index=\"0\">\u25b6<\/button>\n <button class=\"amplitude-btn\" data-amplitude-increase-by=\"15\">15 \u00bb<\/button>\n <\/div>\n\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"elson-progress\"><\/div>\n <\/div>\n\n <div class=\"time\">\n <span class=\"amplitude-current-time\"><\/span> \/ <span class=\"amplitude-duration-time\"><\/span>\n <\/div>\n<\/div>\n\n<script>\n Amplitude.init({\n songs: [\n {\n name: \"Cours 01 \u2013 Introduction au podcast\",\n url: \"https:\/\/sons.elson.media\/wp-content\/uploads\/podcasts\/cours01.mp3\",\n artist: \"Elson MOOC\"\n }\n ],\n bindings: {\n 32: 'play_pause'\n }\n });\n\n Amplitude.setSongPlayedPercentageCallback(function(percent) {\n document.getElementById('elson-progress').style.width = percent + \"%\";\n });\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Lecteur Elson<\/title>\n <script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/amplitudejs@5.3.2\/dist\/amplitude.min.js\"><\/script>\n <style>\n body {\n background: #fff;\n font-family: system-ui, sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n\n .player-container {\n width: 600px;\n background: #fff;\n border: 1px solid #ddd;\n border-radius: 12px;\n padding: 20px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n }\n\n .logo {\n text-align: left;\n margin-bottom: 10px;\n }\n\n .logo img {\n height: 30px;\n }\n\n .track-info {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .cover-art {\n width: 70px;\n height: 70px;\n border-radius: 6px;\n }\n\n .meta {\n flex-grow: 1;\n }\n\n .meta .title {\n font-weight: bold;\n font-size: 1.1em;\n color: #310046;\n }\n\n .meta .artist {\n font-size: 0.9em;\n color: #555;\n }\n\n .controls {\n margin-top: 15px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .buttons {\n display: flex;\n gap: 15px;\n }\n\n .buttons button {\n background-color: #310046;\n border: none;\n color: white;\n padding: 10px;\n border-radius: 50%;\n cursor: pointer;\n }\n\n .progress {\n flex-grow: 1;\n height: 5px;\n background: #eee;\n border-radius: 3px;\n margin: 0 10px;\n position: relative;\n }\n\n .progress-filled {\n height: 100%;\n background-color: #ff5c00;\n width: 0%;\n border-radius: 3px;\n }\n\n .time {\n font-size: 0.8em;\n color: #333;\n min-width: 45px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"player-container\">\n <div class=\"logo\">\n <a href=\"https:\/\/elson.media\" target=\"_blank\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/LOGO-ELSON-maj-2025.png\" alt=\"Logo Elson\">\n <\/a>\n <\/div>\n <div class=\"track-info\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/favicon-elson-2025-2.jpg\" class=\"cover-art\"\/>\n <div class=\"meta\">\n <div class=\"title\" data-amplitude-song-info=\"name\"><\/div>\n <div class=\"artist\" data-amplitude-song-info=\"artist\"><\/div>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <div class=\"time\" id=\"current-time\">00:00<\/div>\n <div class=\"progress\" id=\"progress-container\">\n <div class=\"progress-filled\" id=\"progress-filled\"><\/div>\n <\/div>\n <div class=\"time\" id=\"duration\">00:00<\/div>\n <\/div>\n <div class=\"controls\">\n <div class=\"buttons\">\n <button onclick=\"Amplitude.skipBackward()\">«15<\/button>\n <button onclick=\"Amplitude.playPause()\">\u25b6<\/button>\n <button onclick=\"Amplitude.skipForward()\">15»<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n Amplitude.init({\n songs: [\n {\n name: \"Cours audio : C'est quoi un podcast ?\",\n artist: \"De l'\u00e9coute \u00e0 la cr\u00e9ation de podcast\",\n url: \"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/sonsmooc-cours1.mp3\",\n cover_art_url: \"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/favicon-elson-2025-2.jpg\"\n }\n ]\n });\n\n const progressFilled = document.getElementById('progress-filled');\n const currentTime = document.getElementById('current-time');\n const duration = document.getElementById('duration');\n\n Amplitude.bind('timeupdate', function () {\n let percentage = Amplitude.getSongPlayedPercentage();\n progressFilled.style.width = percentage + '%';\n currentTime.textContent = Amplitude.getFormattedCurrentTime();\n duration.textContent = Amplitude.getFormattedDuration();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Lecteur Elson<\/title>\n <script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/amplitudejs@5.3.2\/dist\/amplitude.min.js\"><\/script>\n <style>\n body {\n background: #fff;\n font-family: system-ui, sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n\n .player-container {\n width: 600px;\n background: #fff;\n border: 1px solid #ddd;\n border-radius: 12px;\n padding: 20px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n }\n\n .logo {\n text-align: left;\n margin-bottom: 10px;\n }\n\n .logo img {\n height: 30px;\n }\n\n .track-info {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .cover-art {\n width: 70px;\n height: 70px;\n border-radius: 6px;\n }\n\n .meta {\n flex-grow: 1;\n }\n\n .meta .title {\n font-weight: bold;\n font-size: 1.1em;\n color: #310046;\n }\n\n .meta .artist {\n font-size: 0.9em;\n color: #555;\n }\n\n .controls {\n margin-top: 15px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .buttons {\n display: flex;\n gap: 15px;\n }\n\n .buttons button {\n background-color: #310046;\n border: none;\n color: white;\n padding: 10px;\n border-radius: 50%;\n cursor: pointer;\n }\n\n .progress {\n flex-grow: 1;\n height: 5px;\n background: #eee;\n border-radius: 3px;\n margin: 0 10px;\n position: relative;\n }\n\n .progress-filled {\n height: 100%;\n background-color: #ff5c00;\n width: 0%;\n border-radius: 3px;\n }\n\n .time {\n font-size: 0.8em;\n color: #333;\n min-width: 45px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"player-container\">\n <div class=\"logo\">\n <a href=\"https:\/\/elson.media\" target=\"_blank\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/LOGO-ELSON-maj-2025.png\" alt=\"Logo Elson\">\n <\/a>\n <\/div>\n <div class=\"track-info\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/favicon-elson-2025-2.jpg\" class=\"cover-art\"\/>\n <div class=\"meta\">\n <div class=\"title\" data-amplitude-song-info=\"name\">Cours audio : C’est quoi un podcast ?<\/div>\n <div class=\"artist\" data-amplitude-song-info=\"artist\">De l’\u00e9coute \u00e0 la cr\u00e9ation de podcast<\/div>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <div class=\"time amplitude-current-time\" id=\"current-time\">00:00<\/div>\n <div class=\"progress\" id=\"progress-container\">\n <div class=\"progress-filled\" id=\"progress-filled\"><\/div>\n <\/div>\n <div class=\"time amplitude-duration-time\" id=\"duration\">00:00<\/div>\n <\/div>\n <div class=\"controls\">\n <div class=\"buttons\">\n <button onclick=\"Amplitude.skipBackward()\">«15<\/button>\n <button onclick=\"Amplitude.playPause()\">\u25b6<\/button>\n <button onclick=\"Amplitude.skipForward()\">15»<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n Amplitude.init({\n songs: [\n {\n name: \"Cours audio : C'est quoi un podcast ?\",\n artist: \"De l'\u00e9coute \u00e0 la cr\u00e9ation de podcast\",\n url: \"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/echantillon-1-cours-genres-radiophoniques.mp3\",\n cover_art_url: \"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/favicon-elson-2025-2.jpg\"\n }\n ],\n preload: \"auto\"\n });\n\n const progressFilled = document.getElementById('progress-filled');\n\n Amplitude.bind('timeupdate', function () {\n let percentage = Amplitude.getSongPlayedPercentage();\n progressFilled.style.width = percentage + '%';\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Lecteur audio simple<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/amplitudejs@5.3.2\/dist\/amplitude.min.js\"><\/script>\n <style>\n body {\n font-family: system-ui, sans-serif;\n padding: 40px;\n background: #fff;\n }\n\n .player {\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border-radius: 12px;\n box-shadow: 0 2px 12px rgba(0,0,0,0.08);\n border: 1px solid #eee;\n }\n\n .meta {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .meta img {\n height: 48px;\n width: auto;\n }\n\n .meta h1 {\n font-size: 20px;\n margin: 0;\n color: #2e004e;\n }\n\n .meta p {\n margin: 4px 0 0 0;\n font-size: 14px;\n color: #555;\n }\n\n .progress {\n display: flex;\n align-items: center;\n margin-top: 16px;\n }\n\n .progress time {\n font-size: 14px;\n color: #333;\n width: 48px;\n text-align: center;\n }\n\n .amplitude-progress-container {\n flex-grow: 1;\n height: 6px;\n background: #eee;\n border-radius: 3px;\n margin: 0 8px;\n cursor: pointer;\n }\n\n .amplitude-progress-bar {\n height: 6px;\n background: #2e004e;\n border-radius: 3px;\n }\n\n .controls {\n display: flex;\n justify-content: center;\n gap: 16px;\n margin-top: 20px;\n }\n\n .controls button {\n background: #2e004e;\n color: #fff;\n border: none;\n border-radius: 999px;\n padding: 10px 14px;\n font-size: 16px;\n cursor: pointer;\n }\n\n .controls button:hover {\n background: #4e0072;\n }\n\n .amplitude-play-pause[data-amplitude-play]::before {\n content: \"\u25b6\";\n }\n\n .amplitude-playing .amplitude-play-pause::before {\n content: \"\u275a\u275a\";\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"player\">\n <div class=\"meta\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/LOGO-ELSON-maj-2025.png\" alt=\"Logo Elson\">\n <div>\n <h1>Cours audio : C’est quoi un podcast ?<\/h1>\n <p>De l’\u00e9coute \u00e0 la cr\u00e9ation de podcast<\/p>\n <\/div>\n <\/div>\n\n <div class=\"progress\">\n <time class=\"amplitude-current-time\">00:00<\/time>\n <div class=\"amplitude-progress-container\">\n <div class=\"amplitude-progress-bar\"><\/div>\n <\/div>\n <time class=\"amplitude-duration-time\">00:00<\/time>\n <\/div>\n\n <div class=\"controls\">\n <button class=\"amplitude-rewind\">\u00ab15<\/button>\n <button class=\"amplitude-play-pause\" data-amplitude-play><\/button>\n <button class=\"amplitude-forward\">15\u00bb<\/button>\n <\/div>\n <\/div>\n\n <script>\n Amplitude.init({\n songs: [\n {\n name: \"Cours audio\",\n artist: \"Elson\",\n url: \"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/echantillon-1-cours-genres-radiophoniques.mp3\",\n }\n ]\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Lecteur audio Elson<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/amplitudejs@5.3.2\/dist\/amplitude.min.js\"><\/script>\n <style>\n body {\n font-family: system-ui, sans-serif;\n padding: 40px;\n background: #fff;\n }\n\n .player {\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border-radius: 12px;\n box-shadow: 0 2px 12px rgba(0,0,0,0.08);\n border: 1px solid #eee;\n }\n\n .meta {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .meta img {\n width: 48px;\n height: 48px;\n object-fit: contain;\n }\n\n .meta h1 {\n font-size: 20px;\n margin: 0;\n color: #2e004e;\n }\n\n .meta p {\n margin: 4px 0 0 0;\n font-size: 14px;\n color: #555;\n }\n\n .progress {\n display: flex;\n align-items: center;\n margin-top: 16px;\n }\n\n .progress time {\n font-size: 14px;\n color: #333;\n width: 48px;\n text-align: center;\n }\n\n .amplitude-progress-container {\n flex-grow: 1;\n height: 6px;\n background: #eee;\n border-radius: 3px;\n margin: 0 8px;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n }\n\n .amplitude-progress-bar {\n position: absolute;\n top: 0;\n left: 0;\n height: 6px;\n background: #2e004e;\n border-radius: 3px;\n width: 0%;\n }\n\n .controls {\n display: flex;\n justify-content: center;\n gap: 16px;\n margin-top: 20px;\n }\n\n .controls button {\n background: #2e004e;\n color: #fff;\n border: none;\n border-radius: 999px;\n padding: 10px 14px;\n font-size: 16px;\n cursor: pointer;\n }\n\n .controls button:hover {\n background: #4e0072;\n }\n\n .amplitude-play-pause::before {\n content: \"\u25b6\";\n }\n\n .playing .amplitude-play-pause::before {\n content: \"\u275a\u275a\";\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"player\">\n <div class=\"meta\">\n <a href=\"https:\/\/elson.media\" target=\"_blank\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/LOGO-ELSON-maj-2025.png\" alt=\"Logo Elson\" \/>\n <\/a>\n <div>\n <h1>Cours audio : C’est quoi un podcast ?<\/h1>\n <p>De l’\u00e9coute \u00e0 la cr\u00e9ation de podcast<\/p>\n <\/div>\n <\/div>\n\n <div class=\"progress\">\n <time class=\"amplitude-current-time\">00:00<\/time>\n <div class=\"amplitude-progress-container amplitude-waveform\">\n <div class=\"amplitude-progress-bar\"><\/div>\n <\/div>\n <time class=\"amplitude-duration-time\">00:00<\/time>\n <\/div>\n\n <div class=\"controls\">\n <button class=\"amplitude-rewind\" onclick=\"Amplitude.setSongPlayedPercentage(Amplitude.getSongPlayedPercentage() - 10)\">\u00ab15<\/button>\n <button class=\"amplitude-play-pause\"><\/button>\n <button class=\"amplitude-forward\" onclick=\"Amplitude.setSongPlayedPercentage(Amplitude.getSongPlayedPercentage() + 10)\">15\u00bb<\/button>\n <\/div>\n <\/div>\n\n <script>\n Amplitude.init({\n songs: [\n {\n name: \"Cours audio\",\n artist: \"Elson\",\n url: \"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/echantillon-1-cours-genres-radiophoniques.mp3\",\n }\n ]\n });\n\n const playPauseBtn = document.querySelector('.amplitude-play-pause');\n const playerContainer = document.querySelector('.player');\n\n Amplitude.addEventListener('play', () => {\n playerContainer.classList.add('playing');\n });\n\n Amplitude.addEventListener('pause', () => {\n playerContainer.classList.remove('playing');\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Lecteur Elson Am\u00e9lior\u00e9 \u00ab 15 \u25b6 15 \u00bb \/ Lecteur Elson 00:00 00:00 «15 \u25b6 15» Lecteur Elson Cours audio : C’est quoi un podcast ? De l’\u00e9coute \u00e0 la cr\u00e9ation de podcast 00:00 00:00 «15 \u25b6 15» Lecteur audio simple Cours audio : C’est quoi un podcast ? De l’\u00e9coute \u00e0 la cr\u00e9ation de […]<\/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-42","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":11,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions\/69"}],"wp:attachment":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/media?parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":42,"date":"2025-07-29T14:57:13","date_gmt":"2025-07-29T14:57:13","guid":{"rendered":"https:\/\/sons.elson.media\/?page_id=42"},"modified":"2025-07-29T16:50:50","modified_gmt":"2025-07-29T16:50:50","slug":"test-lecteur-custom","status":"publish","type":"page","link":"https:\/\/sons.elson.media\/index.php\/test-lecteur-custom\/","title":{"rendered":"test lecteur custom"},"content":{"rendered":"\n\n\n\n \n Lecteur Elson Am\u00e9lior\u00e9<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/amplitudejs@5.3.2\/dist\/amplitude.min.js\"><\/script>\n <style>\n #elson-player {\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border-radius: 12px;\n background: #f8f8f8;\n text-align: center;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n font-family: sans-serif;\n }\n\n #elson-player img.logo {\n max-height: 60px;\n margin-bottom: 20px;\n }\n\n .song-title {\n font-size: 1.1em;\n font-weight: bold;\n margin-bottom: 10px;\n color: #310046;\n }\n\n .controls {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 15px;\n margin: 20px 0;\n }\n\n .amplitude-btn {\n background-color: #310046;\n color: white;\n border: none;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n font-size: 18px;\n line-height: 50px;\n cursor: pointer;\n }\n\n .amplitude-btn:hover {\n background-color: #4a0072;\n }\n\n .progress-bar {\n height: 8px;\n width: 100%;\n background-color: #ddd;\n border-radius: 4px;\n overflow: hidden;\n }\n\n .progress-fill {\n background-color: #310046;\n width: 0%;\n height: 100%;\n }\n\n .time {\n margin-top: 10px;\n font-size: 0.9em;\n color: #444;\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"elson-player\">\n <a href=\"https:\/\/elson.media\" target=\"_blank\" rel=\"noopener\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/LOGO-ELSON-maj-2025.png\" alt=\"Logo Elson\" class=\"logo\">\n <\/a>\n\n <div class=\"song-title\" data-amplitude-song-info=\"name\"><\/div>\n\n <div class=\"controls\">\n <button class=\"amplitude-btn\" data-amplitude-decrease-by=\"15\">\u00ab 15<\/button>\n <button class=\"amplitude-btn amplitude-play-pause\" data-amplitude-song-index=\"0\">\u25b6<\/button>\n <button class=\"amplitude-btn\" data-amplitude-increase-by=\"15\">15 \u00bb<\/button>\n <\/div>\n\n <div class=\"progress-bar\">\n <div class=\"progress-fill\" id=\"elson-progress\"><\/div>\n <\/div>\n\n <div class=\"time\">\n <span class=\"amplitude-current-time\"><\/span> \/ <span class=\"amplitude-duration-time\"><\/span>\n <\/div>\n<\/div>\n\n<script>\n Amplitude.init({\n songs: [\n {\n name: \"Cours 01 \u2013 Introduction au podcast\",\n url: \"https:\/\/sons.elson.media\/wp-content\/uploads\/podcasts\/cours01.mp3\",\n artist: \"Elson MOOC\"\n }\n ],\n bindings: {\n 32: 'play_pause'\n }\n });\n\n Amplitude.setSongPlayedPercentageCallback(function(percent) {\n document.getElementById('elson-progress').style.width = percent + \"%\";\n });\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Lecteur Elson<\/title>\n <script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/amplitudejs@5.3.2\/dist\/amplitude.min.js\"><\/script>\n <style>\n body {\n background: #fff;\n font-family: system-ui, sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n\n .player-container {\n width: 600px;\n background: #fff;\n border: 1px solid #ddd;\n border-radius: 12px;\n padding: 20px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n }\n\n .logo {\n text-align: left;\n margin-bottom: 10px;\n }\n\n .logo img {\n height: 30px;\n }\n\n .track-info {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .cover-art {\n width: 70px;\n height: 70px;\n border-radius: 6px;\n }\n\n .meta {\n flex-grow: 1;\n }\n\n .meta .title {\n font-weight: bold;\n font-size: 1.1em;\n color: #310046;\n }\n\n .meta .artist {\n font-size: 0.9em;\n color: #555;\n }\n\n .controls {\n margin-top: 15px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .buttons {\n display: flex;\n gap: 15px;\n }\n\n .buttons button {\n background-color: #310046;\n border: none;\n color: white;\n padding: 10px;\n border-radius: 50%;\n cursor: pointer;\n }\n\n .progress {\n flex-grow: 1;\n height: 5px;\n background: #eee;\n border-radius: 3px;\n margin: 0 10px;\n position: relative;\n }\n\n .progress-filled {\n height: 100%;\n background-color: #ff5c00;\n width: 0%;\n border-radius: 3px;\n }\n\n .time {\n font-size: 0.8em;\n color: #333;\n min-width: 45px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"player-container\">\n <div class=\"logo\">\n <a href=\"https:\/\/elson.media\" target=\"_blank\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/LOGO-ELSON-maj-2025.png\" alt=\"Logo Elson\">\n <\/a>\n <\/div>\n <div class=\"track-info\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/favicon-elson-2025-2.jpg\" class=\"cover-art\"\/>\n <div class=\"meta\">\n <div class=\"title\" data-amplitude-song-info=\"name\"><\/div>\n <div class=\"artist\" data-amplitude-song-info=\"artist\"><\/div>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <div class=\"time\" id=\"current-time\">00:00<\/div>\n <div class=\"progress\" id=\"progress-container\">\n <div class=\"progress-filled\" id=\"progress-filled\"><\/div>\n <\/div>\n <div class=\"time\" id=\"duration\">00:00<\/div>\n <\/div>\n <div class=\"controls\">\n <div class=\"buttons\">\n <button onclick=\"Amplitude.skipBackward()\">«15<\/button>\n <button onclick=\"Amplitude.playPause()\">\u25b6<\/button>\n <button onclick=\"Amplitude.skipForward()\">15»<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n Amplitude.init({\n songs: [\n {\n name: \"Cours audio : C'est quoi un podcast ?\",\n artist: \"De l'\u00e9coute \u00e0 la cr\u00e9ation de podcast\",\n url: \"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/sonsmooc-cours1.mp3\",\n cover_art_url: \"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/favicon-elson-2025-2.jpg\"\n }\n ]\n });\n\n const progressFilled = document.getElementById('progress-filled');\n const currentTime = document.getElementById('current-time');\n const duration = document.getElementById('duration');\n\n Amplitude.bind('timeupdate', function () {\n let percentage = Amplitude.getSongPlayedPercentage();\n progressFilled.style.width = percentage + '%';\n currentTime.textContent = Amplitude.getFormattedCurrentTime();\n duration.textContent = Amplitude.getFormattedDuration();\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Lecteur Elson<\/title>\n <script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/amplitudejs@5.3.2\/dist\/amplitude.min.js\"><\/script>\n <style>\n body {\n background: #fff;\n font-family: system-ui, sans-serif;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n\n .player-container {\n width: 600px;\n background: #fff;\n border: 1px solid #ddd;\n border-radius: 12px;\n padding: 20px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\n }\n\n .logo {\n text-align: left;\n margin-bottom: 10px;\n }\n\n .logo img {\n height: 30px;\n }\n\n .track-info {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .cover-art {\n width: 70px;\n height: 70px;\n border-radius: 6px;\n }\n\n .meta {\n flex-grow: 1;\n }\n\n .meta .title {\n font-weight: bold;\n font-size: 1.1em;\n color: #310046;\n }\n\n .meta .artist {\n font-size: 0.9em;\n color: #555;\n }\n\n .controls {\n margin-top: 15px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .buttons {\n display: flex;\n gap: 15px;\n }\n\n .buttons button {\n background-color: #310046;\n border: none;\n color: white;\n padding: 10px;\n border-radius: 50%;\n cursor: pointer;\n }\n\n .progress {\n flex-grow: 1;\n height: 5px;\n background: #eee;\n border-radius: 3px;\n margin: 0 10px;\n position: relative;\n }\n\n .progress-filled {\n height: 100%;\n background-color: #ff5c00;\n width: 0%;\n border-radius: 3px;\n }\n\n .time {\n font-size: 0.8em;\n color: #333;\n min-width: 45px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"player-container\">\n <div class=\"logo\">\n <a href=\"https:\/\/elson.media\" target=\"_blank\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/LOGO-ELSON-maj-2025.png\" alt=\"Logo Elson\">\n <\/a>\n <\/div>\n <div class=\"track-info\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/favicon-elson-2025-2.jpg\" class=\"cover-art\"\/>\n <div class=\"meta\">\n <div class=\"title\" data-amplitude-song-info=\"name\">Cours audio : C’est quoi un podcast ?<\/div>\n <div class=\"artist\" data-amplitude-song-info=\"artist\">De l’\u00e9coute \u00e0 la cr\u00e9ation de podcast<\/div>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <div class=\"time amplitude-current-time\" id=\"current-time\">00:00<\/div>\n <div class=\"progress\" id=\"progress-container\">\n <div class=\"progress-filled\" id=\"progress-filled\"><\/div>\n <\/div>\n <div class=\"time amplitude-duration-time\" id=\"duration\">00:00<\/div>\n <\/div>\n <div class=\"controls\">\n <div class=\"buttons\">\n <button onclick=\"Amplitude.skipBackward()\">«15<\/button>\n <button onclick=\"Amplitude.playPause()\">\u25b6<\/button>\n <button onclick=\"Amplitude.skipForward()\">15»<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n Amplitude.init({\n songs: [\n {\n name: \"Cours audio : C'est quoi un podcast ?\",\n artist: \"De l'\u00e9coute \u00e0 la cr\u00e9ation de podcast\",\n url: \"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/echantillon-1-cours-genres-radiophoniques.mp3\",\n cover_art_url: \"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/favicon-elson-2025-2.jpg\"\n }\n ],\n preload: \"auto\"\n });\n\n const progressFilled = document.getElementById('progress-filled');\n\n Amplitude.bind('timeupdate', function () {\n let percentage = Amplitude.getSongPlayedPercentage();\n progressFilled.style.width = percentage + '%';\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Lecteur audio simple<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/amplitudejs@5.3.2\/dist\/amplitude.min.js\"><\/script>\n <style>\n body {\n font-family: system-ui, sans-serif;\n padding: 40px;\n background: #fff;\n }\n\n .player {\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border-radius: 12px;\n box-shadow: 0 2px 12px rgba(0,0,0,0.08);\n border: 1px solid #eee;\n }\n\n .meta {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .meta img {\n height: 48px;\n width: auto;\n }\n\n .meta h1 {\n font-size: 20px;\n margin: 0;\n color: #2e004e;\n }\n\n .meta p {\n margin: 4px 0 0 0;\n font-size: 14px;\n color: #555;\n }\n\n .progress {\n display: flex;\n align-items: center;\n margin-top: 16px;\n }\n\n .progress time {\n font-size: 14px;\n color: #333;\n width: 48px;\n text-align: center;\n }\n\n .amplitude-progress-container {\n flex-grow: 1;\n height: 6px;\n background: #eee;\n border-radius: 3px;\n margin: 0 8px;\n cursor: pointer;\n }\n\n .amplitude-progress-bar {\n height: 6px;\n background: #2e004e;\n border-radius: 3px;\n }\n\n .controls {\n display: flex;\n justify-content: center;\n gap: 16px;\n margin-top: 20px;\n }\n\n .controls button {\n background: #2e004e;\n color: #fff;\n border: none;\n border-radius: 999px;\n padding: 10px 14px;\n font-size: 16px;\n cursor: pointer;\n }\n\n .controls button:hover {\n background: #4e0072;\n }\n\n .amplitude-play-pause[data-amplitude-play]::before {\n content: \"\u25b6\";\n }\n\n .amplitude-playing .amplitude-play-pause::before {\n content: \"\u275a\u275a\";\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"player\">\n <div class=\"meta\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/LOGO-ELSON-maj-2025.png\" alt=\"Logo Elson\">\n <div>\n <h1>Cours audio : C’est quoi un podcast ?<\/h1>\n <p>De l’\u00e9coute \u00e0 la cr\u00e9ation de podcast<\/p>\n <\/div>\n <\/div>\n\n <div class=\"progress\">\n <time class=\"amplitude-current-time\">00:00<\/time>\n <div class=\"amplitude-progress-container\">\n <div class=\"amplitude-progress-bar\"><\/div>\n <\/div>\n <time class=\"amplitude-duration-time\">00:00<\/time>\n <\/div>\n\n <div class=\"controls\">\n <button class=\"amplitude-rewind\">\u00ab15<\/button>\n <button class=\"amplitude-play-pause\" data-amplitude-play><\/button>\n <button class=\"amplitude-forward\">15\u00bb<\/button>\n <\/div>\n <\/div>\n\n <script>\n Amplitude.init({\n songs: [\n {\n name: \"Cours audio\",\n artist: \"Elson\",\n url: \"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/echantillon-1-cours-genres-radiophoniques.mp3\",\n }\n ]\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Lecteur audio Elson<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/amplitudejs@5.3.2\/dist\/amplitude.min.js\"><\/script>\n <style>\n body {\n font-family: system-ui, sans-serif;\n padding: 40px;\n background: #fff;\n }\n\n .player {\n max-width: 600px;\n margin: auto;\n padding: 20px;\n border-radius: 12px;\n box-shadow: 0 2px 12px rgba(0,0,0,0.08);\n border: 1px solid #eee;\n }\n\n .meta {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .meta img {\n width: 48px;\n height: 48px;\n object-fit: contain;\n }\n\n .meta h1 {\n font-size: 20px;\n margin: 0;\n color: #2e004e;\n }\n\n .meta p {\n margin: 4px 0 0 0;\n font-size: 14px;\n color: #555;\n }\n\n .progress {\n display: flex;\n align-items: center;\n margin-top: 16px;\n }\n\n .progress time {\n font-size: 14px;\n color: #333;\n width: 48px;\n text-align: center;\n }\n\n .amplitude-progress-container {\n flex-grow: 1;\n height: 6px;\n background: #eee;\n border-radius: 3px;\n margin: 0 8px;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n }\n\n .amplitude-progress-bar {\n position: absolute;\n top: 0;\n left: 0;\n height: 6px;\n background: #2e004e;\n border-radius: 3px;\n width: 0%;\n }\n\n .controls {\n display: flex;\n justify-content: center;\n gap: 16px;\n margin-top: 20px;\n }\n\n .controls button {\n background: #2e004e;\n color: #fff;\n border: none;\n border-radius: 999px;\n padding: 10px 14px;\n font-size: 16px;\n cursor: pointer;\n }\n\n .controls button:hover {\n background: #4e0072;\n }\n\n .amplitude-play-pause::before {\n content: \"\u25b6\";\n }\n\n .playing .amplitude-play-pause::before {\n content: \"\u275a\u275a\";\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"player\">\n <div class=\"meta\">\n <a href=\"https:\/\/elson.media\" target=\"_blank\">\n <img decoding=\"async\" src=\"https:\/\/sons.elson.media\/wp-content\/uploads\/2025\/07\/LOGO-ELSON-maj-2025.png\" alt=\"Logo Elson\" \/>\n <\/a>\n <div>\n <h1>Cours audio : C’est quoi un podcast ?<\/h1>\n <p>De l’\u00e9coute \u00e0 la cr\u00e9ation de podcast<\/p>\n <\/div>\n <\/div>\n\n <div class=\"progress\">\n <time class=\"amplitude-current-time\">00:00<\/time>\n <div class=\"amplitude-progress-container amplitude-waveform\">\n <div class=\"amplitude-progress-bar\"><\/div>\n <\/div>\n <time class=\"amplitude-duration-time\">00:00<\/time>\n <\/div>\n\n <div class=\"controls\">\n <button class=\"amplitude-rewind\" onclick=\"Amplitude.setSongPlayedPercentage(Amplitude.getSongPlayedPercentage() - 10)\">\u00ab15<\/button>\n <button class=\"amplitude-play-pause\"><\/button>\n <button class=\"amplitude-forward\" onclick=\"Amplitude.setSongPlayedPercentage(Amplitude.getSongPlayedPercentage() + 10)\">15\u00bb<\/button>\n <\/div>\n <\/div>\n\n <script>\n Amplitude.init({\n songs: [\n {\n name: \"Cours audio\",\n artist: \"Elson\",\n url: \"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/echantillon-1-cours-genres-radiophoniques.mp3\",\n }\n ]\n });\n\n const playPauseBtn = document.querySelector('.amplitude-play-pause');\n const playerContainer = document.querySelector('.player');\n\n Amplitude.addEventListener('play', () => {\n playerContainer.classList.add('playing');\n });\n\n Amplitude.addEventListener('pause', () => {\n playerContainer.classList.remove('playing');\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Lecteur Elson Am\u00e9lior\u00e9 \u00ab 15 \u25b6 15 \u00bb \/ Lecteur Elson 00:00 00:00 «15 \u25b6 15» Lecteur Elson Cours audio : C’est quoi un podcast ? De l’\u00e9coute \u00e0 la cr\u00e9ation de podcast 00:00 00:00 «15 \u25b6 15» Lecteur audio simple Cours audio : C’est quoi un podcast ? De l’\u00e9coute \u00e0 la cr\u00e9ation de […]<\/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-42","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":11,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/42\/revisions\/69"}],"wp:attachment":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/media?parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}