查找期间loadmetadata事件后，currentTime设置为不同的值 [英] currentTime set to different value after loadmetadata event during seek

问题描述

我目前正处于冒险之中，我的精神ity可危，我试图在Web应用程序中简单地播放mp3文件.此mp3会逐块加载，以使体验更加灵敏.

I am currently on an adventure with my sanity at stake where I try to simply play an mp3 file on my web-application. This mp3 is loaded chunk-wise in order to make the experience more responsive.

即使MediaSource API的文档非常引人注目，几乎是暴力的，有用的，并且有数百个经过充分解释的示例为救赎铺平了道路，但我发现自己无法使一切正常工作.

Even though the documentation of the MediaSource API is just remarkably, almost violently, useful and hundreds of well explained examples pave the way towards salvation, I find myself not able to make everything work properly.

我面临的最后一个问题是寻求功能.我使用此功能的简单想法是简单地杀死所有活着的东西，将所有东西烧毁并重新恢复.更准确地说，如果用户需要，我会停止机器并开始从头开始播放所有内容，但要有所需的偏移量(以秒为单位).

The last issue I am facing is the seeking-functionality. The simple idea I had for this feature is to simply kill everything that's alive, burn everything down and revive again. To be more precise, if the user seeks, I stop the machinery and start playing everything from scratch, but with the desired offset (in seconds).

一切都可以正常工作，除了最后一件事:currentTime，在将其设置为用户请求的时间后，将其设置为另一个值.

Everything is working so far except one last thing: currentTime, gets set to a different value after I have set it to the time that the user requested.

曲目继续按预期播放，但问题是currentTime是用于为用户可视化曲目中当前位置的内容.

The track continues playing as expected but the problem is that currentTime is what's being used to visualize the current location within the track for the user.

这是事件在用户搜寻前后发生的方式

This is how the events take place before and after the user seeks

[play-click]    <--- User clicks play button
 :
[timeupdate]    currentTime: 00.01
[timeupdate]    currentTime: 00.02
[timeupdate]    currentTime: 00.03
[seek-click]    <--- User seeks, stop() is called and then playFrom(seconds)
[loadstart]     currentTime: 33.33  # This is the (correct) time set in playFrom(seconds)
[loadmetadata]  currentTime: 10.12  # Now the time gets set to this (wrong) value
[seek]          currentTime: 10.12  # The triggered seek event comes in
[seeked]        currentTime: 10.12  
[canplay]       currentTime: 10.12
[playing]       currentTime: 10.12
[timeupdate]    currentTime: 10.13  # Track continues to play correctly but this value is still wrong
 :

这是寻找的方式:

public play(track: Track) {
  this.track = track;
  this.playFrom(0);
}

public seekTo(seconds: number) {
  this.stop();
  this.playFrom(seconds);
}

public stop() {
  this.logger.debug('Stop ..');
  this.sourceBuffer.abort();
  this.audioObj.pause();
  this.removeEvents(this.audioObj, this.audioEvents, this.audioEventsHandler);
  this.audioObj = null;
  this.sourceBuffer = null;
  this.mediaSource = null;
}

现在，playFrom(seconds)方法要比这复杂一些，但是它真正要做的只是重新创建我刚刚销毁的所有内容:

Now, the playFrom(seconds) method is a bit more complicated than that but all it really does is re-create everything that I just destroyed:

private playFrom(seconds: number) {

  this.logger.debug(`Start playing from ${seconds.toFixed(2)} seconds`)

  // [:] (collapsed some less important code here)

  // Create the media source object
  this.mediaSource = new MediaSource();
  this.mediaSource.addEventListener('sourceopen', this.onSourceOpen);

  // Create audio element
  this.audioObj = document.createElement('audio');
  this.audioObj.src = URL.createObjectURL(this.mediaSource);
  this.audioObj.currentTime = seconds;
  this.addEvents(this.audioObj, this.audioEvents, this.audioEventsHandler);

  this.logger.debug(`Object-url: ${this.audioObj.src}`);

  this.state = {currentTime: seconds, playing: true};
}

如何在此处获取正确的当前时间?

How can I get the correct current-time here?

我尝试了另一个尝试，在其中创建和添加新的SourceBuffer到MediaSource并让它从那里播放音频，但是我也做不到.

I tried another idea where I was tring to create and add a new SourceBuffer to the MediaSource and let it play the audio from there but I wasn't able to do that either.

推荐答案

在向媒体元素发出搜索请求时，MediaSource(或媒体元素)报告的持续时间是多少?如果它是无限的，则可能需要使用MSE中的{set，clear} LiveSeekableRange API来告知实现，是否希望让播放器超出当前缓冲的媒体的最高呈现结束时间.另外，您可以设置 MediaSource持续时间，然后再尝试成为有限的东西，但至少要与当前缓冲的最高媒体展示结束时间一样长.

What is the duration reported by the MediaSource (or by the media element) at the time of issuing the seek to the media element? If it is infinite, you may need to use the {set,clear}LiveSeekableRange APIs in MSE to let the implementation know if you wish to let the player seek beyond the currently buffered media's highest presentation end time. Alternatively, you could possibly set the MediaSource duration before seeking to be something finite, but at least as high as the highest currently buffered media presentation end time.

这篇关于查找期间loadmetadata事件后，currentTime设置为不同的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！