播放音频的定义部分

Question

我有一个文本，并希望通过单击它来播放只有句子。

<p class="sent hover 00 06">text 01</p> 
<p class="sent hover 06 11">text 02</p> 
<p class="sent hover 11 18">text 03</p> 
<audio controls id="audioB"><source src="lev01/english.mp3" type="audio/mpeg"></audio> 

JS

$(document).on("click", ".sent", function() { 
    var a=$(this).attr("class").split(" ")[2]; 
    var b=$(this).attr("class").split(" ")[3]; 
    //$("#audioB")[0].pause(); 
    $("#audioB")[0].currentTime = a; 
    $("#audioB")[0].play(); 
    $("#audioB")[0].addEventListener('timeupdate', function(){ 
    if ($("#audioB")[0].currentTime >= b) { 
    $("#audioB")[0].pause(); 
    } 
}, false); 
}); 

如果我点击任何一句话，之后点击句话之前，它的工作原理。

但是，在反之亦然的情况下，即如果我点击放置在先前点击的句子之后它不起作用。

任何帮助？

Answer 1

首先在HTML移动数据到属性意味着持有数据

<p class="sent hover" data-audiostart="00" data-audioend="06">text 01</p> 
<p class="sent hover" data-audiostart="06" data-audioend="11">text 02</p> 
<p class="sent hover" data-audiostart="11" data-audioend="18">text 03</p> 
<audio controls id="audioB"><source src="lev01/english.mp3" type="audio/mpeg"></audio> 

然后，你需要在一个变量（例如end）持有的时间停止播放创建一个封闭这是...

• 访问事件处理程序timeupdate个事件，以查看是否应该暂停播放
• 由功能修改，该功能还设置了currentTime并播放音频文件（该功能是我们从闭合返回并用于播放我们感兴趣的音频片段）

例如，<audio>存在后，运行下面的代码

// init 
var playSegment = (function (audio) { // closure by IIFE 
    var end; // our variable 

    audio.addEventListener('timeupdate', function (e) { // handler to pause playback 
     if (this.currentTime >= end) { 
      this.pause(); 
     } 
    }); 

    return function (start_time, end_time) { // function to start playback 
     audio.currentTime = start_time; 
     end = end_time; 
     audio.play(); 
    }; 
}(document.getElementById('audioB'))); // invoking IIFE with the <audio> 

// usage 
$(document).on('click', '.sent', function() { 
    playSegment(
     parseFloat(this.dataset['audiostart']), // time lookups 
     parseFloat(this.dataset['audioend']) 
    ); 
});