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/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>