声音图标来回切换动态显示

---

 来看效果

 

 一，   

<div  v-for="(item,index) in this.picture">                
        <span v-if="index==0" class="shengyin" @click="muiscPlay1(item.ziaudio,item)">
              <img v-if="item.isstop" src="../../assets/img/audio1.png" style=" 40px;height: 40px;" /> //固定静态图片
              <img v-else src="../../assets/img/audiogif1.gif" style=" 40px;height: 40px;"/> //切换动态显示图片
       </span>
       <img class="yueliang" :src="item.zidata" style="90%;height:auto;" />
 </div>

二，  

<script>
import { PlayAudio, StopAudio, IsPlaying } from "../../assets/js/AudioEngine.js"   //封装声音控件
export default {
    data() {
      return {
      }
    },
    methods: {
      audioaa(){
                this.$forceUpdate();
       },
      muiscPlay1(item,obj){     
          console.log(item)
          console.log(obj)
          PlayAudio(item,obj,this.audioaa); //开始播放
       },
       rightcontent(item,index){
          this.picture =item.contentelement;
           item.contentelement.forEach((item, index) => {
             item.isstop=true;//在循环的数组中添加状态
           }
       }，
       wordcontent(item,index){
           StopAudio();//关闭声音
       }

    },
    components:{
       
    }
}
</script>

三，

AudioEngine.js

AudioEngine.js

var audioengine = null;
var bplaying = false;
var onther=null;
export function PlayAudio(url,obj,func) {
    console.log(obj);
    console.log(url);
    if(onther==null){
        onther=obj;
    }
    if(onther!=obj){
         StopAudio();
        onther.isstop=true;
        onther=obj;
    }else{
        if(bplaying)
      {
        StopAudio();
        onther.isstop=true;
        console.log(obj);
        func();
        return;
      }
    }
  if (!audioengine) {
    audioengine = new Audio(url);
  }

  audioengine.addEventListener('ended', function () {   //声音结束后停止
    StopAudio();
    onther.isstop=true;
    console.log(obj);
     func();
  }, false);

  audioengine.play();
  onther.isstop=false;
   console.log(obj);
  bplaying = true;
   func();
};

export function StopAudio() {
  if (audioengine) {
    audioengine.pause();
  }
  audioengine = null;
  bplaying = false;
};

export function IsPlaying(){
  return  bplaying;
}