本文详解如何在使用 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 事件钩子、规范音频生命周期管理，并辅以必要的容错与兼容处理，即可构建出专业级、高响应度的音频增强型翻页体验。
