如何在手机上播放和暂停按钮隐藏？

Question

我有这个代码，

我想要什么：

1. 此按钮不会在移动设备上显示。
2. 现在它只显示播放按钮，我想在任何用户单击播放按钮时显示暂停按钮。如果音频暂停，则显示播放按钮。意思是在点击时更改图标，并且一次只显示一个图标。
3. 我可以添加带有播放暂停切换按钮的下载音频按钮

提前致谢。

window.addEventListener('load', function(){
            var myAudio = document.getElementById("myAudio");
            
            myAudio.onplaying = function() {
              isPlaying = true;
            };
            myAudio.onpause = function() {
              isPlaying = false;
            };
        });
        
        var isPlaying = false;
        
        function togglePlay() {
            if (isPlaying) {
                myAudio.pause()
            } else {
                myAudio.play();
            }
        }

.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()"><button> <i class="fa fa-play-circle-o fa-2x"></i></button></a>
  </div>
</div>

Answer 1

我已经使用 javascript 添加和删除类来更改播放暂停按钮并使用媒体查询来显示隐藏按钮。

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-play-circle-o");
               button.classList.add("fa-pause-circle");
                
            } else {
                myAudio.play();
                button.classList.add("fa-play-circle-o");
               button.classList.remove("fa-pause-circle");
            }
        }

.d-table {
  display:table !important;
}

.d-table-cell {
  display:table-cell !important;
}

.w-100 {
  width: 100% !important;
}


.tar {
  text-align: left !important;
}

@media (min-width: 374px) { 
#audio-btn{
display:none}
}


@media (min-width: 767.98px) { 
#audio-btn{
display:block}
} }

<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>