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