Within my Ionic project, there is an audio player. When the audio is not playing, the user has the option to:
- Tap the play button
- Start the audio
- Hide the play button and show the pause button
Conversely, when the audio is already playing, the user can:
- Tap the pause button
- Pause the audio
- Hide the pause button and show the play button
The problem arises when both the play and pause buttons briefly appear at the same time. This issue occurs only on iOS when tapping the pause button while audio is playing, as Android does not experience this glitch.
This is a visual representation of the error:
https://i.sstatic.net/lKTQ1.gif
The HTML structure for the buttons is as follows:
<span ng-click="player.playAudio(audio)" ng-hide="player.isViewAudioPlayingAudio()">
<img src="img/audio-play-icon.svg" alt="" class="big-icon audio-control">
<img src="img/audio-play-hover-icon.svg" alt="" class="big-icon audio-control-hover">
</span>
<span ng-click="player.pauseAudio()" ng-show="player.isViewAudioPlayingAudio()">
<img src="img/audio-pause-icon.svg" alt="" class="big-icon audio-control" >
<img src="img/audio-pause-hover-icon.svg" alt="" class="big-icon audio-control-hover">
</span>
You can observe the class changes in action here (GIF image, click to open):
https://i.sstatic.net/5baau.gif
The CSS for hover buttons consists of a few lines. While this is unrelated to the issue at hand, I have tested removing the hover images with no improvement. Nonetheless, I have included it for clarity:
.audio-control-hover{
display: none;
}
.activated{
.audio-control{
display: none;
}
.audio-control-hover{
display: inline;
}
}
Any suggestions to enhance the performance of ng-show and ng-hide?