Skip to content

Commit

Permalink
Merge pull request #2838 from Vin205/main
Browse files Browse the repository at this point in the history
Added Audio Books
  • Loading branch information
huamanraj authored Aug 10, 2024
2 parents 4f4afb8 + eb2c379 commit 4f77755
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 0 deletions.
169 changes: 169 additions & 0 deletions assets/html/audio.html
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>
Binary file added au1.mp3
Binary file not shown.
4 changes: 4 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -1374,6 +1374,10 @@
<a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
</li>
<li class="dropdown-menu-item">
<a href="./assets/html/audio.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
data-nav-link><i class="ri-price-tag-3-fill"></i>Audio Books</a>
</li>
<li class="dropdown-menu-item">
<a href="./assets/html/read_later.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Read Later</a>
</li>
Expand Down
Binary file added sense-sensibility_01_austen_64kb.mp3
Binary file not shown.

0 comments on commit 4f77755

Please sign in to comment.