Как играть и кнопка паузы скрыть на мобильном телефоне?

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>