Add files via upload

2023-05-21 02:58:05 +02:00
commit 875c542498
2 changed files with 223 additions and 0 deletions
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Meta-tags -->
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Codeathon - Audio Spectrum</title>
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
+          integrity="sha384-HzXlPFaARmAWL1Uk1OIr5m2P6wNf6n5wwSFs5PZsO6A6p0FjV+6g7x1yJwO0wwp/"
+          crossorigin="anonymous"
+    />
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="assets/css/style.css" />
+  </head>
+  <body>
+    <header>
+        <nav>
+          <ul>
+            <li><a class="nav-text" href="index.html">Accueil</a></li>
+            <li><a class="nav-text" href="a-propos.html">À Propos</a></li>
+          </ul>
+        </nav>
+      </header>
+      
+    <div class="container">
+      <!-- Audio controls -->
+      <div class="row">
+        <div class="col-md-12">
+          <!-- Glitch effect -->
+          <div class="cdc-container glitch-text">
+            <div class="cdc-left">
+              <div class="cdc-text">CULTE DU CODE</div>
+            </div>
+            <div class="cdc-right">
+              <div class="cdc-text">CULTE DU CODE</div>
+            </div>
+          </div>
+          
+<!-- Dropzone -->
+<div id="dropzone" class="dropzone">
+    <h2 class="text-center">Glisser-déposer le fichier audio ici</h2>
+    <p class="text-center">ou double-cliquez pour sélectionner le fichier</p>
+    <input id="file-input" type="file" accept="audio/*" />
+  </div>
+  <div style="height: 20px;"></div>
+  
+  <!-- Playback controls -->
+  <div class="row mt-5">
+    <div class="col-md-12">
+      <div class="text-center playback-controls">
+        <button id="play-btn" class="btn btn-primary btn-lg mr-3" disabled>
+          <i class="fas fa-play"></i> Play
+        </button>
+        <button id="pause-btn" class="btn btn-primary btn-lg mr-3" disabled>
+          <i class="fas fa-pause"></i> Pause
+        </button>
+        <button id="stop-btn" class="btn btn-primary btn-lg mr-3" disabled>
+          <i class="fas fa-stop"></i> Stop
+        </button>
+        <button id="loop-btn" class="btn btn-primary btn-lg" disabled>
+          <i class="fas fa-redo"></i> Loop
+          <span class="loop-status-container">
+            <span id="loop-status"></span>
+          </span>
+        </button>
+      </div>
+      <div class="volume-control">
+        <label for="volume-range">Volume</label>
+        <br>
+        <input type="range" id="volume-range" class="volume-range" min="0" max="1" step="0.01" value="1">
+        <label for="speed-select">Vitesse de lecture :</label>
+        <select id="speed-select" class="speed-select">
+          <option value="0.5">0.5x</option>
+          <option value="1" selected>1x</option>
+          <option value="1.5">1.5x</option>
+          <option value="2">2x</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+<!-- Playback info -->
+<br>
+<div class="text-center mb-5"><h6 id="file-name"></h6></div>
+<div class="text-center mb-5"><h6 id="timer">00:00 / 00:00</h6></div>
+
+<!-- Progress bar -->
+<div id="progress-bar-container">
+  <div id="progress-bar"></div>
+</div>
+
+  <!-- Canvas for visualizer -->
+  <div class="row mt-5">
+    <div class="col-md-12">
+      <canvas id="canvas"></canvas>
+    </div>
+  </div>
+
+  <!-- Audio element -->
+  <audio id="audio" preload="auto"></audio>
+</div> <!-- end of container div -->
+
+<!-- Custom JS -->
+<script src="assets/js/main.js"></script>
+</body>
+</html>