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'])
    );
});

播放音频的已定义部分

1 个答案: