今天做了一个简单的落地页项目,就是类似于手机微信上经常看到的滑动效果。因为公司要求需要自己开发,所以我就用swiper+swiper.animate开发,开发速度很快,只不过最后音乐哪里出现了一点小bug在ios手机上不能自动播放。本着互联网分享精神我将分享给大家怎么解决这个bug。

思路讲解

  因为右上角的音乐图标需要转动,同时音乐播放。我的设计思路是当音乐加载完成后,音乐播放,图标转动(图标默认是不转动的),要不然有些用户网速慢造成音乐加载不完,图标却先转动了,这样也不符合逻辑。图标的转动和不转动切换时使用切换class实现的。这里我就不做过多的讲解了。

Html源码

    <audio id="narrate" src="music/1.mp3" loop="loop" preload="preload"></audio>

js源码

    var music = document.getElementById('music');
var mnarrate = document.getElementById('narrate');
mnarrate.oncanplay = function () { //音乐加载完成执行的函数
music.className = 'start-music';//图标开始旋转
mnarrate.play(); //音乐开始播放
};

  但是上列代码有个弊端,我在浏览器上测试的好好的,安卓也没什么事情。但是到ios上音乐不能播放只能点击下之后才能播放。由于iOS的安全机制问题。不允许audio和video自动播放,即使给play()也是播放过不了。

解决方案1

  使用微信sdk

  js源码

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    function autoPlay(id) {
var audio = document.getElementById(id);
$('#narrate').addClass('start-music');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
audio.play();
}, false);
}
autoPlay('narrate');

   注意调用以上方法需要配置wn.config如果不配置调用不了,并且以上代码只有在微信访问的时候才生效,其他环境不生效。

   以上方法可能有些复杂,所以还有一个折中的办法。因为是落地页么。所以用户很有坑能滑动或者点击了屏幕,我们可以利用这一点来实现音乐自动播放。

  js代码如下

    var music = document.getElementById('music');
var mnarrate = document.getElementById('narrate');
var html = document.getElementsByTagName('html')[0];
var oneClick = true; //指允许点击一次变量。
mnarrate.oncanplay = function () { //非ios执行函数
music.className = 'start-music';
mnarrate.play();
};
html.addEventListener('touchstart', function () {//ios执行函数。可与上非los同时使用两者不冲突。
if (oneClick === false) {
return
}
oneClick = false;
music.className = 'start-music';
mnarrate.play();
}, false);

  以上代码是给html加一个触碰事件,一旦触碰音频开始播放,这一点ios是允许的。因为项目比较小我用原生写的,如果用jQuery的话有一个one方法,这个方法是指执行一次。

  后记:互联网世界之大,高手如云,本着虚心学习的半杯水精神,如果哪位大神有更好的方案可以给我留言。我会及时回复。

  

ios audio不能自动播放的更多相关文章

  1. 100%解决ios上audio不能自动播放的问题

    由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了. 解决方法: 首先,创建audio标签:<audi ...

  2. ios html5 audio 不能自动播放

    //修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser & ...

  3. 微信h5页面audio标签在ios下不能自动播放

    背景介绍:在一个h5页面中,当用户提交表单到后台,后台返回的结果成功的话,开始自动播放背景音乐 出现的问题:在安卓手机上正常,iOS中没有反应 后来网上一番搜索后了解到时因为iOS不允许自动播放音乐, ...

  4. 微信的audio无法自动播放的问题

    一.问题 最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去. 1.在audio标签里引入了autoplay属 ...

  5. 摇一摇—微信7.0.8版本audio无法自动播放问题

    近日有一个项目出现audio无法自动播放,查看原因才发现是微信版本更新为7.0.8版本,需要有交互行为,第一次播放需要用户手动点击一下,无法使用DOM中的play()进行直接播放操作,那怎么办呢? 通 ...

  6. html5音频audio对象处理以及ios微信端自动播放和息屏后唤醒的判断---可供参考(功能都完整实现了,只是细节还没处理的很好)

    // html模版中的 此处结合了weui样式整合的微信手机端片段代码(不可直接粘贴复制进行使用)里面含有一些php的写法,可直接略过..###重点参考js代码### <div> < ...

  7. iOS背景音乐不自动播放

    iOS 内置浏览器safari不允许自动播放音乐.我们需要通过WeixinJSBridgeReady()函数实现自动触发 document.addEventListener("WeixinJ ...

  8. 微信video和audio无法自动播放解决方案

    //音频,写法一<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> // ...

  9. audio微信自动播放以及自定义样式

    audio标签如下: <audio id="audioTag" src="" autoplay="autoplay" controls ...

随机推荐

  1. 使用Telegraf + Influxdb + Grafana 监控SQLserver服务器的运行状况

    使用Telegraf + Influxdb + Grafana 监控SQLserver服务器的运行状况 前言 本文在Debian9下采用Docker的方式安装Telegraf + Influxdb + ...

  2. Android Camera开发经验总结以及踩过的那些坑

    写在开头 需求方:上传试卷的时候,用户自己拍的照片有很多问题.如:不清晰.图片歪了.错误图片等.我们要是能够对拍摄照片进行识别处理就好了,能够裁切矫正就更好了,最好可以像二维码扫描一样,直接识别处理- ...

  3. python urllib2 对 http 的 get,put,post,delete

    #GET: #!/usr/bin/env python# -*- coding:utf-8 -*-import urllib2def get():    URL = 'www.baidu.com'   ...

  4. C#面向对象二

    1.方法的定义 概念:对象的动态特征就是方法(静态特征是属性),方法表示此对象可以做什么. 类型:实例方法,静态方法,(构造方法,多态时会用到抽象方法和虚方法) 2.注意事项 访问修饰符:默认priv ...

  5. 洛谷P5211 [ZJOI2017]字符串(线段树+乱搞)

    题面 传送门 题解 为什么大佬们全都是乱搞的--莫非这就是传说中的暴力能进队,乱搞能AC-- 似乎有位大佬能有纯暴力+玄学优化\(AC\)(不算上\(uoj\)的\(Hack\)数据的话--这要是放到 ...

  6. UITabBarController的属性

    viewControllers UIViewController的数组,即要显示的VC,数组中VC的顺序即是实际展示的VC的顺序.UITabBarController最多展示5个tab,如果数组中的元 ...

  7. scrapy连接MySQL

    Scrapy中连接MySQL所需要做的工作如下: 1.settings中需要设置的部分 # 启动管道组件 ITEM_PIPELINES = { 'QianChengWuYu.mongoDBPiplel ...

  8. 移动web之一像素问题

    一.为什么会有一像素问题 弄明白这个问题,首先要知道DPR了. DPR(device pixel ratio)pixel等于picture element.设备像素比,是默认缩放100%的情况下,即D ...

  9. 用API爬取天气预报数据

    1.注册免费API和阅读技术文档: 注册地址:https://console.heweather.com 文档地址:https://www.heweather.com/documents/api-ur ...

  10. Kafka:Consumer

    1.预览 1.1 消费者组(Consumer Group) 一个consumer group可能有若干个consumer实例 同一个group里面,topic的每条信息只能被发送到group下的一个c ...