欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

audio标签的自动播放(ios)

程序员文章站 2022-06-24 10:19:30
0.应用场景 前端移动端开发,经常有播放音乐的需求。比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐。 1.audio标签播放mp3 (一)常用属性和API介绍 1.controls属性 有了它,就会显示控制条。 图1 chrome默认audio样式 图2 ie默认a ......

0.应用场景

 前端移动端开发,经常有播放音乐的需求。比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐。

1.audio标签播放mp3

(一)常用属性和API介绍

1.controls属性

有了它,就会显示控制条。

图1 chrome默认audio样式

audio标签的自动播放(ios)

图2 ie默认audio样式

audio标签的自动播放(ios)

 图3 firefox默认audio样式

audio标签的自动播放(ios)

图4  ios的微信端(iphone6,系统版本11.4,微信使用内置Safari):

audio标签的自动播放(ios)

2.autoplay属性

  autoplay指的是自动播放,chrome61、ie11 ,ie edge、firefox 60已测试,可自动播放。ios不能自动播放,那么先点一下播放按钮才行。这是什么原因呢,ios为了用户流量着想,限制了audio标签的自动播放,那么safari没有用户的交互就播放会被拦截。

PS:6月29日补充。杯具了:(,我的电脑自动更新到chrome67了,不能自动播放了。参考“Chrome禁止audio自动播放”搜索词。

 autoplay的默认值是false。

(二)实现ios自动播放

我们刚才说了,除了ios,其他端都能够使用autoplay属性实现自动播放。那么ios自动播放应该如何来做呢?

首先,我们要知道音频流(audio stream)在ios上的工作方式。那么就是说只有有了用户交互后才能下载,接下来才能播放。

如下图:

参考

图1:Workflow to load audio in mobile Safari

audio标签的自动播放(ios)

第二,用Js来完成效果,ios的微信端可以监听XXX事件,safari(和ios微信端)监听touchstart事件,然后手动play。

ios微信端:

<script>
         var audio = document.querySelector('#audio');
         audio.play();
         //既然是微信的ready事件,只能在微信端使用
         document.addEventListener("WeixinJSBridgeReady", function () {
             audio.play();
         }, false);
</script>

成功播放!

ios的safari浏览器和微信端:

<audio id="audio" controls src="assets/music.mp3" autoplay>
    <source src="assets/music.mp3" type="audio/mpeg">
</audio>

<script>
    var audio = document.querySelector('#audio');
    //safari和微信
    document.addEventListener("touchstart", function () {
       audio.play();
    }, false);
</script>

成功播放!

长时间的写博客,有些累了,完整Demo待更新!!!