How to play and pause button hide on mobile?

Question

I have this code,

What i want:

1. this button not show on mobile.
2. now its show only play button, i want to show pause button when any user click on play button. if audio is pause then show the play button. mean change the icon on click, and show only one icon one time.
3. can i add downlaod audio button with play pause toggle button

Thanks in advance.

 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

I have used javascript to add and remove class to change play pause button and use media query to show hide button.

 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>