语音合成

playauto(data){
  var that=this;
  var _data=null;
  that.IsPlay=true;
  for(var i=0;i<data.length;i++){
    if(data[i].TxtTitle==''){
      _data=data[i]
    }
  }


  if(that.IsEnd){
    var utterThis = new window.SpeechSynthesisUtterance(_data.TxtContent);
    utterThis.pitch=1
    utterThis.rate=1
    utterThis.voiceURI='BaiduMandarinMale'
    window.speechSynthesis.speak(utterThis);
    utterThis.addEventListener('end',()=>{
      // 阅读结束
      console.log("end");
      that.IsPlay=false;
      that.IsEnd=true;

    });

  }else{
    that.IsPlay=true;
    that.IsEnd=false;
    window.speechSynthesis.resume()
  }
},
playend(){
  var that=this;
  window.speechSynthesis.pause()
  that.IsPlay=false;
  that.IsEnd=false;
}

<div class="audio" @click="!IsPlay?playauto(All_Data):playend()">
  <div :class="IsPlay?'icon_audio_playing':'audioimg'"></div>
  <span>{{IsTime}}s</span>
</div>

.audio{
  width: 120px;
  height: 35px;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}
  .audioimg{

    background: transparent url(../../../../static/img/iconloop.png) no-repeat 0 0;
    width: 18px;
    height: 25px;
    vertical-align: middle;
    display: inline-block;
    -webkit-background-size: 54px 25px;
    background-size: 54px 25px;
    background-position: -36px center;

  }
  .icon_audio_playing {
    background: transparent url(../../../../static/img/iconloop.png) no-repeat 0 0;
    width: 18px;
    height: 25px;
    vertical-align: middle;
    display: inline-block;
    -webkit-background-size: 54px 25px;
    background-size: 54px 25px;
    -webkit-animation: audio_playing 1s infinite;
    background-position: 0px center;

  }
  @-webkit-keyframes audio_playing {
    30% {
      background-position: 0px center;
    }
    31% {
      background-position: -18px center;
    }
    61% {
      background-position: -18px center;
    }
    61.5% {
      background-position: -36px center;
    }
    100% {
      background-position: -36px center;
    }
  }