first commit with existing project files

2025-07-12 11:17:34 +02:00
commit 96bdccfe9f
8 changed files with 412 additions and 0 deletions
--- a/1-HTMLMediaElement/app.js
+++ b/1-HTMLMediaElement/app.js
@@ -0,0 +1,88 @@
+const audio = document.getElementById('audioPlayer');
+
+const playBtn = document.getElementById('playBtn');
+const pauseBtn = document.getElementById('pauseBtn');
+const resetBtn = document.getElementById('resetBtn');
+
+const currentTimeSpan = document.getElementById('currentTime');
+const totalTimeSpan = document.getElementById('totalTime');
+
+const fileInput = document.getElementById('fileInput');
+const loadFileBtn = document.getElementById('loadFileBtn');
+
+const volume = document.getElementById('volume-slider');
+
+const mediaInfo = document.querySelector('.media-info');
+
+let timer = null;
+
+let fileName;
+let audioSrc;
+
+/* Functions */
+
+function toReadableTime(seconds) {
+    return new Date(seconds * 1000).toISOString().substring(14, 19);
+}
+
+function updateTime() {
+    currentTimeSpan.textContent = toReadableTime(audio.currentTime);
+}
+
+fileInput.addEventListener('change', (event) => {
+    const file = event.target.files[0];
+    if (file) {
+        audioSrc = URL.createObjectURL(file);
+        fileName = file.name.split('.mp3')[0];
+    }
+});
+
+/* Events */
+
+loadFileBtn.addEventListener('click', () => {
+    audio.src = audioSrc;
+    audio.load();
+    mediaInfo.innerText = fileName;
+    updateTime();
+});
+
+audio.addEventListener('loadedmetadata', () => {
+    totalTimeSpan.textContent = toReadableTime(audio.duration);
+});
+
+playBtn.addEventListener('click', () => {
+    audio.play();
+    if (!timer) {
+        timer = setInterval(updateTime, 500);
+    }
+    document.title = `Playing ${fileName}`;
+});
+
+pauseBtn.addEventListener('click', () => {
+    audio.pause();
+});
+
+resetBtn.addEventListener('click', () => {
+    audio.pause();
+    audio.currentTime = 0;
+    updateTime();
+});
+
+audio.addEventListener('ended', () => {
+    clearInterval(timer);
+    timer = null;
+});
+
+audio.addEventListener('pause', () => {
+    clearInterval(timer);
+    timer = null;
+});
+
+volume.addEventListener("input", function (e) {
+    audio.volume = e.currentTarget.value / 100;
+});
+
+volume.addEventListener("dblclick", function (e) {
+    audio.volume = 0.5;
+    e.currentTarget.value = 50;
+});
--- a/1-HTMLMediaElement/index.html
+++ b/1-HTMLMediaElement/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Lecteur Audio HTML5</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
+    <script src="app.js" defer></script>
+</head>
+<body class="bg-light py-5">
+<div class="container">
+    <h1 class="mb-4 text-center">Lecteur Audio</h1>
+
+    <div class="card shadow-sm p-4">
+        <audio id="audioPlayer" src=""></audio>
+
+        <div class="d-flex justify-content-center align-items-center">
+            <h4 class="media-info">Aucun fichier chargé</h4>
+        </div>
+
+        <div class="d-flex justify-content-center gap-3 mb-3">
+            <button id="playBtn" class="btn btn-primary"><i class="bi bi-play-circle"></i></button>
+            <button id="pauseBtn" class="btn btn-warning"><i class="bi bi-pause-circle"></i></button>
+            <button id="resetBtn" class="btn btn-danger"><i class="bi bi-arrow-counterclockwise"></i></button>
+        </div>
+        <div class="d-flex justify-content-center align-items-center mb-3">
+            <input type="range" id="volume-slider">
+        </div>
+
+        <div class="text-center">
+            Temps écoulé : <span id="currentTime">00.00</span> / <span id="totalTime">00.00</span> sec
+        </div>
+    </div>
+
+    <hr>
+
+    <div class="card shadow-sm p-4">
+        <input type="file" id="fileInput" accept="audio/*" class="form-control mb-3">
+        <div class="d-flex justify-content-center">
+            <button id="loadFileBtn" class="btn btn-secondary">Charger un fichier audio</button>
+        </div>
+    </div>
+
+</div>
+</body>
+</html>