当前位置:   article > 正文

【前端 ios】audio不能在苹果手机正常播放_ios 用户点击 audio play()不执行

ios 用户点击 audio play()不执行

在项目中用到了audio组件播放音频,在安卓上播放都是正常的,在 ios 的 safari 浏览器中却不能正常播放音频

 

原因:


由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio。故需要用户通过手动触摸的方式(如 click touch)激活播放audio

 

解决方式:


index.html:

<audio id="music" class="media-audio" src="src.mp3" preload loop="loop"></audio >

方法一、主动调用,先播放后暂停

index.js:

  1. // 初始化时主动调用
  2. (function () {
  3. $("#music").load();
  4. $("#music").pause();
  5. }())

方法二、监听点击事件,事件中初始化音频

  1. // 使用one绑定事件,触发一次即解绑
  2. $(document).one('click touchstart', document.body, function () {
  3. let audios = document.getElementsByTagName('audio');
  4. for (let i = 0, len = audios.length; i < len; i++) {
  5. audios[i].load();
  6. audios[i].pause();
  7. }
  8. });

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/天景科技苑/article/detail/771032
推荐阅读
相关标签
  

闽ICP备14008679号