Добавляет кнопки перемотки на 10 секунд

src/pages/episode.njk

@@ -33,13 +33,21 @@ eleventyComputed:
             </section>
         </header>
 
-        <audio
-            class="podcast__player"
-            src="{{ episode.audio }}"
-            controls
-            type="audio/mpeg"
-            preload="metadata">
-        </audio>
+        <div class="podcast__player player">
+            <button class="player__rewind player__rewind--back" aria-label="Назад на 10 секунд">
+                <svg class="player__icon" viewBox="0 0 900 900" width="40" height="40"><path d="M150 450a300 300 0 1 0 300-300H350V25L200 175l150 150V200h100a250 250 0 1 1-250 250h-50Z"/><path d="M362.2 354h30.5v196h-38.1V395.7l-45 28.9v-37.3l52.6-33.3Zm70.7 98c0-62.7 27.4-101.4 77.8-101.4s77.9 38.7 77.9 101.4-27.5 101.4-77.9 101.4c-50.4 0-77.8-38.7-77.8-101.4Zm38 0c0 46.2 15.5 70.6 39.8 70.6 24.4 0 40-24.4 40-70.6 0-46.2-15.6-70.6-40-70.6-24.3 0-39.7 24.4-39.7 70.6Z"/></svg>
+            </button>
+            <button class="player__rewind player__rewind--forward" aria-label="Вперёд на 10 секунд">
+                <svg class="player__icon" viewBox="0 0 900 900" width="40" height="40"><path d="M750 450a300 300 0 1 1-300-300h100V25l150 150-150 150V200H450a250 250 0 1 0 250 250h50Z"/><path d="M362.2 354h30.5v196h-38.1V395.7l-45 28.9v-37.3l52.6-33.3Zm70.7 98c0-62.7 27.4-101.4 77.8-101.4s77.9 38.7 77.9 101.4-27.5 101.4-77.9 101.4c-50.4 0-77.8-38.7-77.8-101.4Zm38 0c0 46.2 15.5 70.6 39.8 70.6 24.4 0 40-24.4 40-70.6 0-46.2-15.6-70.6-40-70.6-24.3 0-39.7 24.4-39.7 70.6Z"/></svg>
+            </button>
+            <audio
+                class="player__audio"
+                src="{{ episode.audio }}"
+                controls
+                type="audio/mpeg"
+                preload="metadata"
+            ></audio>
+        </div>
 
         {% if hasChapters %}
             <section class="podcast__timecode">

src/scripts/modules/podcast.js

@@ -1,4 +1,6 @@
-const player = document.querySelector('.podcast__player');
+const player = document.querySelector('.player__audio');
+const backButton = document.querySelector('.player__rewind--back');
+const forwardButton = document.querySelector('.player__rewind--forward');
 
 /**
  * Выделяет из строки временные метки вида `00:14:30` или `14:30`.
@@ -60,3 +62,23 @@ if (player) {
     }
     initAnchor();
 }
+
+backButton.addEventListener('click', () => {
+    rewindAudio(-10);
+});
+
+forwardButton.addEventListener('click', () => {
+    rewindAudio(10);
+});
+
+/** Перемотка аудио назад на `seconds` секунд
+ * @param seconds количество секунд
+ */
+function rewindAudio(seconds) {
+    if (player.duration && !isNaN(player.duration)) {
+        const currentTime = player.currentTime;
+        const targetTime = currentTime + seconds;
+
+        player.currentTime = targetTime;
+    }
+}

src/styles/blocks/player.css

@@ -0,0 +1,35 @@
+.player {
+    display: grid;
+    grid-template-columns:
+        min-content
+        min-content
+        1fr;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+}
+
+.player__rewind {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.player__icon {
+    display: block;
+    margin: auto;
+}
+
+.player__audio {
+    width: 100%;
+    height: 40px;
+    margin-left: 12px;
+    border-radius: 20px;
+    filter: drop-shadow(
+        2px 2px 4px rgba(0, 0, 0, 0.2)
+    );
+}

src/styles/blocks/podcast.css

@@ -99,12 +99,6 @@
     top: 16px;
     z-index: 1;
     grid-column: 1 / -1;
-    width: 100%;
-    height: 40px;
-    border-radius: 20px;
-    filter: drop-shadow(
-        2px 2px 4px rgba(0, 0, 0, 0.2)
-    );
 }
 
 .podcast__timecode {

src/styles/styles.css

@@ -27,6 +27,7 @@
 @import 'blocks/video.css';
 @import 'blocks/tooltip.css';
 @import 'blocks/not-found.css';
+@import 'blocks/player.css';
 @import 'blocks/podcast.css';
 @import 'blocks/podcast-preview.css';
 @import 'blocks/podcast-preview-grid.css';