Question

我有一个像这样的HTML音频播放器：

<audio  id="audioPlayer" controls>
    <source src="test.mp3">
</audio>

我想显示一些图像同步音频文件，包括用户移动搜索栏时。但是，我找不到检查用户当前是否正在使用音频搜索栏的方法。

我尝试使用timeupdate事件但没有成功：以下代码仅在用户回溯时才有效。

var audioPlayer = document.getElementById('audioPlayer');
var lastUpdateTime;

audioPlayer.addEventListener('timeupdate', function() {update();});

function update() {
    if ( audioPlayer.currentTime - lastUpdateTime < 0 )
       console.log("seeking");
    lastUpdateTime = audioPlayer.currentTime;
}

我正在寻找在“最近的”浏览器上工作的东西（例如IE10 +）。

Answer 1

它有点hacky但有效：

使用jQuery的版本：

var $audio = $( '#myAudio' );
var onPause = false;

// Pause event helps us to know is player playing or not
$audio.on( 'pause', function() {
  onPause = true;

  setTimeout(function() {

      onPause = false;
  });
});

$audio[0].on( 'timeupdate', function(e) {

  // trick to get current pause state
  setTimeout(function(){

     // checks if player paused and not last timeupdate event call
     if ( $audio[0].paused && !onPause ) {

        // Fire event then user is changing seek bar
        $audio.trigger( 'userSeeking' );
      }
  });
});

$audio.on( 'userSeeking', function(){
  // do some magic
});

纯javascript版本：

var audio = document.getElementById( 'myAudio' );
var onPause = false;
var seek = false;

// Pause event helps us to know is player playing or not
audio.addEventListener( 'pause', function(e) {
  onPause = true;

  setTimeout(function() {

      onPause = false;
  });
});

audio.addEventListener( 'timeupdate', function(e) {

  // trick to get current pause state
  setTimeout(function(){

     seek = false;

     // checks if player paused and not last timeupdate event call
     if ( $audio[0].paused && !onPause ) {

        seek = true;
        // Fire event then user is changing seek bar
     }

     // or you can return current state of seeking here
  });
});

这是工作示例（使用jQuery版本的codepen）：

http://codepen.io/GomatoX/pen/ZYpWbN

如何检查用户当前是否正在使用音频搜索栏？

1 个答案: