HTML5 Audio跳转指定时间点失效,求有声书章节跳转播放器开发帮助
修复有声书章节跳转音频播放器的问题
你的代码存在几个关键问题,直接导致功能失效:
$(240)是完全错误的写法,这不是合法的jQuery选择器。你需要获取当前点击的.story按钮上的data-start属性,应该用$(this)指代触发点击事件的当前元素。- 从
data-start获取到的是字符串类型值,而音频的currentTime需要数值类型,必须转成数字才能生效。 - 要确保
aud变量确实指向页面中的音频DOM元素,否则会触发未定义错误。
修正后的代码如下:
// 先获取页面中的音频元素,替换成你实际的音频元素ID const aud = document.getElementById('audio-player'); $('.story').on('click', function(){ // 获取当前按钮的章节时间点并转为数字 const targetTime = parseFloat($(this).attr('data-start')); // 校验时间是否有效,避免非法值导致错误 if (!isNaN(targetTime)) { aud.currentTime = targetTime; aud.play(); } });
对应的HTML结构示例(确保按钮和音频元素正确关联):
<!-- 章节按钮,data-start存储对应跳转的秒数 --> <button class="story" data-start="240">跳转到第4分钟</button> <button class="story" data-start="600">跳转到第10分钟</button> <!-- 音频播放器 --> <audio id="audio-player" src="your-audio-file.mp3"></audio>
内容的提问来源于stack exchange,提问作者lpfalc
相关产品推荐
相关产品推荐

