宿雪冷音
  • 随笔
  • 音乐
  • 后端
  • 前端
    • JavaScript
    • css
    • TypeScript
    • nodejs
suxue
热爱音乐的前端工程师
  1. 首页
  2. 前端
  3. JavaScript
  4. 正文

移动端H5音频播放兼容

2020年11月10日 53点热度 1人点赞 0条评论

Audio 标签属性: 设置 preload="auto"

设置 currentTime

移动端IOS在设置currentTime 时,会存在异常。具体来说,只有在音频可播放时,才能设置时间。
而可播放的判断则是监听canplay事件,该事件的触发在ios和安卓上也有所区分,安卓是页面一加载就触发,ios是play播放之后触发。这给我们写代码造成了不小的麻烦。所以我采用以下办法:

/**
 * ios/安卓音频设置音频开始时间兼容处理,ios要play之后才能设置
 * @param {Element} audio 音频dom
 * @param {Number} time 时间
 * @param {Number} timeout 播放超时时间,默认10s
 */
function setCurrentTimePromise(audio, time) {
  if (!audio) return
  const isCanplay = audio.readyState === 4
  return new Promise(function(resolve, reject) {
    if (!isCanplay) {
      audio.addEventListener('canplay', function() {
        // 设置播放时间
        resolve(audio.currentTime)
        audio.currentTime = time
      })
    } else {
      resolve(audio.currentTime)
      audio.currentTime = time
    }
  })
}

这是一个返回promise的异步函数,可用于等待设置时间后再触发(未处理reject)。原理是根据audio.readyState的状态来判断音频是否可以播放。
实际使用过程中,我注意到,ios下会等待的时间比较长,大约0.5s~1.5s左右,跟网络有关。

标签: 暂无
最后更新:2020年11月12日

suxue

嗨,来点音乐吧!

点赞
< 上一篇
下一篇 >

文章评论

取消回复

分类目录
  • JavaScript
  • nodejs
  • TypeScript
  • 前端
  • 后端
  • 译文
  • 随笔
2021年4月
一 二 三 四 五 六 日
 1234
567891011
12131415161718
19202122232425
2627282930  
« 3月    
文章归档
  • 2021年4月
  • 2021年3月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
分类目录
  • JavaScript
  • nodejs
  • TypeScript
  • 前端
  • 后端
  • 译文
  • 随笔

COPYRIGHT © 2020 宿雪冷音. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS