如何在HTML5音频中播放特定的开始和结束时间? [英] How to play specific start and end duration in HTML5 audio?

问题描述

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

I got a audio duration which is 5 minutes = 5:00, but it's too long to listen whole audio, so I got a tag which is from example 2:00 minutes to 3:00 minutes, So what I want to do is play the tag in the HTML5 audio which mean play from 2:00 minutes to 3:00 minutes.

这是我发现如何播放开始时长的方法

$('#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;
    }

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

What I did was when click the start tag, it's will go to the current audio time

推荐答案

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

You can listen to the timeupdate event and pause the video once it has reached a currentTime of 3 minutes.

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

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

Here's a list of events you can listen for on a media element: MDN

这篇关于如何在HTML5音频中播放特定的开始和结束时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！