开发者社区> 问答> 正文

VOD-视频点播使用audio播放器,暂停状态下拖动进度条再点击开始播放,进度条会自动回到0怎么搞?

VOD-视频点播使用audio播放器,暂停状态下拖动进度条,再点击开始播放,进度条会自动回到0,从0开始,怎么处理?https://outin-5a4d11b5efc111ed8e6e00163e1a65b6.oss-cn-shanghai.aliyuncs.com/sv/4c1862d7-1888f62925d/4c1862d7-1888f62925d.mp3?Expires=1686048646&OSSAccessKeyId=LTAIVVfYx6D0HeL2&Signature=SpimlxP1QXmw0ad4bUFP7OnIyWU%3D9ea09a6145d5e6f89833987739f9c996.png

展开
收起
三分钟热度的鱼 2023-06-12 20:29:52 138 0
2 条回答
写回答
取消 提交回答
  • 在使用 VOD-视频点播 的 audio 播放器时,您遇到的这个问题可能是由于进度条逻辑错误所导致的。具体而言,当您在暂停状态下拖动进度条,再点击开始播放时,如果您没有正确记录当前播放位置,那么 audio 播放器会从文件的起始位置开始播放,导致进度条回到 0。

    为了解决这个问题,您可以在暂停状态下记录当前播放位置,然后在继续播放时将其传递给播放器,让播放器从该位置继续播放。具体而言,您可以在 onPause 方法中记录当前播放位置,并在 onResume 方法中根据该位置设置播放的起始位置。例如:

    private int mLastPosition = 0;

    @Override protected void onPause() { super.onPause(); mLastPosition = mAliPlayer.getCurrentPosition(); mAliPlayer.pause(); }

    @Override protected void onResume() { super.onResume(); mAliPlayer.seekTo(mLastPosition); mAliPlayer.start(); }

    在上述代码中,我们在 onPause 方法中记录了当前的播放位置,并暂停播放器。在 onResume 方法中,我们通过 seekTo 方法将播放器跳转到上次记录的位置,然后重新播放。这样,在拖动进度条后再点击播放按钮时,播放器就会从正确的位置开始播放,不会出现进度条自动回到 0 的问题。

    2023-06-13 08:49:18
    赞同 展开评论 打赏
  • 这个问题可能是由于在点击开始播放后,未能正确的从拖动的进度开始播放音频文件,导致进度条回到0的情况。解决这个问题可以尝试以下几个步骤:

    1、确保在暂停状态下拖动进度条时已经能够正确地获取到当前拖动到的时间点。

    2、在点击开始播放时,将音频的播放位置设置为上一步获取到的时间点,而不是从头开始播放。

    3、确保音频播放器已经正确地加载了音频文件,并且已经可以正确地获取到音频文件的总时长。

    4、在进度条的UI更新时,需要将进度条的当前值设置为音频文件的当前播放位置,而不是始终设置为0。

    5、在设置音频播放位置时,需要注意确保设置的时间点不超过音频文件的总时长。

    以下是示例代码,用于展示如何在Web Audio API中实现上述步骤:

    const audioContext = new AudioContext();
    const audioElement = document.getElementById('audio-element');
    const sourceNode = audioContext.createMediaElementSource(audioElement);
    const gainNode = audioContext.createGain();
    sourceNode.connect(gainNode);
    gainNode.connect(audioContext.destination);
    
    // 获取音频文件的总时长
    const duration = audioElement.duration;
    
    // 拖动进度条时设置音频播放位置
    function setPlaybackPosition(time) {
      if (time <= duration) {
        audioElement.currentTime = time;
      }
    }
    
    // 点击开始播放时从拖动的位置开始播放
    function startPlayback() {
      audioElement.play();
      const currentTime = getDraggedTime(); // 获取拖动的时间点
      setPlaybackPosition(currentTime); // 设置音频播放位置
    }
    
    // 更新进度条的UI
    function updateProgressBar() {
      const currentTime = audioElement.currentTime;
      const percentComplete = currentTime / duration * 100;
      progressBar.value = percentComplete;
    }
    
    

    上述代码只是示例代码,具体的实现方式可能因不同的应用场景而异。同时,为了使音频播放器在拖动进度条后能正确地播放,可能需要在音频文件的加载和解码等方面进行一些优化。

    2023-06-13 08:15:55
    赞同 展开评论 打赏
来源圈子
更多
收录在圈子:
+ 订阅
问答排行榜
最热
最新

相关电子书

更多
互联网音视频点播业务云上实践 立即下载
《VoD问题排查与实战手册》 立即下载
低代码开发师(初级)实战教程 立即下载