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

Question

我有这个代码，

我想要什么：

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

谢谢。

sed -E -n 's/.*\((.*)\).*$/\1/p' file_name

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

Answer 1

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

override_attributes(
  'foo' => {
    'bar' => default['ProjectA']['bar']
  }
)

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