最近在做一个关于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>

相关文章:
https://www.cnblogs.com/volare/p/6759835.html
https://segmentfault.com/q/1010000000390733
https://blog.csdn.net/SoySauce_lm/article/details/86476004
https://www.cnblogs.com/cpqwebfe/p/7543256.html
https://segmentfault.com/q/1010000012624104/a-1020000012624254
https://blog.csdn.net/cmyh100/article/details/80695271

Logo

前往低代码交流专区

更多推荐