如何在turn.js翻页后播放音频并实现提前翻页停止旧音频？

问题根源 #

你当前代码里调用的gAudio.stop()是错误的——HTML5的Audio对象并没有内置的stop()方法，这会导致代码执行失败，没法终止正在播放的音频。

修正后的代码 #

把停止音频的逻辑换成暂停播放并重置进度，这是模拟“停止”效果的标准操作：

var gAudio = null

function loadApp() {
  // 省略无关代码
  turned: function(event, page, view) {

    disableControls(page);

    $(this).turn('center');

    $('#slider').slider('value', getViewNumber($(this), page));

    if (page == 1) {
      $(this).turn('peel', 'br');
    }

    // 停止当前音频：暂停播放+重置进度到开头
    if (gAudio) {
      gAudio.pause();
      gAudio.currentTime = 0;
      // 可选：如果不需要复用当前音频实例，可直接释放资源
      // gAudio = null;
    }

    // 按需求调整：每2页对应一个音频文件
    const targetAudioPage = Math.floor((page + 1)/2) * 2 - 1; // 计算对应音频的页码（如1、3、5...）
    gAudio = new Audio(`paudio/${targetAudioPage}.mp3`);
    
    // 可选：处理音频加载失败的情况
    gAudio.onerror = function() {
      console.error(`加载失败：paudio/${targetAudioPage}.mp3`);
      gAudio = null;
    };

    gAudio.play();
  },
}

关键说明 #

• pause()：暂停当前音频的播放状态
• currentTime = 0：把播放进度重置到起始位置，确保下次播放从头开始
• 针对你提到的“每2页一个音频”需求，新增了targetAudioPage计算逻辑，避免重复加载同一音频（比如第1、2页共用一个音频文件）
• 增加onerror事件处理，方便排查音频加载失败的问题

额外优化建议 #

• 若部分页面不需要音频，可添加判断逻辑，避免创建不必要的Audio实例
• 对于高频使用的音频，可提前预加载，提升翻页后的播放响应速度
• 可监听音频播放完成事件，实现自动翻页等拓展功能

内容的提问来源于stack exchange，提问作者Massimo Manca