标签： audio

iOS Safari 播放音频的技巧分享

开发 Web App 一直是个蛮尴尬的事情。一方面，Google 不断在推；PWA 等技术也越来越好；另一方面，当我们真的像用 Web 开发 App 的时候，总会在不同地方踩到各种坑，猝不及防。尤其是 iOS Safari，各种 bug 层出不穷，坑死个人。今天分享一下在 iOS Safari 播放音频的一些技巧，希望节省大家将来的时间。

基础：使用 `new Audio()` 创建播放器

播放声音看起来并不难，在桌面上实现也比较简单，直接 const audio = new Audio(音频地址); audio.play() 就好了。只要你的音频文件可以正常访问，那你应该很快就能听到声音。

这个过程实际上创建了一个 HTMLAudioElement 的实例。所以，你也可以在页面上直接插入一个 <audio>，然后通过某种方式拿到它的引用，再使用它播放音频。

除了初始化的时候传入音频地址，在任何时候改变音频地址，然后再 .play() 都可以，很简单。

在用户点击时提前创建播放器

但是在 iOS Safari 上，就有问题。因为手机端的限制更严格，只有用户主动操作（点击、敲击）时，新建的 <audio> 才能正常播放。如果你在其它时间创建 <audio> 并播放，一切看起来都是正常的，没有任何报错，网络也会正常产生请求，但就是不会发出声音。

解决方案就是在用户产生点击、敲击的时候，就把 <audio> 创建好，然后在需要播放的时候让它播放声音。

双播放器切换实现连续播放

有时候我们需要循环连续播放一首歌，比如游戏背景音乐，或者打坐的时候播一些背景音。这个时候我们也有两个选择：

使用 <audio>。
- 好处：流式播放，速度会更快；有 loop 属性，更方便。
- 坏处：如果是长音频，由于流式播放的原因，用过的数据可能被随时丢弃，所以新的一遍开始时可能会卡 0.N 秒，无法避免
使用 Web Audio API 等更高级的 API
- 好处：音频在内存里，想怎么播怎么播，还可以加入各种效果
- 坏处：第一次播需要完成加载，或者手动实现音频流，很麻烦

我建议用第二个方法，使用起来比较简单。只要在开始的时候创建两个 <aduio> 对象，然后在第一个播放结束前 250ms 启动第二个即可。至于为什么是 250ms，因为按照规范，onTimeUpdate 的触发周期是最长不超过 250ms，所以这样可以比较好的切换播放器。

以下是我在 Nuxt3 里使用的 composable，供大家参考：

import type { AudioOptions } from '~/types';

export function useAudio({
  src,
  loop,
  loopOverlap,
  autoplay,
}: AudioOptions = {}) {
  const audio = shallowRef<HTMLAudioElement>();
  const backup = shallowRef<HTMLAudioElement>();
  const isStarting = ref<boolean>(false);
  const isPlaying = ref<boolean>(false);
  const playhead = ref<number>(0);
  const duration = ref<number>(0);

  async function playAudio(src: string, overlap: number = 0.25): Promise<void> {
    if (!audio.value) {
      initAudio(src);
    }
    if (audio.value) {
      audio.value.src = src;
      if (loop && backup.value) {
        backup.value.src = src;
      }
    }
    if (overlap !== undefined) {
      loopOverlap = overlap;
    }
    isStarting.value = true;
    await audio.value?.play();
  }
  function pauseAudio(): void {
    audio.value?.pause();
    backup.value?.pause();
  }
  function initAudio(src: string): void {
    audio.value = new Audio(src);
    if (src) {
      audio.value.preload = 'auto';
    }
    audio.value.autoplay = autoplay || false;
    if (loop) {
      backup.value = new Audio(src);
      backup.value.preload = 'auto';
      backup.value.autoplay = false;
      backup.value.addEventListener('ended', onEnded);
      backup.value.addEventListener('timeupdate', onTimeUpdate);
      backup.value.addEventListener('play', onPlay);
      backup.value.addEventListener('playing', onPlaying);
      backup.value.addEventListener('pause', onPause);
      backup.value.addEventListener('loadedmetadata', onMetadata);
    }
    audio.value.addEventListener('timeupdate', onTimeUpdate);
    audio.value.addEventListener('loadedmetadata', onMetadata);
    audio.value.addEventListener('ended', onEnded);
    audio.value.addEventListener('pause', onPause);
    audio.value.addEventListener('play', onPlay);
    audio.value.addEventListener('playing', onPlaying);
  }
  function destroy(): void {
    if (audio.value) {
      audio.value.removeEventListener('timeupdate', onTimeUpdate);
      audio.value.removeEventListener('loadedmetadata', onMetadata);
      audio.value.removeEventListener('ended', onEnded);
      audio.value.removeEventListener('pause', onPause);
      audio.value.removeEventListener('play', onPlay);
      audio.value.removeEventListener('playing', onPlaying);
      audio.value = undefined;
    }
    if (!backup.value) return;
    backup.value.removeEventListener('ended', onEnded);
    backup.value.removeEventListener('loadedmetadata', onMetadata);
    backup.value.removeEventListener('timeupdate', onTimeUpdate);
    backup.value.removeEventListener('play', onPlay);
    backup.value.removeEventListener('playing', onPlaying);
    backup.value.removeEventListener('pause', onPause);
    backup.value = undefined;
  }

  function onPlay(): void {
    isPlaying.value = true;
  }
  function onPlaying(): void {
    isStarting.value = false;
  }
  function onPause(): void {
   isPlaying.value = false;
 }
  function onEnded(event: Event): void {
    if (loop) {
      (event.target as HTMLAudioElement).currentTime = 0;
    } else {
      isPlaying.value = false;
    }
  }
  function onTimeUpdate(): void {
    playhead.value = audio.value?.currentTime || 0;
    if (!loop) return;
    if (!playhead.value || !duration.value || playhead.value < duration.value - loopOverlap) return;

    backup.value?.play();
    // swap audio and backup
    const temp = audio.value;
    audio.value = backup.value;
    backup.value = temp;
  }
  function onMetadata(event: Event): void {
    duration.value = (event.target as HTMLAudioElement).duration || 0;
  }

  if (src) {
    initAudio(src);
  }

  return {
    audio,
    isStarting,
    isPlaying,
    playhead,

    playAudio,
    pauseAudio,
    destroy,
  };
}

使用 macOS Safari 调试 iOS Safari

Safari 烂归烂，但是有一点：iOS Safari 的 bug 大多可以在 macOS 上复现。所以大多数时候，我们可以直接在 macOS 完成调试。但是有时候，我们必须在 iOS 上进行调试，比如涉及到输入框影响屏幕高度、或者上面提到的播放问题。

于是，使用 macOS Safari 调试 iOS Safari 也是必备技能，需要的同学请看我的这个视频：

总结

我有时候会怀疑，苹果是不是故意劣化 Safari，以避免被 Web App 抢走原生 App 的市场份额，不然 iOS Safari 的 bug 不应该这么多。

如果大家对 Web App 开发感兴趣，有相关的问题，欢迎留言讨论。

2024年5月25日

MediaElement 笔记
贵司官网需要放视频，于是需要用播放器。然后就产生如下需求：
1. 协议好，支持免费商用，最好 MIT
2. 支持 SRT 字幕
3. 支持尽可能多的平台
经过筛选，最后选定 MediaElement，一看 WordPress 在用基本就放心了。然后就开始踩坑之旅。当然，有些是我的问题，不过也有不少是文档没说清楚。这里记录一下。

全屏和弹性宽度

当前版本 4.2.5 有个 Bug，如果设置宽度为 100%，那么从全屏恢复到内嵌状态时，会留着全屏的宽度，撑开页面。如果设定一个特定的宽度就不会。但我们的页面是响应式的，需要允许它随页面变化而变化。

这个时候只好手工来做，我的选择是让它 100%，然后侦听从全屏返回的事件，发生后就把宽度恢复。另外，因为 fullscreenchange 事件还没有统一标准，所以不同浏览器里的事件名称也不一样，更不爽的是，IE 下是驼峰，其它浏览器是全小写，我也懒得再写函数转化了，反正就3种情况，全写一遍好了。
```
// fix MediaElement's issue
  let fitVideo = function() {
    setTimeout(() => {
    $('.mejs__container').width('100%')
      .find('video').width('100%')
      .end().find('.mejs__layers')
      .children().width('100%');
  }, 50);
};
if ('onwebkitfullscreenchange' in document) {
  document.onwebkitfullscreenchange = function() {
    if (!document.webkitFullscreenElement) {
       fitVideo();
    }
  };
} else if ('onmozfullscreenchange' in document) {
  document.onmozfullscreenchange = function() {
    if (!document.mozFullScreenElement) {
      fitVideo();
    }
  };
} else if ('MSFullscreenChange' in document) {
  document.MSFullscreenChange = function() {
    if (!document.msFullscreenElement) {
      fitVideo();
    }
  };
}
```
默认字幕

Web 标准是有默认字幕的，<track defualt> 即可。但是 MediaElement 没有，最后在 StackOverflow 上找到答案，原来有个未记录在文档里的初始化属性可以控制：
```
let player = new MediaElementPlayer('intro-video', {
  startLanguage: 'cn', // 这里的名字应该和 <track> 种的 srclang 属性一致
});
```
插件与生态

MediaElement 把一些有用但不太常用的功能抽出来做成了插件，放在 MediaElement Plugins。不过看起来这个项目有些属于维护，使用的时候很多问题。比如，直接在 features 里开启特定功能，即使对应的插件没有加载，也不会报错，就是没反应，很令人迷茫。

避免发起又取消请求

网站上线后，老板发现一个问题：从 Chrome 的 Network 面板可以看到，网页打开后，对视频文件发起了一到多个不等的请求，并且都取消了。

经过研究，我认为这个请求是 <video> 发起的，因为 preload 的默认值是 auto（参见：MDN），也即打开页面就预加载。而此时 MediaElement 被初始化，为了正确显示 UI，它会把 <video> 标签挪到自己创建的 <div> 里，这个过程就会导致“预加载 -> 取消”。因为视频默认不播放，所以我给 <video> 加上了 preload="none"，问题解决。

其它大体上文档都能找到，就不多说了。
2017年9月6日

标签： audio

iOS Safari 播放音频的技巧分享

基础：使用 new Audio() 创建播放器

在用户点击时提前创建播放器

双播放器切换实现连续播放

使用 macOS Safari 调试 iOS Safari

总结

MediaElement 笔记

全屏和弹性宽度

默认字幕

插件与生态

避免发起又取消请求

基础：使用 `new Audio()` 创建播放器