JS关于音频自动播放规则与微软ASR语音转换文字

最新推荐文章于 2025-02-13 09:01:51 发布

原创

最新推荐文章于 2025-02-13 09:01:51 发布 · 533 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#音视频

文章讨论了音频自动播放在PC端和移动端的差异，包括移动端对异步播放的限制。在iOS和安卓设备上的实现方式有所不同，iOS需要预定义音频标签。此外，介绍了微软的ASR技术，用于语音转文字，使用Promise处理异步操作。

关于音频自动播放

音频自动播放在PC端与移动端不同，在移动端里IOS与安卓又不同

PC端

在pc端直接创建音频对象，然后播放即可，其限制是不能在用户对页面有交互行为之前播放音频或有声视频，当用户有了对页面的交互行为之后，音频可以正常播放。

    // 创建audio对象并播放
    const audio = new Audio(res2.url);
    // 播放
    await audio.play();

    ...

   // 可以在这个对象上添加事件监听来获得它的各种状态，比如播放结束
    audio.addEventListener(
      "ended",
      function () {
        //结束
        console.log("播放结束");
      },
      false
    );

移动端

移动端出于流量和用户隐私考虑，在PC端规则的基础上额外新增了不允许异步代码调用的播放，也就是说，在用户的一次交互行为中，音频的播放应该是同步的，不应该将其加入到异步代码中去，如果有需要可以使用async await和promise来使其等待前方的异步程序。

在用户的一次交互中如果没有其他的异步代码，移动端和PC端其实并无不同，但如果出现了需要等待的异步代码，PC端可以直接创建对象音频并播放的代码加入到需要等待的对象尾部即可正常工作，而移动端不行，移动端音频不允许‘异步’播放。

IOS与安卓的不同在于：IOS不允许动态创建的音频对象自动播放，所以当IOS需要播放音频时，应该写一个用户看不见的音频标签于HTML上，然后获取该标签的dom对象，通过修改其src属性后播放来达到需求。

// html
// 该audio标签自行通过CSS代码隐藏即可
    <audio class="audio1" ref="audio1" src="" controls><

最低0.47元/天解锁文章