如何在移動設備上隱藏播放和暫停按鈕？

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>