{"id":9491,"date":"2023-04-13T12:12:53","date_gmt":"2023-04-13T10:12:53","guid":{"rendered":"https:\/\/www.ease.fr\/wordpress\/?page_id=9491"},"modified":"2023-07-22T22:51:22","modified_gmt":"2023-07-22T20:51:22","slug":"k7-player","status":"publish","type":"page","link":"https:\/\/www.ease.fr\/wordpress\/k7-player\/","title":{"rendered":"K7 PlayeR"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00a0\u00bb1&Prime; _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb background_image=\u00a0\u00bbhttps:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/CARREAUXPAPERSEAMLESS.jpg\u00a0\u00bb top_divider_style=\u00a0\u00bbclouds2&Prime; top_divider_color=\u00a0\u00bb#0C71C3&Prime; top_divider_height=\u00a0\u00bb200px\u00a0\u00bb bottom_divider_style=\u00a0\u00bbwaves\u00a0\u00bb bottom_divider_color=\u00a0\u00bb#0A4401&Prime; global_colors_info=\u00a0\u00bb{}\u00a0\u00bb background_size=\u00a0\u00bbinitial\u00a0\u00bb background_repeat=\u00a0\u00bbrepeat\u00a0\u00bb][et_pb_row _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_text _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n<h2 style=\"text-align: center;\"><strong>R\u00e9tro K7 \/ Disc_45T mp3 Player v0.7 par DoubletivanChat<\/strong><\/h2>\n<p>[\/et_pb_text][et_pb_code disabled_on=\u00a0\u00bbon|on|off\u00a0\u00bb admin_label=\u00a0\u00bbSOLEILGLOBAL\u00a0\u00bb _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb animation_style=\u00a0\u00bbnone\u00a0\u00bb global_module=\u00a0\u00bb10351&Prime; global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<html><!-- [et_pb_line_break_holder] --><\/p>\n<div class=\"oscillating-image\"><!-- [et_pb_line_break_holder] --><img decoding=\"async\" src=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/SOLEIL-SOURIANT.svg\" alt=\"Soleil\"><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->.oscillating-image {<!-- [et_pb_line_break_holder] -->  width: 10%;<!-- [et_pb_line_break_holder] -->  height: auto;<!-- [et_pb_line_break_holder] -->  position: fixed;<!-- [et_pb_line_break_holder] -->  right: 10px;<!-- [et_pb_line_break_holder] -->  z-index: 9999;<!-- [et_pb_line_break_holder] -->  animation: oscillate 2s ease-in-out infinite, fadeIn 3s ease-in-out forwards;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@keyframes oscillate {<!-- [et_pb_line_break_holder] -->  0% { transform: translate(0, 0); }<!-- [et_pb_line_break_holder] -->  50% { transform: translate(3px, 3px); }<!-- [et_pb_line_break_holder] -->  100% { transform: translate(0, 0); }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->@keyframes fadeIn {<!-- [et_pb_line_break_holder] -->  0% { opacity: 0; }<!-- [et_pb_line_break_holder] -->  90% { opacity: 0; }<!-- [et_pb_line_break_holder] -->  100% { opacity: 1; }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->window.onload = function() {<!-- [et_pb_line_break_holder] -->  var el = document.querySelector('.oscillating-image');<!-- [et_pb_line_break_holder] -->  var initialTop = 10; \/\/ This is the initial 'top' value for your element in percentage<!-- [et_pb_line_break_holder] -->  var rate = 2.5;  \/\/ Higher values will speed up the parallax effect<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  function updatePosition() {<!-- [et_pb_line_break_holder] -->    var scrolledTop = (window.pageYOffset * rate) \/ (document.documentElement.scrollHeight - window.innerHeight);<!-- [et_pb_line_break_holder] -->    el.style.top = (initialTop - (scrolledTop * 100)) + '%';<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Call the function immediately to set the initial position<!-- [et_pb_line_break_holder] -->  updatePosition();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/\/ Then call it again whenever the user scrolls<!-- [et_pb_line_break_holder] -->  window.addEventListener(\"scroll\", updatePosition);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00a0\u00bb1_2,1_2&Prime; _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb1_2&Prime; _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_code _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb animation_style=\u00a0\u00bbbounce\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n<div class=\"content\"><!-- [et_pb_line_break_holder] -->    <img decoding=\"async\" id=\"k7-image\" src=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/K7statique.png\" alt=\"K7 Image\"><!-- [et_pb_line_break_holder] -->    <\/p>\n<div id=\"audio-player\"><!-- [et_pb_line_break_holder] -->        <audio id=\"mp3-audio\" src=\"\" preload=\"metadata\"><\/audio><!-- [et_pb_line_break_holder] -->        <\/p>\n<div id=\"controls\"><!-- [et_pb_line_break_holder] -->            <img decoding=\"async\" id=\"prev-button\" class=\"button\" src=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/PREVIOUS.png\" alt=\"Previous\"><!-- [et_pb_line_break_holder] -->            <img decoding=\"async\" id=\"play-button\" class=\"button\" src=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/PLAY.png\" alt=\"Play\"><!-- [et_pb_line_break_holder] -->            <img decoding=\"async\" id=\"pause-button\" class=\"button\" src=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/PAUSE.png\" alt=\"Pause\"><!-- [et_pb_line_break_holder] -->            <img decoding=\"async\" id=\"stop-button\" class=\"button\" src=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/STOP.png\" alt=\"Stop\"><!-- [et_pb_line_break_holder] -->            <img decoding=\"async\" id=\"next-button\" class=\"button\" src=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/NEXT.png\" alt=\"Next\"><!-- [et_pb_line_break_holder] -->        <\/div>\n<p><!-- [et_pb_line_break_holder] -->    <\/div>\n<p><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->    .content {<!-- [et_pb_line_break_holder] -->        display: flex;<!-- [et_pb_line_break_holder] -->        flex-direction: column;<!-- [et_pb_line_break_holder] -->        justify-content: center;<!-- [et_pb_line_break_holder] -->        align-items: center;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    #k7-image {<!-- [et_pb_line_break_holder] -->        width: 50%;<!-- [et_pb_line_break_holder] -->        max-height: 50vh;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    #audio-player {<!-- [et_pb_line_break_holder] -->        display: flex;<!-- [et_pb_line_break_holder] -->        flex-direction: column;<!-- [et_pb_line_break_holder] -->        align-items: center;<!-- [et_pb_line_break_holder] -->        margin-top: 1rem;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    #controls {<!-- [et_pb_line_break_holder] -->        display: flex;<!-- [et_pb_line_break_holder] -->        justify-content: center;<!-- [et_pb_line_break_holder] -->        align-items: center;<!-- [et_pb_line_break_holder] -->        margin-bottom: 50px; \/* Ajout d'une marge en bas pour d\u00e9caler les boutons de 50 pixels vers le haut *\/<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    .button {<!-- [et_pb_line_break_holder] -->        margin: 0 1rem;<!-- [et_pb_line_break_holder] -->        cursor: pointer;<!-- [et_pb_line_break_holder] -->        width: 50px; \/* Ajustez la taille des boutons si n\u00e9cessaire *\/<!-- [et_pb_line_break_holder] -->        height: 50px;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->    document.addEventListener('DOMContentLoaded', function() {<!-- [et_pb_line_break_holder] -->        const audio = document.getElementById(\"mp3-audio\");<!-- [et_pb_line_break_holder] -->        const k7Image = document.getElementById(\"k7-image\");<!-- [et_pb_line_break_holder] -->        const playButton = document.getElementById(\"play-button\");<!-- [et_pb_line_break_holder] -->        const pauseButton = document.getElementById(\"pause-button\");<!-- [et_pb_line_break_holder] -->        const stopButton = document.getElementById(\"stop-button\");<!-- [et_pb_line_break_holder] -->        const prevButton = document.getElementById(\"prev-button\");<!-- [et_pb_line_break_holder] -->        const nextButton = document.getElementById(\"next-button\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const playlist = [<!-- [et_pb_line_break_holder] -->   \t\t\t\t\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/Fred.mp3\",<!-- [et_pb_line_break_holder] -->          \"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/La-Pastille-_-Quelle-evolution-de-la-vie-sur-terre-.mp3\",<!-- [et_pb_line_break_holder] -->          \"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/Micro-trottoir-de-lettres.mp3\",<!-- [et_pb_line_break_holder] -->            \/\/ Ajoutez d'autres fichiers audio MP3 ici<!-- [et_pb_line_break_holder] -->        ];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        let currentTrackIndex = 0;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const loadTrack = (index) => {<!-- [et_pb_line_break_holder] -->            audio.src = playlist[index];<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const updateImage = () => {<!-- [et_pb_line_break_holder] -->            if (audio.paused) {<!-- [et_pb_line_break_holder] -->                k7Image.src = \"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/K7statique.png\";<!-- [et_pb_line_break_holder] -->            } else {<!-- [et_pb_line_break_holder] -->                k7Image.src = \"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/K7-TRANSPARENT.gif\";<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const playTrack = () => {<!-- [et_pb_line_break_holder] -->            if (audio.paused) {<!-- [et_pb_line_break_holder] -->                audio.play();<!-- [et_pb_line_break_holder] -->                updateImage();<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const pauseTrack = () => {<!-- [et_pb_line_break_holder] -->            if (!audio.paused) {<!-- [et_pb_line_break_holder] -->                audio.pause();<!-- [et_pb_line_break_holder] -->                updateImage();<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const stopTrack = () => {<!-- [et_pb_line_break_holder] -->            audio.pause();<!-- [et_pb_line_break_holder] -->            audio.currentTime = 0;<!-- [et_pb_line_break_holder] -->            updateImage();<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const prevTrack = () => {<!-- [et_pb_line_break_holder] -->            currentTrackIndex--;<!-- [et_pb_line_break_holder] -->            if (currentTrackIndex < 0) {<!-- [et_pb_line_break_holder] -->                currentTrackIndex = playlist.length - 1;<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            loadTrack(currentTrackIndex);<!-- [et_pb_line_break_holder] -->            playTrack();<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        const nextTrack = () => {<!-- [et_pb_line_break_holder] -->            currentTrackIndex++;<!-- [et_pb_line_break_holder] -->            if (currentTrackIndex >= playlist.length) {<!-- [et_pb_line_break_holder] -->                currentTrackIndex = 0;<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->            loadTrack(currentTrackIndex);<!-- [et_pb_line_break_holder] -->            playTrack();<!-- [et_pb_line_break_holder] -->        };<!-- [et_pb_line_break_holder] -->        audio.addEventListener(\"ended\", nextTrack);<!-- [et_pb_line_break_holder] -->        playButton.addEventListener(\"click\", playTrack);<!-- [et_pb_line_break_holder] -->        pauseButton.addEventListener(\"click\", pauseTrack);<!-- [et_pb_line_break_holder] -->        stopButton.addEventListener(\"click\", stopTrack);<!-- [et_pb_line_break_holder] -->        prevButton.addEventListener(\"click\", prevTrack);<!-- [et_pb_line_break_holder] -->        nextButton.addEventListener(\"click\", nextTrack);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        loadTrack(currentTrackIndex);<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][et_pb_column type=\u00a0\u00bb1_2&Prime; _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_code _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n<div class=\"image-container\"><!-- [et_pb_line_break_holder] -->    <img decoding=\"async\" id=\"image-bottom\" src=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/K7_2statique.png\" alt=\"Image 1\"><!-- [et_pb_line_break_holder] -->    <img decoding=\"async\" id=\"image-top\" src=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/K7-CADRE.png\" alt=\"Image 2\"><!-- [et_pb_line_break_holder] --><\/div>\n<p><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->.image-container {<!-- [et_pb_line_break_holder] -->    position: relative;<!-- [et_pb_line_break_holder] -->    width: 50%;<!-- [et_pb_line_break_holder] -->    max-width: 100%;<!-- [et_pb_line_break_holder] -->    margin: 0 auto;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#image-bottom, #image-top {<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    height: auto;<!-- [et_pb_line_break_holder] -->    max-height: 50vh;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->#image-top {<!-- [et_pb_line_break_holder] -->    position: absolute;<!-- [et_pb_line_break_holder] -->    top: 0;<!-- [et_pb_line_break_holder] -->    left: 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->document.addEventListener(\"DOMContentLoaded\", function() {<!-- [et_pb_line_break_holder] -->    const imageBottom = document.getElementById(\"image-bottom\");<!-- [et_pb_line_break_holder] -->    const imageTop = document.getElementById(\"image-top\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const staticImage = \"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/K7_2statique.png\";<!-- [et_pb_line_break_holder] -->    const gifImage = \"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/K7-TRANSPARENT-1.gif\";<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    const clickSound = new Audio(\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/clic.wav\");<!-- [et_pb_line_break_holder] -->    const music = new Audio(\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/Noneedyou-Radio-Edit.mp3\");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    let isPlaying = false;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    imageTop.addEventListener(\"click\", () => {<!-- [et_pb_line_break_holder] -->        if (imageBottom.src === staticImage) {<!-- [et_pb_line_break_holder] -->            imageBottom.src = gifImage;<!-- [et_pb_line_break_holder] -->        } else {<!-- [et_pb_line_break_holder] -->            imageBottom.src = staticImage;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        clickSound.play();<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        if (!isPlaying) {<!-- [et_pb_line_break_holder] -->            music.play();<!-- [et_pb_line_break_holder] -->            isPlaying = true;<!-- [et_pb_line_break_holder] -->        } else {<!-- [et_pb_line_break_holder] -->            music.pause();<!-- [et_pb_line_break_holder] -->            isPlaying = false;<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] -->[\/et_pb_code][et_pb_text _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb min_height=\u00a0\u00bb12px\u00a0\u00bb custom_margin=\u00a0\u00bb-45px|38px||-53px||\u00a0\u00bb animation_style=\u00a0\u00bbfade\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n<h3 style=\"text-align: center;\"><strong>OneClick Player<\/strong><\/h3>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_margin=\u00a0\u00bb|auto|103px|auto||\u00a0\u00bb custom_padding=\u00a0\u00bb0px|||||\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_code _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb text_orientation=\u00a0\u00bbcenter\u00a0\u00bb min_height=\u00a0\u00bb198px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<!DOCTYPE html><!-- [et_pb_line_break_holder] --><html><!-- [et_pb_line_break_holder] --><head><!-- [et_pb_line_break_holder] -->    <title>Image Rotation and Sound<\/title><!-- [et_pb_line_break_holder] -->    <\/p>\n<style><!-- [et_pb_line_break_holder] -->        @keyframes spin {<!-- [et_pb_line_break_holder] -->            0% { transform: rotate(0deg); }<!-- [et_pb_line_break_holder] -->            100% { transform: rotate(360deg); }<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    <\/style>\n<p><!-- [et_pb_line_break_holder] --><\/head><!-- [et_pb_line_break_holder] --><body><!-- [et_pb_line_break_holder] -->    <img loading=\"lazy\" decoding=\"async\" class=\"rotating-image\" src=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/compact-disc.png\" width=\"150\" height=\"150\" data-audio=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/WAVES.mp3\" data-speed=\"20s\"><!-- [et_pb_line_break_holder] -->    <img loading=\"lazy\" decoding=\"async\" class=\"rotating-image\" src=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/disco.png\" width=\"200\" height=\"200\" data-audio=\"https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/No-Babe-no.mp3\" data-speed=\"4s\"><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    <script><!-- [et_pb_line_break_holder] -->        class RotatingImage {<!-- [et_pb_line_break_holder] -->            constructor(element, audioUrl, speed) {<!-- [et_pb_line_break_holder] -->                this.element = element;<!-- [et_pb_line_break_holder] -->                this.isPlaying = false;<!-- [et_pb_line_break_holder] -->                this.audio = new Audio(audioUrl);<!-- [et_pb_line_break_holder] -->                this.speed = speed;<!-- [et_pb_line_break_holder] -->                this.element.addEventListener('click', () => this.rotateAndPlaySound());<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->            rotateAndPlaySound() {<!-- [et_pb_line_break_holder] -->                if (!this.isPlaying) {<!-- [et_pb_line_break_holder] -->                    this.element.style.animation = `spin ${this.speed} linear infinite`;<!-- [et_pb_line_break_holder] -->                    this.element.classList.add('spinning');<!-- [et_pb_line_break_holder] -->                    this.audio.play();<!-- [et_pb_line_break_holder] -->                    this.isPlaying = true;<!-- [et_pb_line_break_holder] -->                } else {<!-- [et_pb_line_break_holder] -->                    this.element.style.animation = '';<!-- [et_pb_line_break_holder] -->                    this.element.classList.remove('spinning');<!-- [et_pb_line_break_holder] -->                    this.audio.pause();<!-- [et_pb_line_break_holder] -->                    this.audio.currentTime = 0;<!-- [et_pb_line_break_holder] -->                    this.isPlaying = false;<!-- [et_pb_line_break_holder] -->                }<!-- [et_pb_line_break_holder] -->            }<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->        document.querySelectorAll('.rotating-image').forEach(element => new RotatingImage(element, element.dataset.audio, element.dataset.speed));<!-- [et_pb_line_break_holder] -->    <\/script><!-- [et_pb_line_break_holder] --><\/body><!-- [et_pb_line_break_holder] --><\/html>[\/et_pb_code][et_pb_text _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb min_height=\u00a0\u00bb91.8px\u00a0\u00bb custom_margin=\u00a0\u00bb-26px|38px||-53px||\u00a0\u00bb animation_style=\u00a0\u00bbfade\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n<h4 style=\"text-align: center;\"><strong>Et aussi la version Compact disc &amp; <\/strong><strong>45T<\/strong><\/h4>\n<p style=\"text-align: center;\"><strong>Cliquez pour lancer<\/strong><\/p>\n<p><strong><\/strong><\/p>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb min_height=\u00a0\u00bb16px\u00a0\u00bb custom_margin=\u00a0\u00bb-54px|38px||-53px||\u00a0\u00bb animation_style=\u00a0\u00bbfade\u00a0\u00bb link_option_url=\u00a0\u00bbhttps:\/\/jsfiddle.net\/Jon_S_Goopple\/4ys1ap70\/14\/\u00a0\u00bb link_option_url_new_window=\u00a0\u00bbon\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n<h5 style=\"text-align: center;\"><span style=\"color: #0000ff;\"><strong>Voir le jsFiddle.net<\/strong><\/span><\/h5>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_margin=\u00a0\u00bb-80px|auto|52px|auto||\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_code _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<script>import WaveSurfer from 'https:\/\/unpkg.com\/wavesurfer.js@7\/dist\/wavesurfer.esm.js'<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const canvas = document.createElement('canvas')<!-- [et_pb_line_break_holder] -->canvas.width = window.innerWidth;<!-- [et_pb_line_break_holder] -->canvas.height = window.innerHeight;<!-- [et_pb_line_break_holder] -->const ctx = canvas.getContext('2d')<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function createGradient(topColor, bottomColor) {<!-- [et_pb_line_break_holder] -->  const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height)<!-- [et_pb_line_break_holder] -->  gradient.addColorStop(0, topColor)<!-- [et_pb_line_break_holder] -->  gradient.addColorStop((canvas.height * 0.7) \/ canvas.height, topColor)<!-- [et_pb_line_break_holder] -->  gradient.addColorStop((canvas.height * 0.7 + 1) \/ canvas.height, '#ffffff') \/\/ White line<!-- [et_pb_line_break_holder] -->  gradient.addColorStop((canvas.height * 0.7 + 2) \/ canvas.height, '#ffffff') \/\/ White line<!-- [et_pb_line_break_holder] -->  gradient.addColorStop((canvas.height * 0.7 + 3) \/ canvas.height, bottomColor)<!-- [et_pb_line_break_holder] -->  gradient.addColorStop(1, bottomColor)<!-- [et_pb_line_break_holder] -->  return gradient;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const wavesurfer = WaveSurfer.create({<!-- [et_pb_line_break_holder] -->  container: '#waveform',<!-- [et_pb_line_break_holder] -->  waveColor: createGradient('#656666', '#B1B1B1'),<!-- [et_pb_line_break_holder] -->  progressColor: createGradient('#EE772F', '#F6B094'),<!-- [et_pb_line_break_holder] -->  barWidth: 2,<!-- [et_pb_line_break_holder] -->  url: 'https:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/WAVES.mp3',<!-- [et_pb_line_break_holder] -->})<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->wavesurfer.on('interaction', () => {<!-- [et_pb_line_break_holder] -->  wavesurfer.playPause()<!-- [et_pb_line_break_holder] -->})<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const hover = document.querySelector('#hover')<!-- [et_pb_line_break_holder] -->const waveform = document.querySelector('#waveform')<!-- [et_pb_line_break_holder] -->if(waveform) {<!-- [et_pb_line_break_holder] -->  waveform.addEventListener('pointermove', (e) => {<!-- [et_pb_line_break_holder] -->    if(hover) {<!-- [et_pb_line_break_holder] -->      hover.style.width = `${e.offsetX}px`<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->  })<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const formatTime = (seconds) => {<!-- [et_pb_line_break_holder] -->  const minutes = Math.floor(seconds \/ 60)<!-- [et_pb_line_break_holder] -->  const secondsRemainder = Math.round(seconds) % 60<!-- [et_pb_line_break_holder] -->  return `${minutes}:${String(secondsRemainder).padStart(2, '0')}`<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const timeEl = document.querySelector('#time')<!-- [et_pb_line_break_holder] -->const durationEl = document.querySelector('#duration')<!-- [et_pb_line_break_holder] -->wavesurfer.on('audioprocess', () => {<!-- [et_pb_line_break_holder] -->  if(timeEl) timeEl.textContent = formatTime(wavesurfer.getCurrentTime())<!-- [et_pb_line_break_holder] -->  if(durationEl) durationEl.textContent = formatTime(wavesurfer.getDuration())<!-- [et_pb_line_break_holder] -->})<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb background_color=\u00a0\u00bbrgba(255,255,255,0.6)\u00a0\u00bb module_alignment=\u00a0\u00bbcenter\u00a0\u00bb min_height=\u00a0\u00bb367.4px\u00a0\u00bb custom_margin=\u00a0\u00bb-42px|auto|91px|auto||\u00a0\u00bb animation_style=\u00a0\u00bbfade\u00a0\u00bb border_radii=\u00a0\u00bbon|10px|10px|10px|10px\u00a0\u00bb border_width_all=\u00a0\u00bb13px\u00a0\u00bb border_color_all=\u00a0\u00bbrgba(255,255,255,0.6)\u00a0\u00bb box_shadow_style=\u00a0\u00bbpreset1&Prime; global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_text _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]<\/p>\n<p style=\"text-align: left;\">Le <strong>lecteur MP3<\/strong> est en cours de d\u00e9veloppement, il est sur une base de <strong>HTML<\/strong> <strong>Javascript<\/strong> et <strong>CSS<\/strong>. Le code de la v0.1 est assez simple et nous cherchons \u00e0 mettre plus de fonctionnalit\u00e9s \u00e0 l&rsquo;avenir. La lecture par playlist et d&rsquo;autres choses sont maintenant en place. Les fichiers mp3 utilis\u00e9s dans ce \u00ab\u00a0proof of concept\u00a0\u00bb sont des podcasts de notre amie <strong>Sandra<\/strong> de <strong>Fin de Semaine<\/strong> (l&rsquo;asso sympa) et de la musique perso, pour des raisons de droits d&rsquo;auteur. Moi je voulais mettre du <strong>NTM<\/strong> bref faire une mixtape de gros rap mais je ne peux pas j&rsquo;ai pas le droit . . Sinon ca fonctionne ! Et ca, ben c&rsquo;est g\u00e9nial.<\/p>\n<p style=\"text-align: left;\">Merci \u00e0 <strong>Fin de Semaine<\/strong> et <strong>ChatGPT d&rsquo;OpenAI<\/strong> pour les fichiers audio &amp; la correction du code + assistanat.<\/p>\n<p style=\"text-align: left;\"><strong>\u00a9 Doubletivanchat 2023<\/strong><strong><\/strong><\/p>\n<p>[\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/CAT-1.gif\u00a0\u00bb title_text=\u00a0\u00bbCAT\u00a0\u00bb admin_label=\u00a0\u00bbImage\u00a0\u00bb _builder_version=\u00a0\u00bb4.20.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb width=\u00a0\u00bb18%\u00a0\u00bb custom_margin=\u00a0\u00bb-51px||33px|||\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][et_pb_image src=\u00a0\u00bbhttps:\/\/www.ease.fr\/wordpress\/wp-content\/uploads\/Xbox.png\u00a0\u00bb title_text=\u00a0\u00bbXbox\u00a0\u00bb url=\u00a0\u00bbhttps:\/\/www.xbox.com\/play\/share\/friend\/LFV2ZPWF7X\u00a0\u00bb url_new_window=\u00a0\u00bbon\u00a0\u00bb module_class=\u00a0\u00bbzoom\u00a0\u00bb _builder_version=\u00a0\u00bb4.21.0&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb width=\u00a0\u00bb12%\u00a0\u00bb module_alignment=\u00a0\u00bbright\u00a0\u00bb custom_margin=\u00a0\u00bb-184px|||||\u00a0\u00bb animation_style=\u00a0\u00bbfade\u00a0\u00bb border_radii=\u00a0\u00bbon|10px|10px|10px|10px\u00a0\u00bb border_width_all=\u00a0\u00bb1px\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n<span class=\"et_bloom_bottom_trigger\"><\/span>","protected":false},"excerpt":{"rendered":"<p>R\u00e9tro K7 \/ Disc_45T mp3 Player v0.7 par DoubletivanChatOneClick PlayerEt aussi la version Compact disc &amp; 45T Cliquez pour lancer Voir le jsFiddle.netLe lecteur MP3 est en cours de d\u00e9veloppement, il est sur une base de HTML Javascript et CSS. Le code de la v0.1 est assez simple et nous cherchons \u00e0 mettre plus de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9490,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":""},"class_list":["post-9491","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ease.fr\/wordpress\/wp-json\/wp\/v2\/pages\/9491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ease.fr\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ease.fr\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ease.fr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ease.fr\/wordpress\/wp-json\/wp\/v2\/comments?post=9491"}],"version-history":[{"count":50,"href":"https:\/\/www.ease.fr\/wordpress\/wp-json\/wp\/v2\/pages\/9491\/revisions"}],"predecessor-version":[{"id":10480,"href":"https:\/\/www.ease.fr\/wordpress\/wp-json\/wp\/v2\/pages\/9491\/revisions\/10480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ease.fr\/wordpress\/wp-json\/wp\/v2\/media\/9490"}],"wp:attachment":[{"href":"https:\/\/www.ease.fr\/wordpress\/wp-json\/wp\/v2\/media?parent=9491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}