feat: add optional page-turn sound toggle and refine flipbook UI

public/assets/flipbook-module.js

@@ -2,6 +2,7 @@ const MODULE_SELECTOR = '[data-pdf-flipbook-element="1"]';
 const PDF_MODULE_URL = '/bundles/flipbook/assets/vendor/pdf.min.mjs';
 const PDF_WORKER_URL = '/bundles/flipbook/assets/vendor/pdf.worker.min.mjs';
 const FLIPBOOK_MODULE_URL = '/bundles/flipbook/assets/vendor/flipbook.esm.min.js';
+const TURN_SOUND_URL = '/bundles/flipbook/assets/audio/turn.mp3';
 const INIT_MARKER = 'pdfFlipbookInitialized';
 const BOOTSTRAP_MARKER = '__mummertPdfFlipbookBootstrapBound';
 
@@ -39,6 +40,7 @@ class PdfFlipbookModule {
             ? Math.min(4, Math.max(2, parsedInitialPages))
             : 4;
         this.showNavigation = root.dataset.showNavigation === '1';
+        this.playTurnSoundEnabled = root.dataset.playTurnSound !== '0';
         this.startMode = (root.dataset.startMode === 'spread' || root.dataset.startMode === 'cover')
             ? 'spread'
             : 'center';
@@ -57,6 +59,7 @@ class PdfFlipbookModule {
         this.renderInProgress = false;
         this.resizeTimer = null;
         this.touchStart = null;
+        this.turnSound = this.playTurnSoundEnabled ? this.createTurnSound() : null;
         this.aspectRatio = 1.4142;
         this.pageWidth = 0;
         this.pageHeight = 0;
@@ -185,11 +188,30 @@ class PdfFlipbookModule {
             width: '100%',
             height: `${this.pageHeight}px`,
             onPageTurn: () => {
+                this.playTurnSound();
                 this.queuePages(this.getLazyCandidates());
             },
         });
     }
 
+    createTurnSound() {
+        const audio = new Audio(TURN_SOUND_URL);
+        audio.preload = 'auto';
+
+        return audio;
+    }
+
+    playTurnSound() {
+        if (!this.playTurnSoundEnabled || !this.turnSound) {
+            return;
+        }
+
+        this.turnSound.currentTime = 0;
+
+        this.turnSound.play().catch(() => {
+        });
+    }
+
     bindKeyboard() {
         this.root.addEventListener('pointerdown', () => {
             this.root.focus();