移动端audio自动播放问题
中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑:
一:移动端的屏幕大小不能算作body的大小,因为手机浏览器头部都有网址导航等等,底部也有留白,应该出去这一部分;
二:audio背景音乐是不能自动播放的,不管怎么调试js都没用,经过多方查证,居然是移动端做了限制,一定要用户交互才能触发,网上的解决方案大多是通过touchstart事件;
<audio id="myaudio" >
<source src="/static/warn.mp3" type="audio/mpeg">
</audio> <script> function audioPlay(){
document.getElementById("myaudio").play();
} function audioLoad(){
document.getElementById("myaudio").pause();
} // 触发播放
audioPlay();
</script>
移动端audio自动播放问题的更多相关文章
- 关于移动端audio自动播放问题
		
本人小白全栈一枚,给公司写了一个监控中心,要求严重报警的时候需要触发音频播放,于是就有了以下的折腾. 刚开始一切都很顺利,自然而然的写了以下代码. <audio id="myaudio ...
 - video 在iphone手机的ios系统和微信端无法自动播放
		
描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...
 - HTML5中的audio在手机端和 微信端的自动播放
		
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...
 - iOS下Audio自动播放(Autoplay)音乐
		
前几天做了一个H5活动页面,产品要求初始化播放音乐,因晓得H5 Audio标签支持Autoplay就没在意. 完了在手机上测试,发现手机上打开页面死活就是不会自动播放,点击播放按钮才可以播放,很是纠结 ...
 - html5 -audio-移动端如何自动播放
		
最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于audio标签的应用,对于audio相关的常用知识点以及一些相关的问题如下: <audio id="audios" ...
 - ios设置音乐audio自动播放
		
因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...
 - autoplay移动端不能自动播放
		
本文总结自:https://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad 首先,自动播放 ...
 - 微信audio自动播放(ios播放问题)
		
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
 - audio标签的自动播放(ios)
		
0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.c ...
 
随机推荐
- HashMap源码剖析
			
HashMap源码剖析 无论是在平时的练习还是项目当中,HashMap用的是非常的广,真可谓无处不在.平时用的时候只知道HashMap是用来存储键值对的,却不知道它的底层是如何实现的. 一.HashM ...
 - ASP.NET基础之HttpModule学习
			
最近学习WCF知识时看到有关IIS版本的知识,发现对HttpContext,HttpModule,HttpHandler的内容都不是很了解,这三个也是ASP.NET相对基础的内容,晚上特地花点时间针对 ...
 - UI基础UIWindow、UIView
			
UI基础UIWindow.UIView 在PC中,应用程序多是使用视窗的形式显示内容,手机应用也不例外,手机应用中要在屏幕上显示内容首先要创建一个窗口承载内容,iOS应用中使用UIWindow.UIV ...
 - How to deploy openbr on linux server very shorly---- linuxmint13/ubuntu12.04 AMD64/debian7
			
SO FAST ON A SERVER!!!! There are serveral packages that you have to install: 1. openbr 0.6.0 packag ...
 - [C# 开发技巧]实现属于自己的截图工具
			
[C# 开发技巧]实现属于自己的截图工具 一.引言 之前一直都是写一些C#基础知识的内容的,然而有些初学者可能看完了这些基础知识之后,会有这样一个疑惑的——我了解了这些基础知识之后,我想做一些工具怎么 ...
 - qt的安装及连接sql使用注意
			
qt安装与使用 今天写下qt使用的注意事项,qt-project.org上已经更新了qt5的相关库,但是建议不是很熟系qt的朋友,或者说想使用传统qt api而不是qml的朋友, 继续下载老版本4.8 ...
 - android应用程序fps meter[帧数显示]的分析 —— 浅谈root的风险 (1)
			
fps meter是常用的检测帧率的软件,该软件需要root权限才能工作,一直比较好奇它一个apk是如何知道系统当前的帧率情况的,就针对此apk分析了一下其工作原理. Apk组成 首先看一下apk的组 ...
 - 设计模式:Prototype 原型模式 - 同学你抄过别人的作业么?-clone()方法的使用
			
原型模式: 通过某个类的实例来创建对象 使用原型模式的好处: 好处是什么呢?当我们需要多次重复的创建一个类的示例的时候,我们可以使用new但是,new不仅仅耗费内存而且,如果new 某个类的构造方法中 ...
 - 使用IDEA开发
			
IDEA 在使用IDEA之前,我是eclipse的忠实用户.无论是最初学习java,还是后来用python/golang. eclipse丰富的插件已经满足了我大部分的使用,直到在师弟的大力推荐下使用 ...
 - 利用GeneratedKeyHolder获得新增数据主键值
			
Spring利用GeneratedKeyHolder,提供了一个可以返回新增记录所对应的主键值的方法: int update(PreparedStatementCreator psc, KeyHold ...