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 background: #fff;\n padding: 40px;\n }\n\n .player {\n width: 480px;\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: auto;\n border-radius: 4px;\n }\n\n .meta h1 {\n font-size: 19px;\n margin: 0;\n color: #031646;\n }\n\n .meta p {\n margin: 4px 0 0 0;\n font-size: 15px;\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: 14.5px;\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 position: relative;\n }\n\n .amplitude-progress-bar {\n height: 6px;\n background: #031646;\n border-radius: 3px;\n width: 0%;\n }\n\n .controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 20px;\n }\n\n .controls-left {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .controls button {\n background: #031646;\n color: #fff;\n border: none;\n border-radius: 50%;\n width: 36px;\n height: 36px;\n font-size: 12px;\n cursor: pointer;\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .controls button:hover {\n background: #cc374b;\n }\n\n .volume-bars {\n display: flex;\n gap: 2px;\n cursor: pointer;\n align-items: flex-end;\n height: 24px;\n }\n\n .volume-bar {\n width: 4px;\n background: #aaa;\n border-radius: 2px;\n }\n\n .volume-bar.active {\n background: #031646;\n }\n\n .speed-selector {\n position: relative;\n }\n\n .speed-button {\n background: #eee;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 4px 8px;\n font-size: 12px;\n cursor: pointer;\n color: #031646;\n }\n\n .speed-options {\n display: none;\n position: absolute;\n top: 32px;\n right: 0;\n background: white;\n border: 1px solid #ccc;\n border-radius: 4px;\n z-index: 10;\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n }\n\n .speed-options div {\n padding: 6px 12px;\n cursor: pointer;\n font-size: 13px;\n }\n\n .speed-options div:hover {\n background: #f0f0f0;\n }\n\n .speed-selector.open .speed-options {\n display: block;\n }\n\n .elson-logo {\n width: 64px;\n height: auto;\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"player\">\n <div class=\"meta\">\n <img decoding=\"async\" src=\"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/carine-square.jpg\" alt=\"Cover podcast\" \/>\n <div>\n <h1>Cours audio : C\u2019est quoi un podcast ?<\/h1>\n <p>De l\u2019\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 <div class=\"controls-left\">\n <button class=\"amplitude-rewind\">« 15<\/button>\n <button class=\"amplitude-play-pause\" id=\"play-pause-btn\">\u25b6<\/button>\n <button class=\"amplitude-forward\">15 »<\/button>\n <div class=\"volume-bars\" id=\"volume-bars\"><\/div>\n <div class=\"speed-selector\" id=\"speed-selector\">\n <div class=\"speed-button\" id=\"speed-button\">1x<\/div>\n <div class=\"speed-options\" id=\"speed-options\">\n <div data-speed=\"1\">1x<\/div>\n <div data-speed=\"1.25\">1.25x<\/div>\n <div data-speed=\"1.5\">1.5x<\/div>\n <div data-speed=\"1.75\">1.75x<\/div>\n <div data-speed=\"2\">2x<\/div>\n <\/div>\n <\/div>\n <\/div>\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\" class=\"elson-logo\" \/>\n <\/a>\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 callbacks: {\n play: function() {\n document.getElementById('play-pause-btn').innerText = '\u275a\u275a';\n },\n pause: function() {\n document.getElementById('play-pause-btn').innerText = '\u25b6';\n }\n }\n });\n\n \/\/ Volume bars\n const volumeBarsContainer = document.getElementById('volume-bars');\n const volumeLevels = 6;\n let currentVolume = 0.8;\n Amplitude.setVolume(currentVolume * 100);\n\n function renderVolumeBars() {\n volumeBarsContainer.innerHTML = '';\n for (let i = 0; i < volumeLevels; i++) {\n const bar = document.createElement('div');\n bar.classList.add('volume-bar');\n bar.style.height = (6 + i * 4) + 'px';\n if ((i + 1) \/ volumeLevels <= currentVolume) {\n bar.classList.add('active');\n }\n bar.addEventListener('click', () => {\n currentVolume = (i + 1) \/ volumeLevels;\n Amplitude.setVolume(currentVolume * 100);\n renderVolumeBars();\n });\n volumeBarsContainer.appendChild(bar);\n }\n }\n renderVolumeBars();\n\n \/\/ Speed control\n const speedSelector = document.getElementById('speed-selector');\n const speedButton = document.getElementById('speed-button');\n const speedOptions = document.getElementById('speed-options');\n\n speedButton.addEventListener('click', () => {\n speedSelector.classList.toggle('open');\n });\n\n speedOptions.querySelectorAll('div').forEach(option => {\n option.addEventListener('click', () => {\n const speed = parseFloat(option.dataset.speed);\n const audio = Amplitude.getAudio();\n audio.playbackRate = speed;\n speedButton.innerText = `${speed}x`;\n speedSelector.classList.remove('open');\n });\n });\n\n \/\/ Progress bar animation\n function updateProgressBar() {\n const audio = Amplitude.getAudio();\n const progress = document.querySelector('.amplitude-progress-bar');\n if (audio && audio.duration > 0) {\n const percent = (audio.currentTime \/ audio.duration) * 100;\n progress.style.width = percent + '%';\n }\n requestAnimationFrame(updateProgressBar);\n }\n updateProgressBar();\n <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Lecteur audio Elson Cours audio : C\u2019est quoi un podcast ? De l\u2019\u00e9coute \u00e0 la cr\u00e9ation de podcast 00:00 00:00 « 15 \u25b6 15 » 1x 1x 1.25x 1.5x 1.75x 2x<\/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-70","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/70","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=70"}],"version-history":[{"count":38,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/70\/revisions"}],"predecessor-version":[{"id":109,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/70\/revisions\/109"}],"wp:attachment":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/media?parent=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":70,"date":"2025-07-29T17:28:20","date_gmt":"2025-07-29T17:28:20","guid":{"rendered":"https:\/\/sons.elson.media\/?page_id=70"},"modified":"2025-07-29T20:00:06","modified_gmt":"2025-07-29T20:00:06","slug":"son-test-du-soir","status":"publish","type":"page","link":"https:\/\/sons.elson.media\/index.php\/son-test-du-soir\/","title":{"rendered":"son test du soir"},"content":{"rendered":"\n\n\n\n \n 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 background: #fff;\n padding: 40px;\n }\n\n .player {\n width: 480px;\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: auto;\n border-radius: 4px;\n }\n\n .meta h1 {\n font-size: 19px;\n margin: 0;\n color: #031646;\n }\n\n .meta p {\n margin: 4px 0 0 0;\n font-size: 15px;\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: 14.5px;\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 position: relative;\n }\n\n .amplitude-progress-bar {\n height: 6px;\n background: #031646;\n border-radius: 3px;\n width: 0%;\n }\n\n .controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 20px;\n }\n\n .controls-left {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .controls button {\n background: #031646;\n color: #fff;\n border: none;\n border-radius: 50%;\n width: 36px;\n height: 36px;\n font-size: 12px;\n cursor: pointer;\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .controls button:hover {\n background: #cc374b;\n }\n\n .volume-bars {\n display: flex;\n gap: 2px;\n cursor: pointer;\n align-items: flex-end;\n height: 24px;\n }\n\n .volume-bar {\n width: 4px;\n background: #aaa;\n border-radius: 2px;\n }\n\n .volume-bar.active {\n background: #031646;\n }\n\n .speed-selector {\n position: relative;\n }\n\n .speed-button {\n background: #eee;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 4px 8px;\n font-size: 12px;\n cursor: pointer;\n color: #031646;\n }\n\n .speed-options {\n display: none;\n position: absolute;\n top: 32px;\n right: 0;\n background: white;\n border: 1px solid #ccc;\n border-radius: 4px;\n z-index: 10;\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n }\n\n .speed-options div {\n padding: 6px 12px;\n cursor: pointer;\n font-size: 13px;\n }\n\n .speed-options div:hover {\n background: #f0f0f0;\n }\n\n .speed-selector.open .speed-options {\n display: block;\n }\n\n .elson-logo {\n width: 64px;\n height: auto;\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"player\">\n <div class=\"meta\">\n <img decoding=\"async\" src=\"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/carine-square.jpg\" alt=\"Cover podcast\" \/>\n <div>\n <h1>Cours audio : C\u2019est quoi un podcast ?<\/h1>\n <p>De l\u2019\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 <div class=\"controls-left\">\n <button class=\"amplitude-rewind\">« 15<\/button>\n <button class=\"amplitude-play-pause\" id=\"play-pause-btn\">\u25b6<\/button>\n <button class=\"amplitude-forward\">15 »<\/button>\n <div class=\"volume-bars\" id=\"volume-bars\"><\/div>\n <div class=\"speed-selector\" id=\"speed-selector\">\n <div class=\"speed-button\" id=\"speed-button\">1x<\/div>\n <div class=\"speed-options\" id=\"speed-options\">\n <div data-speed=\"1\">1x<\/div>\n <div data-speed=\"1.25\">1.25x<\/div>\n <div data-speed=\"1.5\">1.5x<\/div>\n <div data-speed=\"1.75\">1.75x<\/div>\n <div data-speed=\"2\">2x<\/div>\n <\/div>\n <\/div>\n <\/div>\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\" class=\"elson-logo\" \/>\n <\/a>\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 callbacks: {\n play: function() {\n document.getElementById('play-pause-btn').innerText = '\u275a\u275a';\n },\n pause: function() {\n document.getElementById('play-pause-btn').innerText = '\u25b6';\n }\n }\n });\n\n \/\/ Volume bars\n const volumeBarsContainer = document.getElementById('volume-bars');\n const volumeLevels = 6;\n let currentVolume = 0.8;\n Amplitude.setVolume(currentVolume * 100);\n\n function renderVolumeBars() {\n volumeBarsContainer.innerHTML = '';\n for (let i = 0; i < volumeLevels; i++) {\n const bar = document.createElement('div');\n bar.classList.add('volume-bar');\n bar.style.height = (6 + i * 4) + 'px';\n if ((i + 1) \/ volumeLevels <= currentVolume) {\n bar.classList.add('active');\n }\n bar.addEventListener('click', () => {\n currentVolume = (i + 1) \/ volumeLevels;\n Amplitude.setVolume(currentVolume * 100);\n renderVolumeBars();\n });\n volumeBarsContainer.appendChild(bar);\n }\n }\n renderVolumeBars();\n\n \/\/ Speed control\n const speedSelector = document.getElementById('speed-selector');\n const speedButton = document.getElementById('speed-button');\n const speedOptions = document.getElementById('speed-options');\n\n speedButton.addEventListener('click', () => {\n speedSelector.classList.toggle('open');\n });\n\n speedOptions.querySelectorAll('div').forEach(option => {\n option.addEventListener('click', () => {\n const speed = parseFloat(option.dataset.speed);\n const audio = Amplitude.getAudio();\n audio.playbackRate = speed;\n speedButton.innerText = `${speed}x`;\n speedSelector.classList.remove('open');\n });\n });\n\n \/\/ Progress bar animation\n function updateProgressBar() {\n const audio = Amplitude.getAudio();\n const progress = document.querySelector('.amplitude-progress-bar');\n if (audio && audio.duration > 0) {\n const percent = (audio.currentTime \/ audio.duration) * 100;\n progress.style.width = percent + '%';\n }\n requestAnimationFrame(updateProgressBar);\n }\n updateProgressBar();\n <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Lecteur audio Elson Cours audio : C\u2019est quoi un podcast ? De l\u2019\u00e9coute \u00e0 la cr\u00e9ation de podcast 00:00 00:00 « 15 \u25b6 15 » 1x 1x 1.25x 1.5x 1.75x 2x<\/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-70","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/70","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=70"}],"version-history":[{"count":38,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/70\/revisions"}],"predecessor-version":[{"id":109,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/70\/revisions\/109"}],"wp:attachment":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/media?parent=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}