fix(html5 audio): can't obtain the duration in some browser

[foamzou]

Issue

When use html5 mode, in some browser, the duration can't be obtained while firing the canplaythrough event.

In the case, the code would end the sound instantly since the seek(0) is at the end(duration = 0). And the song would not be play due to the logic. We should try to obtain the duration.

// End the sound instantly if seek is at the end.
if (seek >= stop) {
  self._ended(sound);
  return;
}

Related Issues

Could check ISSUE1: Xiaomi's browser can't play in the link
https://qdmana.com/2021/06/20210622025155137h.html

Solution

The duration could be obtained once play the song. We can play it in muted and try to obtain the duration a few times.

Stop the play and seek to 0 once obtained the duration.

In my test, the duration could be obtained within 10 ms. The user is completely unaware it.

Reproduction/Testing

Play the any song in browser build-in XiaoMI note 3. But it's not easy to get the real device.

We can set the duration to 0 in _loadListener function, it could be testing as well.

Breaking Changes

None