如何在 turn.js 翻页时精准控制音频播放与暂停

本文详解如何在使用 turn.js 实现电子杂志翻页时，为每页（或每对页）绑定独立音频，并确保翻页过程中旧音频自动暂停、新音频无缝播放，避免声音重叠或残留。

本文详解如何在使用 turn.js 实现电子杂志翻页时，为每页（或每对页）绑定独立音频，并确保翻页过程中旧音频自动暂停、新音频无缝播放，避免声音重叠或残留。

在基于 turn.js 构建的交互式电子杂志中，常需为特定页面（如歌词页、朗读页或配乐页）关联背景音效或语音内容。但若仅在 turned 事件中简单创建并播放 Audio 对象，极易引发多个音频实例并发播放、无法中断前序音频等问题——尤其当用户快速连续翻页时，会出现声音堆叠、内存泄漏甚至浏览器自动静音等异常行为。

核心解决方案在于分离“翻页中”与“翻页完成”两个生命周期阶段，并统一管理音频实例：

• ✅ 在 turning 事件中提前暂停当前正在播放的音频（而非等待翻页结束），确保过渡过程无残留声音；
• ✅ 在 turned 事件中加载并播放目标页对应的新音频，此时页面已稳定呈现，用户体验更自然；
• ✅ 使用单一 audio 变量引用最新音频对象，避免全局污染和引用丢失。

以下是经过生产验证的完整实现逻辑（关键部分已加注释）：

function loadApp() {   $('#canvas').fadeIn(1000);   const flipbook = $('.magazine');   let audio = null; // 声明为块级作用域变量，确保闭包内唯一引用    if (flipbook.width() === 0 || flipbook.height() === 0) {     setTimeout(loadApp, 10);     return;   }    flipbook.turn({     width: 922,     height: 600,     duration: 1000,     gradients: true,     autoCenter: true,     elevation: 50,     pages: 12,     when: {       // 【关键】翻页动画开始时立即暂停当前音频       turning: function(event, page, view) {         if (audio && !audio.paused) {           audio.pause(); // 调用 pause() 而非 stop()（Audio API 无 stop 方法）           audio.currentTime = 0; // 重置播放位置，便于下次复用         }         // 同步更新 URL 和导航状态         Hash.go('page/' + page).update();         disableControls(page);       },        // 【关键】翻页完成后再加载并播放目标页音频       turned: function(event, page, view) {         disableControls(page);         $(this).turn('center');         $('#slider').slider('value', getViewNumber($(this), page));          if (page === 1) {           $(this).turn('peel', 'br');         }          // 动态加载对应页音频（建议按需预加载以提升响应速度）         const audioPath = `paudio/${page}.mp3`;         audio = new Audio(audioPath);          // 添加错误处理，防止因文件缺失导致脚本中断         audio.onerror = function() {           console.warn(`Failed to load audio for page ${page}:`, audioPath);         };          audio.play().catch(err => {           console.warn("Audio play prevented by browser policy (e.g., autoplay blocked):", err);           // 可在此处触发用户手势唤醒提示（如点击按钮解禁）         });       },        missing: function(event, pages) {         for (let i = 0; i < pages.length; i++) {           addPage(pages[i], $(this));         }       }     }   }); }

⚠️ 重要注意事项：

• Audio.prototype.stop() 并非标准 Web API 方法，应统一使用 pause() + currentTime = 0 组合替代；
• 浏览器普遍限制自动播放（autoplay），尤其含音频的页面首次加载时。若遇 play() failed because the user didn’t interact with the document first 错误，请确保首次音频播放由用户显式操作（如点击“开始阅读”按钮）触发，后续翻页可正常调用 play()；
• 为提升性能，建议对高频访问的音频资源进行预加载（如使用 ），避免翻页卡顿；
• 若需支持跨页连续播放（如整首歌曲 spanning 多页），应扩展逻辑：通过 page 计算所属音频 ID，而非直接使用页码，避免文件命名耦合。

综上，通过合理利用 turn.js 的 turning 与 turned 事件钩子、规范音频生命周期管理，并辅以必要的容错与兼容处理，即可构建出专业级、高响应度的音频增强型翻页体验。