Add Bookmarks for Audiobooks

[khandelwal20sid]

This PR introduces the following features and changes:

Bookmark Functionality:

• A new bookmark feature is added, allowing users to save their current position (timestamp) in the audio player.
• Bookmarks are stored in localStorage and are tied to the specific HTML file (part of the series) and audio file being played.

Bookmark Display:

• If a bookmark exists for the current HTML file and audio, the bookmark icon is displayed as filled when the page is loaded.
• On loading a bookmarked file, the stored timestamp is used to resume playback from where the user last left off.

User Alerts:

• When a bookmark is successfully loaded, an alert is displayed in the format:
  • Loading part3 - 90 secs from bookmark.
• When a new bookmark is saved, the alert displays:
  • Bookmark saved for this book at part3 - 90 seconds..

Unbookmarking:

• If the bookmark button is clicked again when a bookmark already exists, the bookmark is removed from storage and the icon reverts to the unfilled state.

Time Formatting:

• The bookmark time is displayed in the raw seconds format(e.g., 90 secs)

Key Changes:

• Added event listeners for the bookmark icon (.bookmark-btn) to handle the bookmarking and unbookmarking actions.
• Implemented logic to check if a file is bookmarked upon page load and resume playback from the stored timestamp.
• Modified the alert messages to show the audio file name extracted from the URL with time in seconds.
• Adjusted localStorage management to handle bookmarking and unbookmarking states.

How to Test:

• Load any HTML file with audio content and start playback.
• Click the bookmark icon to save the current playback position.
• Refresh the page or navigate away and return to check if the bookmark loads and resumes from the saved position.
• Click the bookmark icon again to remove the bookmark and verify the icon state is updated.

Demo recording:

My.Favorite.Books.Music.App.mp4

[netlify]

✅ Deploy Preview for lisbook ready!

Name	Link
🔨 Latest commit	3f34b2d
🔍 Latest deploy log	https://app.netlify.com/sites/lisbook/deploys/670ade50f42d840008e9a409
😎 Deploy Preview	https://deploy-preview-64--lisbook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[khandelwal20sid]

Hi @Ctoic, good to merge?

[khandelwal20sid]

Hi @Ctoic, I see you closed this issue without merging my changes. If you don't want to proceed with the changes I made, can you please tag this PR with hactoberfest-accepted at least, would be of great help. Thanks!