ionic声音播放动画

HTML代码

         <!--播放声音按钮 -->
        <div id="zong1" class="box" style="font-size:40px; margin-left: 25%; margin-top: 10px; float: left; " (click)="playSwitch1()">
          <div class="wifi-symbol">
            <div id="first1" class="wifi-circle first"></div>
            <div id="second1" class="wifi-circle secondEnd"></div>
            <div id="third1" class="wifi-circle thirdEnd"></div>
          </div>
        </div>
        <!-- 声音 -->
        <audio id="myaudio1" src={{audio}} controls="controls" hidden="false"></audio>

TS代码

   /**
   * 点击单词播放声音
   * @author
   * @
   */
  playSwitch1() {
    this.myInterval = setTimeout(() => {
      this.myAudio = document.getElementById('myaudio1');
      this.first = document.getElementById('first1');
      this.second = document.getElementById('second1');
      this.third = document.getElementById('third1');
      if (this.myAudio.paused) {
        this.myAudio.play();
        this.myAudio.className = 'voicePlay';
        this.second.classList.remove('wifi-circle', 'secondEnd');
        this.third.classList.remove('wifi-circle', 'thirdEnd');
        this.second.classList.add('wifi-circle', 'second');
        this.third.classList.add('wifi-circle', 'third');
      } else {
        this.myAudio.pause();
        this.second.classList.remove('wifi-circle', 'second');
        this.third.classList.remove('wifi-circle', 'third');
        this.second.classList.add('wifi-circle', 'secondEnd');
        this.third.classList.add('wifi-circle', 'thirdEnd');
        this.playCount = 0;
      }
    }, 500);
    this.isPlay1();
  }

CSS样式

  .wifi-circle {
    border: 5px solid #999999;
    border-radius: 50%;
    position: absolute;
  }
  
  .first {
    width: 5px;
    height: 5px;
    background: #cccccc;
    top: 45px;
    left: 45px;

  }
  
  .second {
    width: 25px;
    height: 25px;
    top: 35px;
    left: 35px;
    animation: fadeInOut 1s infinite 0.2s;
  }
  .secondEnd {
    width: 25px;
    height: 25px;
    top: 35px;
    left: 35px;   
  }
  
  .third {
    width: 40px;
    height: 40px;
    top: 25px;
    left: 25px;
    animation: fadeInOut 1s infinite 0.4s;
  }
  
  .thirdEnd {
    width: 40px;
    height: 40px;
    top: 25px;
    left: 25px;
  }
  .wifi-symbol {
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    overflow: hidden;
    transform: rotate(135deg);
  }