-
Notifications
You must be signed in to change notification settings - Fork 441
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
173 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,169 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>SwapReads - Custom Audiobook Player</title> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #f4f4f4; | ||
| margin: 0; | ||
| padding: 20px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| } | ||
|
|
||
| .audiobook-container { | ||
| max-width: 600px; | ||
| width: 100%; | ||
| background-color: #fff; | ||
| padding: 20px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | ||
| text-align: center; | ||
| } | ||
|
|
||
| .book-image { | ||
| width: 200px; | ||
| height: 300px; | ||
| background-color: #ddd; | ||
| border-radius: 10px; | ||
| background-size: cover; | ||
| background-position: center; | ||
| margin: 0 auto 20px auto; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 24px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| p { | ||
| color: #555; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .audio-player { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .controls { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 10px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .play-btn { | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 50%; | ||
| width: 50px; | ||
| height: 50px; | ||
| font-size: 24px; | ||
| cursor: pointer; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .progress-container { | ||
| width: 100%; | ||
| background-color: #ddd; | ||
| border-radius: 5px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .progress { | ||
| height: 10px; | ||
| background-color: #4CAF50; | ||
| border-radius: 5px; | ||
| width: 0; | ||
| } | ||
|
|
||
| .time { | ||
| font-size: 14px; | ||
| color: #555; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="audiobook-container"> | ||
| <div class="book-image" style="background-image: url('https://m.media-amazon.com/images/I/71cpVgEK94L._AC_UF1000,1000_QL80_.jpg');"></div> | ||
| <h2>The Great Adventure</h2> | ||
| <p>by John Doe</p> | ||
|
|
||
| <div class="audio-player"> | ||
| <div class="controls"> | ||
| <button class="play-btn" id="playBtn">▶️</button> | ||
| <div class="time" id="currentTime">0:00</div> | ||
| <div class="time">/</div> | ||
| <div class="time" id="durationTime">0:00</div> | ||
| </div> | ||
| <div class="progress-container" id="progressContainer"> | ||
| <div class="progress" id="progress"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <audio id="audio"> | ||
| <source src="audiobook-sample.mp3" type="audio/mpeg"> | ||
| Your browser does not support the audio element. | ||
| </audio> | ||
| </div> | ||
|
|
||
| <script> | ||
| const audio = document.getElementById('audio'); | ||
| const playBtn = document.getElementById('playBtn'); | ||
| const progressContainer = document.getElementById('progressContainer'); | ||
| const progress = document.getElementById('progress'); | ||
| const currentTimeEl = document.getElementById('currentTime'); | ||
| const durationTimeEl = document.getElementById('durationTime'); | ||
|
|
||
| // Play & Pause Audio | ||
| playBtn.addEventListener('click', () => { | ||
| if (audio.paused) { | ||
| audio.play(); | ||
| playBtn.textContent = '⏸️'; | ||
| } else { | ||
| audio.pause(); | ||
| playBtn.textContent = '▶️'; | ||
| } | ||
| }); | ||
|
|
||
| // Update progress bar and time | ||
| audio.addEventListener('timeupdate', () => { | ||
| const { duration, currentTime } = audio; | ||
| const progressPercent = (currentTime / duration) * 100; | ||
| progress.style.width = `${progressPercent}%`; | ||
|
|
||
| // Update current time | ||
| const minutes = Math.floor(currentTime / 60); | ||
| const seconds = Math.floor(currentTime % 60); | ||
| currentTimeEl.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`; | ||
|
|
||
| // Update duration | ||
| const durationMinutes = Math.floor(duration / 60); | ||
| const durationSeconds = Math.floor(duration % 60); | ||
| if (!isNaN(durationMinutes)) { | ||
| durationTimeEl.textContent = `${durationMinutes}:${durationSeconds < 10 ? '0' : ''}${durationSeconds}`; | ||
| } | ||
| }); | ||
|
|
||
| // Set progress bar manually | ||
| progressContainer.addEventListener('click', (e) => { | ||
| const width = progressContainer.clientWidth; | ||
| const clickX = e.offsetX; | ||
| const duration = audio.duration; | ||
|
|
||
| audio.currentTime = (clickX / width) * duration; | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.