移动端audio踩坑记录

小白前进之路

于 2023-05-04 15:25:52 发布

阅读量371

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_46595660/article/details/130487615

版权

文章讨论了不同平台对音频自动播放的支持差异，特别是在iOS上遇到的问题，即在调用Html2canvas时背景音乐重复播放。为解决此问题，提出了在渲染前移除音频的autoplay属性。此外，还展示了如何通过控制样式实现音频播放与暂停的动画效果。

摘要由CSDN通过智能技术生成

1.关于自动播放
有些app和浏览器不支持自动播放，必须用户手动触发，才能自动播放。有些app和浏览器，可以支持自动播放
2.ios的踩坑：背景音乐在调用Html2canvas()会重复播放，
背景音乐在调用Html2canvas()会重复播放，说明背景音乐在Html2canvas从DOM读取信息渲染成图片时，背景音乐在已有的播放音乐没有停止的情况下，又重复加载了一次，所以想到的解决方法就是在Html2canvas()在调用之前，背景音乐不自动播放。

this.$refs.audio && this.$refs.audio.removeAttribute('autoplay');

3.音频的动画的暂停与继续。

<div class="WxAudio">
      <div class="audiobox"
        @click="clickAudio"
        :class="{'loop': playing || isClick}"
        :style="{...styleObject}"
        ref="audiobox"
      >
        <audio
          class="audioContainer"
          ref="audio"
          :autoplay="isAutoPlay"
          :controls="showControls"
          :loop="isLoop"
          @ended="ended"
          @play="playEvent"
          @pause="pauseEvent"
          @canplay="readyPlay"
        >
          <source :src="src" />Your browser does not support the audio tag.
        </audio>
      </div>
  </div>

.audiobox
      width 35px
      height 35px
      border-radius 50%
      position absolute
      background-repeat no-repeat
      background-size 100% 100%
      &.loop
        animation audioRotate 3s linear infinite
@-webkit-keyframes audioRotate
  from
    -webkit-transform: rotate(0deg);
  to
    -webkit-transform: rotate(360deg);

pauseEvent() {
      if (!this.$refs.audiobox) return;
      this.$refs.audiobox && (this.$refs.audiobox.style.animationPlayState = 'paused');
    },
 play() {
      this.$refs.audio && this.$refs.audio.play().then(() => {
        if (!this.$refs.audiobox) return;
        this.$refs.audiobox.style.animationPlayState = 'running';
      }).catch(() => {
      });
    },