Question

我们进行编码，音频播放完毕后，我们需要再次显示播放按钮。现在完成音频播放后，仅显示暂停按钮即可解决此问题。而且我还添加了下载音频按钮，以便用户下载该音频。

window.addEventListener('load', function(){
            var myAudio = document.getElementById("myAudio");
            
            
            myAudio.onplaying = function() {
              isPlaying = true;
            };
            myAudio.onpause = function() {
              isPlaying = false;
            };
        });
        
        var isPlaying = false;
        var button  = document.getElementById("play-pause-btn");
        function togglePlay() {
            if (isPlaying) {
                myAudio.pause()
                button.classList.remove("fa-pause-circle-o");
               button.classList.add("fa-play-circle-o");
                
            } else {
                myAudio.play();
                button.classList.add("fa-pause-circle-o");
               button.classList.remove("fa-play-circle-o");
            }
          
        }

.d-table {
  display:table !important;
}

.d-table-cell {
  display:table-cell !important;
}

.w-100 {
  width: 100% !important;
}


.tar {
  text-align: left !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
  <div class="d-table-cell tar w-10">
 <audio id="myAudio" src="https://drive.google.com/uc?export=download&id=1Vug3C2rR1Mnpi1idxRvxZ6X0szsMf-o-" preload="auto"></audio> 
   <a onClick="togglePlay()" id="audio-btn"><button> <i id="play-pause-btn" class="fa fa-play-circle-o fa-2x"></i></button></a>
  </div>
</div>

Answer 1

您只需要使用onended事件。

window.addEventListener('load', function(){
            var myAudio = document.getElementById("myAudio");
            
            
            myAudio.onplaying = function() {
              isPlaying = true;
            };
            myAudio.onpause = function() {
              isPlaying = false;
            };
            myAudio.onended = function(){
             var button  = document.getElementById("play-pause-btn");
               button.classList.remove("fa-pause-circle-o");
               button.classList.add("fa-play-circle-o");
            }
        });
        
        var isPlaying = false;
        var button  = document.getElementById("play-pause-btn");
        function togglePlay() {
            if (isPlaying) {
                myAudio.pause()
                button.classList.remove("fa-pause-circle-o");
               button.classList.add("fa-play-circle-o");
                
            } else {
                myAudio.play();
                button.classList.add("fa-pause-circle-o");
               button.classList.remove("fa-play-circle-o");
            }
          
        }

.d-table {
  display:table !important;
}

.d-table-cell {
  display:table-cell !important;
}

.w-100 {
  width: 100% !important;
}


.tar {
  text-align: left !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
  <div class="d-table-cell tar w-10">
 <audio id="myAudio" src="https://drive.google.com/uc?export=download&id=1Vug3C2rR1Mnpi1idxRvxZ6X0szsMf-o-" preload="auto"></audio> 
   <a onClick="togglePlay()" id="audio-btn"><button> <i id="play-pause-btn" class="fa fa-play-circle-o fa-2x"></i></button></a>
  </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/Events/ended

音频结束，然后再次显示播放按钮图标

1 个答案: