HTML5 音频元素正在重新启动而不是使用 play()、pause() 恢复

Question

我正在尝试创建一个在另一个 div 中显示播放器的播放器，并从“a”属性中获取 HTML5 音频元素的 src，一切正常，但是当我暂停时音频然后再次播放，而不是恢复它重新启动音频。

这是我的代码：

var clicked_id;
var audio_var = new Audio();
var audio_pbar= document.getElementById('pbar');
audio_var.muted=true;

$('.ppbutton').on("click",function(){
  var datasrc = $(this).attr('data-src');
  clicked_id= $(this).attr('id');
  console.log(clicked_id);
  audio_var.pause();
  audio_pbar.pause();
  
  $('.ppbutton').not(this).each(function(){
      $(this).removeClass('fa-pause');
       $(this).addClass('fa-play');
  });
  
  if($(this).hasClass('fa-play')){
     console.log('play_click');
     audio_var.src=datasrc;
    audio_pbar.src=datasrc;
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     console.log(audio_var);
     audio_var.play();
    audio_pbar.play();
   } else {
     console.log('pause_click');
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     console.log(audio_var);
     audio_var.pause();
     audio_pbar.pause();
     //audio_var.src='';
     //audio_var.load();
     console.log(audio_var);
   }

  audio_var.onended = function() {
     $("#"+clicked_id).removeClass('fa-pause');
     $("#"+clicked_id).addClass('fa-play');
  };
  audio_pbar.onended = function() {
     $("#"+clicked_id).removeClass('fa-pause');
     $("#"+clicked_id).addClass('fa-play');
  };
  });

.wcontent{
  max-height:65vh;
overflow:scroll;
max-width:800px;
  margin:0 auto;
text-align:center;
}
.talk-wrap{
  max-width:800px;
  margin:0 auto;
  max-height:80px;
}
.wtalk{
  display:flex;
  align-items:center;
justify-content:space-between;
   max-height:80px;
padding:5px 20px;
}
.talk-wrap:nth-child(odd) .wtalk{
background-color:rgba(0,0,0,.1)
}
.ppbutton{
  font-size: 35px;
  cursor: pointer;
}
.material-icons-outlined{
  font-size:30px;
}
.wtime{
  font-size:10px;
  min-width:90px;
}
.wtitle{
  font-size:1vw;
  flex-grow:1;
}
.wshare-icon{
    min-width:70px;
}
@media only screen and (max-width: 600px) {

.material-icons-outlined{
  font-size:30px;
}
.wtime h1{
  font-size:15px;
  min-width:30px;
}
.wtitle{
  font-size:2vw;
  flex-grow:1;
}
.wshare-icon{
    min-width:50px;
   flex-shrink:2;
    flex-grow:0;
}
  .play,
.pause {
    width:25px;
    height: 230px;
    border: 0px;
}
}
#pbar{width:100%;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!---------------------------------start-------->
<div class="wcontent">
<!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton3 music" class="ppbutton fa fa-play" data-src="https://www.ee.columbia.edu/~dpwe/sounds/instruments/flute-C6.wav"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton2" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton3" class="ppbutton fa fa-play" data-src="https://www.ee.columbia.edu/~dpwe/sounds/instruments/flute-C6.wav"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton3" class="ppbutton fa fa-play" data-src="https://www.ee.columbia.edu/~dpwe/sounds/instruments/flute-C6.wav"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton1" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton3" class="ppbutton fa fa-play" data-src="https://www.ee.columbia.edu/~dpwe/sounds/instruments/flute-C6.wav"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton2" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3"></a>
                 </div>
</div>
  <!-------------------------------------------------------talk-------->
<div class="talk-wrap">
                <div class="wtalk">
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">task_alt
                    </span>
                  </div>
                  <div class="wtitle">
                    <h1> This is the Title of talk...                                       </h1> 
                  </div>
                  <div class="wshare-icon material-icons">                                   <span class="material-icons-outlined">share
                    </span>
                  </div>
                  <div class="wtime">
                    <h1>( 4:23 )                                                            </h1>
                  </div>
                  <a id="ppbutton1" class="ppbutton fa fa-play" data-src="https://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3"></a>
                 </div>
</div>
<!---------------------------------end-------->

</div>
<div class="wcontent"> <audio controls controlsList="nodownload" id="pbar"></audio>
  </div>

我正在使用 audio_pbar 变量来声明带有进度条的图层，并使用 audio_var 为没有进度条的播放器声明图层。我不知道我在哪里犯了错误，请帮忙解决这个问题。提前致谢！

Answer 1

问题是当你暂停并再次播放时，你覆盖了音频源。

尝试检查 src 是否存在，是否与暂停前播放的相同。

if(audio_pbar.src !== datasrc) audio_pbar.src=datasrc;

HTML5 音频元素正在重新启动而不是使用 play()、pause() 恢复

HTML5 Audio Element is Restarting instead of Resuming using play(), pause()

javascript

html

audio

html5-audio

pause