Lecteur audio Elson<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\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 margin: 0;\n padding: 0;\n background: #fff;\n }\n\n .player {\n max-width: 500px;\n margin: 20px auto;\n padding: 24px 14px 16px 14px;\n border: 1px solid #032646;\n border-radius: 10px;\n background: #fff;\n box-shadow:\n 0 0 0 2px rgba(3, 22, 70, 0.2),\n 0 8px 20px rgba(3, 22, 70, 0.1);\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 border-radius: 8px;\n }\n\n .meta h1 {\n font-size: 20px;\n margin: 0;\n color: #031646;\n }\n\n .meta p {\n margin: 4px 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: 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 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 flex-wrap: nowrap;\n }\n\n .buttons-group {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: nowrap;\n }\n\n button {\n border: none;\n background: none;\n cursor: pointer;\n padding: 0;\n margin: 0;\n outline: none;\n }\n\n .amplitude-rewind img,\n .amplitude-forward img {\n width: 24px;\n height: 24px;\n display: block;\n }\n\n .amplitude-play-pause {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background-color: #031646;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .amplitude-play-pause svg {\n width: 16px;\n height: 16px;\n fill: #fff;\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-button {\n background: #eee;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 5px 8px;\n font-size: 13px;\n cursor: pointer;\n color: #031646;\n user-select: none;\n }\n\n .logo {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n .logo img {\n height: 48px;\n }\n\n .logo a {\n display: inline-block;\n }\n\n @media (max-width: 600px) {\n .player {\n width: 100%;\n margin: 0;\n padding: 12px;\n border: 1px solid #031646;\n box-sizing: border-box;\n }\n\n .logo img {\n height: 40px;\n }\n\n .controls {\n flex-direction: row;\n flex-wrap: nowrap;\n gap: 10px;\n }\n\n .buttons-group {\n flex-wrap: nowrap;\n overflow-x: auto;\n gap: 10px;\n }\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=\"buttons-group\">\n <button class=\"amplitude-rewind\" onclick=\"Amplitude.getAudio().currentTime -= 15;\">\n <img decoding=\"async\" src=\"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/arrow-counter-clockwise.svg\" alt=\"Reculer 15s\" \/>\n <\/button>\n\n <button class=\"amplitude-play-pause\" id=\"play-pause-btn\">\n <svg viewBox=\"0 0 24 24\">\n <polygon points=\"6,4 20,12 6,20\" \/>\n <\/svg>\n <\/button>\n\n <button class=\"amplitude-forward\" onclick=\"Amplitude.getAudio().currentTime += 15;\">\n <img decoding=\"async\" src=\"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/arrow-clockwise.svg\" alt=\"Avancer 15s\" \/>\n <\/button>\n\n <div class=\"volume-bars\" id=\"volume-bars\"><\/div>\n\n <div class=\"speed-button\" id=\"speed-button\">1x<\/div>\n <\/div>\n\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=\"Elson\" \/>\n <\/a>\n <\/div>\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').innerHTML = `\n <svg viewBox=\"0 0 24 24\">\n <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" fill=\"#fff\"><\/rect>\n <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" fill=\"#fff\"><\/rect>\n <\/svg>`;\n },\n pause: function() {\n document.getElementById('play-pause-btn').innerHTML = `\n <svg viewBox=\"0 0 24 24\">\n <polygon points=\"6,4 20,12 6,20\" fill=\"#fff\" \/>\n <\/svg>`;\n }\n }\n });\n\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 \/\/ Bouton de vitesse cyclique\n const speedButton = document.getElementById('speed-button');\n const speeds = [0,75, 1, 1.20, 1.40, 1.60];\n let currentSpeedIndex = 1;\n\n function setSpeed(newSpeed) {\n const audio = Amplitude.getAudio();\n if (audio && !isNaN(audio.duration)) {\n audio.playbackRate = newSpeed;\n speedButton.innerText = `${newSpeed}x`;\n }\n }\n\n function toggleSpeed() {\n currentSpeedIndex = (currentSpeedIndex + 1) % speeds.length;\n setSpeed(speeds[currentSpeedIndex]);\n }\n\n speedButton.addEventListener('click', (e) => {\n e.preventDefault();\n toggleSpeed();\n });\n\n speedButton.addEventListener('touchstart', (e) => {\n e.preventDefault();\n toggleSpeed();\n });\n\n setSpeed(speeds[currentSpeedIndex]);\n\n document.querySelector('.amplitude-progress-container').addEventListener('click', function(e) {\n const width = this.offsetWidth;\n const offsetX = e.offsetX;\n const percent = offsetX \/ width;\n const audio = Amplitude.getAudio();\n audio.currentTime = percent * audio.duration;\n });\n\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<\/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 1x<\/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-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/16","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=16"}],"version-history":[{"count":35,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":16,"date":"2025-07-29T10:55:25","date_gmt":"2025-07-29T10:55:25","guid":{"rendered":"https:\/\/sons.elson.media\/?page_id=16"},"modified":"2025-07-31T15:57:00","modified_gmt":"2025-07-31T15:57:00","slug":"lecteur-test-mooc","status":"publish","type":"page","link":"https:\/\/sons.elson.media\/index.php\/lecteur-test-mooc\/","title":{"rendered":"Lecteur test mooc"},"content":{"rendered":"\n\n\n\n \n Lecteur audio Elson<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\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 margin: 0;\n padding: 0;\n background: #fff;\n }\n\n .player {\n max-width: 500px;\n margin: 20px auto;\n padding: 24px 14px 16px 14px;\n border: 1px solid #032646;\n border-radius: 10px;\n background: #fff;\n box-shadow:\n 0 0 0 2px rgba(3, 22, 70, 0.2),\n 0 8px 20px rgba(3, 22, 70, 0.1);\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 border-radius: 8px;\n }\n\n .meta h1 {\n font-size: 20px;\n margin: 0;\n color: #031646;\n }\n\n .meta p {\n margin: 4px 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: 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 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 flex-wrap: nowrap;\n }\n\n .buttons-group {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: nowrap;\n }\n\n button {\n border: none;\n background: none;\n cursor: pointer;\n padding: 0;\n margin: 0;\n outline: none;\n }\n\n .amplitude-rewind img,\n .amplitude-forward img {\n width: 24px;\n height: 24px;\n display: block;\n }\n\n .amplitude-play-pause {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background-color: #031646;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .amplitude-play-pause svg {\n width: 16px;\n height: 16px;\n fill: #fff;\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-button {\n background: #eee;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 5px 8px;\n font-size: 13px;\n cursor: pointer;\n color: #031646;\n user-select: none;\n }\n\n .logo {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n\n .logo img {\n height: 48px;\n }\n\n .logo a {\n display: inline-block;\n }\n\n @media (max-width: 600px) {\n .player {\n width: 100%;\n margin: 0;\n padding: 12px;\n border: 1px solid #031646;\n box-sizing: border-box;\n }\n\n .logo img {\n height: 40px;\n }\n\n .controls {\n flex-direction: row;\n flex-wrap: nowrap;\n gap: 10px;\n }\n\n .buttons-group {\n flex-wrap: nowrap;\n overflow-x: auto;\n gap: 10px;\n }\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=\"buttons-group\">\n <button class=\"amplitude-rewind\" onclick=\"Amplitude.getAudio().currentTime -= 15;\">\n <img decoding=\"async\" src=\"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/arrow-counter-clockwise.svg\" alt=\"Reculer 15s\" \/>\n <\/button>\n\n <button class=\"amplitude-play-pause\" id=\"play-pause-btn\">\n <svg viewBox=\"0 0 24 24\">\n <polygon points=\"6,4 20,12 6,20\" \/>\n <\/svg>\n <\/button>\n\n <button class=\"amplitude-forward\" onclick=\"Amplitude.getAudio().currentTime += 15;\">\n <img decoding=\"async\" src=\"https:\/\/test.elson.media\/wp-content\/uploads\/2025\/07\/arrow-clockwise.svg\" alt=\"Avancer 15s\" \/>\n <\/button>\n\n <div class=\"volume-bars\" id=\"volume-bars\"><\/div>\n\n <div class=\"speed-button\" id=\"speed-button\">1x<\/div>\n <\/div>\n\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=\"Elson\" \/>\n <\/a>\n <\/div>\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').innerHTML = `\n <svg viewBox=\"0 0 24 24\">\n <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" fill=\"#fff\"><\/rect>\n <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" fill=\"#fff\"><\/rect>\n <\/svg>`;\n },\n pause: function() {\n document.getElementById('play-pause-btn').innerHTML = `\n <svg viewBox=\"0 0 24 24\">\n <polygon points=\"6,4 20,12 6,20\" fill=\"#fff\" \/>\n <\/svg>`;\n }\n }\n });\n\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 \/\/ Bouton de vitesse cyclique\n const speedButton = document.getElementById('speed-button');\n const speeds = [0,75, 1, 1.20, 1.40, 1.60];\n let currentSpeedIndex = 1;\n\n function setSpeed(newSpeed) {\n const audio = Amplitude.getAudio();\n if (audio && !isNaN(audio.duration)) {\n audio.playbackRate = newSpeed;\n speedButton.innerText = `${newSpeed}x`;\n }\n }\n\n function toggleSpeed() {\n currentSpeedIndex = (currentSpeedIndex + 1) % speeds.length;\n setSpeed(speeds[currentSpeedIndex]);\n }\n\n speedButton.addEventListener('click', (e) => {\n e.preventDefault();\n toggleSpeed();\n });\n\n speedButton.addEventListener('touchstart', (e) => {\n e.preventDefault();\n toggleSpeed();\n });\n\n setSpeed(speeds[currentSpeedIndex]);\n\n document.querySelector('.amplitude-progress-container').addEventListener('click', function(e) {\n const width = this.offsetWidth;\n const offsetX = e.offsetX;\n const percent = offsetX \/ width;\n const audio = Amplitude.getAudio();\n audio.currentTime = percent * audio.duration;\n });\n\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<\/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 1x<\/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-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/16","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=16"}],"version-history":[{"count":35,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":190,"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/190"}],"wp:attachment":[{"href":"https:\/\/sons.elson.media\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}