Question

我希望能够拥有可以播放较大文件的某些音频范围的按钮。类似的东西：

<button onclick="playClip('http://blah/source1.mp3', 2.5, 3.0, 1.0)">Play clip 1</button>
<button onclick="playClip('http://blah/source2.mp3', 10.0, 2.0, 0.5)">Play clip 2 slow</button>

其中playClip有这样的模式：

function playClip(src, startOffset, length, rate) {
  // What to put here?
}

或者代替长度，结束偏移。

有人可以指出可以做到这一点的代码，还是帮我写出来？我能找到的最接近的是https://gist.github.com/remy/753003/download#但是我需要不同大小的剪辑，可能是不同的文件，并且指定了播放速率。我担心我对Javascript的经验有限。

我正在尝试替换执行此操作的Silverlight应用程序。

感谢。

-John

Answer 1

使用Media Fragments URI语法：

var src,
    startOffset,
    endOffset,
    playbackRate,
    audio = new Audio(src + '#t=' + startOffset + ',' + endOffset);

audio.onloadedmetadata = function() {
  audio.playbackRate = playbackRate;
  audio.play();
};

或timeupdate事件：

var audio = new Audio( ... ),
    startOffset,
    endOffset,
    playbackRate;

audio.onloadedmetadata = function() {
  audio.playbackRate = playbackRate;
  audio.currentTime = startOffset;
  audio.play();
};

audio.ontimeupdate = function() {
  if (audio.currentTime >= endOffset) {
    audio.pause();
  }
};

参考文献：

Answer 2

这里是我的代码（包括ontimeupdate的死代码）。基本上我提供了三对普通/慢速功能，一对用于播放整个文件，一对用于顺序播放多个音频文件，一个用于文件中的段：

var jt_audioControl;
var jt_audioFiles;
var jt_audioFileIndex;
var jt_audioFile;
var jt_audioStartTime;
var jt_audioEndTime;
var jt_audioPlaybackRate;
var jt_audioTimeoutHandle;

function jt_onAudioTimeUpdate() {
    if (jt_audioEndTime > 0.0) {
        if (jt_audioControl.currentTime >= jt_audioEndTime) {
            //alert('stopped: jt_audioControl.currentTime = ' + jt_audioControl.currentTime + ' jt_audioEndTime = ' + jt_audioEndTime);
            jt_audioControl.pause();
            //jt_audioStartTime = jt_audioEndTime = 0.0;
        }
    }
}

function jt_onAudioLoaded() {
    jt_audioControl.pause();
    jt_audioControl.currentTime = jt_audioStartTime;
    jt_audioControl.defaultPlaybackRate = jt_audioPlaybackRate;
    jt_audioControl.playbackRate = jt_audioPlaybackRate;
    jt_audioControl.play();
    var timeout = (jt_audioEndTime - jt_audioStartTime) * 1000;
    //alert('jt_audioEndTime = ' + jt_audioEndTime + ', timeout = ' + timeout);
    if (jt_audioEndTime > 0.0) {
        jt_audioTimeoutHandle = setTimeout(jt_stopAudio, timeout);
        //alert('jt_audioTimeoutHandle = ' + jt_audioTimeoutHandle);
    }
    else if (jt_audioTimeoutHandle != null) {
        clearTimeout(jt_audioTimeoutHandle);
        jt_audioTimeoutHandle = null;
    }
}

function jt_onAudioEnded() {
    //alert('ended called');
    if (jt_audioFiles == null)
        return;
    jt_audioFileIndex = jt_audioFileIndex + 1;
    if (jt_audioFileIndex < jt_audioFiles.length) {
        jt_audioFile = jt_audioFiles[jt_audioFileIndex];
        jt_audioControl.src = jt_audioFile;
    }
    else {
        jt_audioControl.pause();
        jt_audioFiles = null;
        jt_audioFileIndex = 0;
    }
}

function jt_createAudio(url) {
    if (jt_audioControl == null) {
        jt_audioFile = url;
        jt_audioControl = new Audio();
        // The ontimeupdate handler seems to be called unreliably, so we'll use
        // setTimeout instead in the onloadedmetadata handler.
        //jt_audioControl.ontimeupdate = jt_onAudioTimeUpdate;
        jt_audioControl.onloadedmetadata = jt_onAudioLoaded;
        jt_audioControl.onended = jt_onAudioEnded;
        jt_audioControl.src = url;
        // We'll let the onloadedmetadata call play once loaded.
    }
    else if (jt_audioFile != url) {
        jt_audioFile = url;
        jt_audioControl.src = url;
    }
    else {
        jt_onAudioLoaded();
    }
}

function jt_playAudioFile(url) {
    jt_audioFiles = null;
    jt_audioFileIndex = 0;
    jt_audioStartTime = 0.0;
    jt_audioEndTime = 0.0;
    jt_audioPlaybackRate = 1.0;
    jt_createAudio(url);
}

function jt_playSlowAudioFile(url) {
    jt_audioFiles = null;
    jt_audioFileIndex = 0;
    jt_audioStartTime = 0.0;
    jt_audioEndTime = 0.0;
    jt_audioPlaybackRate = 0.5;
    jt_createAudio(url);
}

function jt_playAudioFileList(urls) {
    jt_audioFiles = urls;
    jt_audioFileIndex = 0;
    jt_audioStartTime = 0.0;
    jt_audioEndTime = 0.0;
    jt_audioPlaybackRate = 1.0;
    if ((urls != null) && (urls.length > 0)) {
        jt_createAudio(urls[0]);
    }
}

function jt_playSlowAudioFileList(urls) {
    jt_audioFiles = urls;
    jt_audioFileIndex = 0;
    jt_audioStartTime = 0.0;
    jt_audioEndTime = 0.0;
    jt_audioPlaybackRate = 0.5;
    if ((urls != null) && (urls.length > 0)) {
        jt_createAudio(urls[0]);
    }
}

function jt_playAudioFileSegment(url, startTime, endTime) {
    jt_audioFiles = null;
    jt_audioFileIndex = 0;
    jt_audioStartTime = startTime;
    jt_audioEndTime = endTime;
    jt_audioPlaybackRate = 1.0;
    jt_createAudio(url);
}

function jt_playSlowAudioFileSegment(url, startTime, endTime) {
    jt_audioFiles = null;
    jt_audioFileIndex = 0;
    jt_audioStartTime = startTime;
    jt_audioEndTime = endTime;
    jt_audioPlaybackRate = 0.5;
    jt_createAudio(url);
}

function jt_stopAudio() {
    if (jt_audioControl != null)
        jt_audioControl.pause();
}

在html5中播放音频范围

2 个答案: