zoukankan      html  css  js  c++  java
  • 声音图标来回切换动态显示


     来看效果

     

     一,   

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

        

  • 相关阅读:
    codeforces-1328F-Make k Equal
    codeforces-1327C-Game with Chips
    codeforces-1328E-Tree Queries
    深度学习(九):变分自编码器
    深度学习(八):概率生成模型
    深度学习(六):吉布斯采样
    深度学习(五):M-H采样
    深度学习(四):马尔科夫链蒙特卡洛采样(MCMC)
    深度学习(二):图模型的学习
    深度学习(一):概率图模型引入
  • 原文地址:https://www.cnblogs.com/liujiajiablog/p/10335740.html
Copyright © 2011-2022 走看看