vue项目，解决ios下audio无法播放问题

最新推荐文章于 2024-08-23 10:26:27 发布

Helen-lian

最新推荐文章于 2024-08-23 10:26:27 发布

阅读量1.2w

点赞数 5

分类专栏： javascript html css vue

本文链接：https://blog.csdn.net/qq_20753229/article/details/90408014

版权

javascript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

最近在做一个关于aduio的项目，奈何audio在pc端能正常播放，在ios端确无法播放，着实踩了不少的坑！！！
也看了不少的网上的教程，最后的实现结果如下：
在这里插入图片描述
1、html代码

// html
<audio id="audio" :src="src" ref="audio" @timeupdate="updateTime" >该浏览器不支持audio属性</audio>
<div v-if="isMobile">
  <div class="playbtn"  @touchstart="play" v-if="!isPlay"></div>
  <div class="stopbtn"  @touchstart="pause" v-else></div>
</div>
<div v-else>
  <div class="playbtn"  @click="play" v-if="!isPlay"></div>
  <div class="stopbtn"  @click="pause" v-else></div>
</div>

不支持audio元素的浏览器会显示标签内文字
(1)、视频/音频（audio/video）在加载过程中，触发的顺序如下：
onloadstart：事件在浏览器开始寻找指定视频/音频（audio/video）触发。
ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发。
注意：当视频/音频（audio/video）已经加载后，视频/音频（audio/video）的时长从 “NaN” 修改为正在的时长。
onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。
视频/音频（audio/video）的元数据包含: 时长，尺寸大小（视频），文本轨道。
onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发。
onprogress 事件在浏览器下载指定的视频/音频（audio/video）时触发。
oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
oncanplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
(2)、audio的属性
src：音频地址
autoplay：音频加载完毕后自动播放
controls：显示播放控制条
loop：播放完毕后会重复播放
preload：1)auto 预加载音频视频。2）metadata 只预加载音频视频元数据。有autoplay时此属性无效。
(3)、js
play() 播放
pause() 暂停
load() 重新加载
(3)、微信端和手机不能支持自动播放问题
原因是：android ios 内部原因为了节省流量，规定不自动播放音频视频，ios系统下会自动屏蔽audio标签的自动播放，需要使用一个事件来驱动音频播放
audio.load()

2、js代码
手机端用touchstart事件来驱动，pc端用click驱动

export default {
  data () {
    return {
      duration: 0,  // 视频音频的总时长
      currentTime: 0, // 播放时间
      isPlay: false, // 是否播放
      width: 0 // 视频音频的总时间的长度条
    }
  },
  props: ['src', 'isMobile'],
  computed: {
   // 获取音频/视频的总时间
    durationText () {
      return this._parseTime(this.duration)
    },
    // 获取音频/视频的播放时间
    currentTimeText () {
      return this._parseTime(this.currentTime)
    },
    // 获取音频的播放滚动条的长度
    progressBarLength () {
      return this.currentTime / this.duration * this.width
    }
  },
  mounted () {
    this.width = parseInt(window.getComputedStyle(this.$refs.bar).getPropertyValue('width'))
    this.audio = this.$refs.audio
    // 获取视频音频总时长
    this.audio.ondurationchange = () => {
      this.duration = this.audio.duration
    }
  },
  methods: {
   // 获取视频/音频正在播放的时间
    updateTime () {
      this.currentTime = this.audio.currentTime
      if (this.audio.ended) {
        this.isPlay = false
      }
    },
    // 播放
    play () {
      this.audio.load()
      this.audio.play()
      this.isPlay = true
    },
    // 暂停
    pause () {
      this.audio.pause()
      this.isPlay = false
    },
    // 把获取的视频音频时长，转化成具体的时间格式
    _parseTime (sec) {
      let minutes = parseInt(sec / 60)
      let seconds = parseInt(sec - 60 * minutes)
      return (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds)
    }
  }
}
</script>