player

index.html

@@ -101,11 +101,24 @@
       <div class="modal__body" id="modalBody"></div>
 
       <div class="modal__foot">
-        <a class="btn btn--primary" id="modalDownload" href="#" download>
+        <div class="player" id="player">
+          <button type="button" class="player__btn" id="playerToggle" aria-label="Play">
+            <svg class="player__icon player__icon--play" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M8 5.14v13.72a1 1 0 0 0 1.53.85l10.8-6.86a1 1 0 0 0 0-1.7L9.53 4.29A1 1 0 0 0 8 5.14z"/></svg>
+            <svg class="player__icon player__icon--pause" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M7 5h4v14H7zM13 5h4v14h-4z"/></svg>
+          </button>
+          <div class="player__track" id="playerTrack" role="slider" tabindex="0" aria-label="Seek" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+            <div class="player__fill" id="playerFill"></div>
+          </div>
+          <span class="player__time" id="playerTime">0:00 / 0:00</span>
+        </div>
+
+        <button type="button" class="btn btn--primary" id="modalDownload">
           <svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg>
           <span data-i18n="modal.download"></span>
-        </a>
+        </button>
       </div>
+
+      <audio id="audio" preload="metadata"></audio>
     </div>
   </div>