vue 动态音乐自动播放失败

 

1.可能是因为音乐src是动态的值

2.也有可能是因为src已经重新赋值

1.解决方案

 <audio loop="loop" preload ref="musicPlay"  :src="backgroundMusicUrl">
      </audio>

使用watch进行监听：这个设置延迟1s，因为可能刚开始没有加载到组件

  watch: {
      backgroundMusicUrl:  function(val){
        setTimeout(()=>{   //设置延迟执行
          this.$refs.musicPlay.play();
        },1000);
      },
    }

附件：这是对音频暂停和播放方法

  musicAuto: function (e) {
        var state = this.$refs.musicInfo.style.animationPlayState;
        if (state === "paused") {
          this.$refs.musicInfo.style.animationPlayState = "running";
          this.$refs.musicPlay.play();
        } else {
          this.$refs.musicInfo.style.animationPlayState = "paused";
          this.$refs.musicPlay.pause();
        }
      },

图片旋转： 

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
      -ms-transform: rotate(0deg); /* IE 9 */
      -moz-transform: rotate(0deg); /* Firefox */
      -o-transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
      -ms-transform: rotate(360deg); /* IE 9 */
      -moz-transform: rotate(360deg); /* Firefox */
      -o-transform: rotate(360deg);
    }
  }

  @-webkit-keyframes rotate {
    0% {
      -moz-transform: rotate(0deg);
    }
    100% {
      -moz-transform: rotate(360deg);
    }
  }