如何在移动设备上隐藏播放和暂停按钮？

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>