移动端audio自动播放问题

中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑:

一:移动端的屏幕大小不能算作body的大小,因为手机浏览器头部都有网址导航等等,底部也有留白,应该出去这一部分;

二:audio背景音乐是不能自动播放的,不管怎么调试js都没用,经过多方查证,居然是移动端做了限制,一定要用户交互才能触发,网上的解决方案大多是通过touchstart事件;

<audio id="myaudio" >
    <source src="/static/warn.mp3" type="audio/mpeg">
</audio>

<script>
var tt;
function audioPlay(){
    document.getElementById("myaudio").play();
    tt = setTimeout(audioPlay, 5000);
}

function audioLoad(){
    document.getElementById("myaudio").pause();
}
</script>

// 触发播放
audioPlay();

//清除定时任务
clearTimeout(tt);
时间: 2024-08-19 13:09:51

移动端audio自动播放问题的相关文章

解决移动端音频自动播放问题

<audio id="audio" autoplay='autoplay' loop='loop'> <source src="SeeYou.mp3" type="audio/ogg"> <source src="SeeYou.mp3" type="audio/mpeg"></audio> 在开发webapp时,有时候你可能要加点背景音乐,这时我们会用到HTM

iOS下Audio自动播放(Autoplay)音乐

*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin: 15px 0; } /* HEAD

html5 -audio-移动端如何自动播放

最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于audio标签的应用,对于audio相关的常用知识点以及一些相关的问题如下: <audio id="audios" src="xxxx.mp3" autoplay controls="controls"> 您的浏览器不支持 audio 标签. </audio> 不支持audio元素的浏览器会显示标签内文字 audio相关属性: src:音频地址 autoplay

关于html5 audio自动播放的问题

1.autoplay控制audio的自动播放,但是在ios系统上是忽略此选项的,目前还未找到解决的办法,如果哪位大神找到了,请赐教: 2.关于audio的自定义样式问题controls,是在页面可控制,在页面显示,如果自定义的话,就需要不显示此属性,然后根据自己的样式定义,贴代码:<audio id="myAudio" autoplay loop="loop" val="open"> <source src="路径&q

ios设置音乐audio自动播放

因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixin-1.2.0.js?ver=222"></script> 第二步,在wx.ready中进行默认播放,这个时候wx.config配置可以不用正确,但是后边的ready也可以用,所以默认播放了. //ios中音乐默认不能播放,配置在wx.ready中进行默认播放, function

autoplay移动端不能自动播放

本文总结自:https://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad 首先,自动播放功能在ios10上是可行的,但仍有些限制: 要么开启静音(muted),要么视频中没有音轨. 在ios9及之前的版本中是完全不可行的!苹果禁用自动播放功能,不管是通过script,例如:xxx.play(),还是通过设置属性,都不可行. 原因在于,苹果认为:鉴于用户随时可能处于蜂窝网络,为了限流,预

移动端audio音频播放兼容方案

现在很多移动端要求audio播放必需由用户的事件触发,否则就劫持.实际应用中经常会出现JS网络请求通过返回的结果来决定播放什么音频,在移动端是不允许的. 当移动需要通过网络请求回调来播放音频时,就得做点准备工作,具体代码如下: 加载准备处理      /**      * 循环处理      * @param {Object} data      * @param {Function} callback      * @returns {undefined}      */     functi

微信audio自动播放

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> </head> <body&

iOS h5 audio自动播放设置

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #703daa; background-color: #d0efd6 } span.s1 { color: #ba2da2 } span.s2 { color: #000000 } span.s3 { color: #4f8187 } self.webView.allowsInlineMediaPlayback = YES; self.webView.mediaP