如何在 HTML5 音频中播放特定的开始和结束持续时间？答案

【问题标题】：How to play specific start and end duration in HTML5 audio?如何在 HTML5 音频中播放特定的开始和结束持续时间？
【发布时间】：2017-06-02 14:56:29
【问题描述】：

我的音频持续时间是 5 分钟 = 5:00，但是听整个音频太长了，所以我得到了一个标签，例如从 2:00 分钟到 3:00 分钟，所以我想要要做的是在 HTML5 音频中播放标签，这意味着从 2:00 分钟到 3:00 分钟播放。

Here is what I found how to play the start duration

$('#audio').bind('canplay', function() {
  this.currentTime = 29; // jumps to 29th secs
});

更新

这是我的代码

 <audio id="audio" controls="controls" class="span4">
  <source src="file/test.mp3" type="audio/ogg">
  <source src="file/test.mp3" type="audio/mpeg">
  <source src="file/test.mp3" type="audio/wav">
  Your browser does not support the audio element. Please try other browser
</audio>

这是我的标签示例

AJAX

$('.start_tag').click(function() {
    var sec =  $(this).attr('data-id');
    var file =  $(this).attr('data-file');
    show_tag(sec,file);
});

function show_tag(sec,file)
{
    $.ajax({
        type: "POST",
        url: config.base_url + 'index.php/qm/show_tag',
        data : {
            sec : sec,
            file : file,
        },
        success : function(data) {
            $('.show_tag').empty().append(data);
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
        }
    });

}

Ajax 发布数据

  function show_tag()
    {
        $sec = $this->input->post('sec');
        $record_filename = $this->input->post('file');
        $table = '<h4 style="margin-left:31px;">Tagged File</h4>';
        $table .= '<audio id="audio" controls="controls" class="span4 video1">';
        $table .= '<source src="'.base_url().'file/'.$record_filename.'" type="audio/ogg">';
        $table .= '<source src="'.base_url().'file/'.$record_filename.'" type="audio/wav">';
        $table .= '<source src="'.base_url().'file/'.$record_filename.'" type="audio/mpeg">';
        $table .= 'Your browser does not support the audio element. Please try other browser';
        $table .= '</audio>';
        $table .= '<script>';
        $table .= "$('#audio').bind('canplay', function() {";
        $table .= 'this.currentTime = '.$sec.';';
        $table .= '}); </script>';

/*      $table .= '<script>';
        $table .= "$('#audio').bind('timeupdate', function() {";
        $table .= ' if (this.currentTime >= '.$sec.') this.pause();';
        $table .= '}); </script>';
         */

        echo $table;
    }

我所做的是当点击开始标签时，它将转到当前音频时间

【问题讨论】：

标签： javascript html audio

【解决方案1】：

您可以收听timeupdate 事件并在当前时间达到 3 分钟后暂停视频。

$('#audio').bind('timeupdate', function () {
    if (this.currentTime >= 180) this.pause();
}

以下是您可以在媒体元素上侦听的事件列表： MDN

【讨论】：

使用>= 180 可能更好，因为该数字是一个浮点数，这意味着由于舍入错误，它不确定它是否会恰好是 180。
嗨，Sacho，我试过你的代码后，3:00 后没有暂停，你知道为什么吗？
查看 Ken 的评论和修改后的代码。除此之外，您需要发布代码示例。