HTML5中的audio在手机端和微信端的不能自动播放

简介: 再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的

再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的


通常解决方法是给一个交互事件:


标签:


<audioloopsrc="/photo/aa.mp3"id="audio"autoplaypreload="auto">
该浏览器不支持audio属性</audio>解决方法:


//--创建页面监听,等待微信端页面加载完毕 触发音频播放document.addEventListener('DOMContentLoaded', function () {
functionaudioAutoPlay() {
varaudio=document.getElementById('audio');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
        }, false);
    }
audioAutoPlay();
});
//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放document.addEventListener('touchstart', function () {
functionaudioAutoPlay() {
varaudio=document.getElementById('audio');
audio.play();
    }
audioAutoPlay();
});
还有一种针对苹果的手机微信端的解决方法第一步:引入js文件
<scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>


第二步:配置文件


<script>functionautoPlayVideo(){
wx.config({
debug:false,
appId:"",
timestamp:1,
nonceStr:"",
signature:"",
jsApiList:[]
            });
wx.ready(function(){
varautoplayVideo=document.getElementById("audio");
autoplayVideo.play()
            })
        };
autoPlayVideo();
</script>


这样在网络稳定的情况下是可以自动播放的。


相关文章
|
JavaScript 前端开发 网络安全
Video.js实现在html页面播放rtmp流媒体
Video.js实现在html页面播放rtmp流媒体
1227 0
|
5天前
|
移动开发 HTML5
HTML5实现的手机验证抽奖领券效果源码
这是一款基于HTML5实现的手机验证抽奖领券效果源码。在输入框输入手机号码即可点击下方的按钮来进行抽奖游戏,中奖后还会弹出提示信息,是一款比较经典的抽奖游戏源码
22 9
|
2月前
|
Web App开发 移动开发 iOS开发
HTML5 Audio(音频)
HTML5 Audio 标准允许网页直接播放音频文件,无需依赖插件。通过 `&lt;audio&gt;` 标签,开发者可以在网页中嵌入音频,支持多种格式如 MP3、WAV 和 Ogg。主流浏览器如 IE9+、Firefox、Chrome、Safari 和 Opera 均支持此功能,但不同浏览器对音频格式的支持存在差异。使用 `&lt;source&gt;` 标签可指定多个源文件,确保兼容性。
|
2月前
|
移动开发 HTML5
HTML5熊猫弹跳手机小游戏源码
一款html5手机端小游戏源码,熊猫跳跃小游戏源码下载。熊猫脚底有弹簧,长按变化力度跳跃,计分游戏,html5手机熊猫也疯狂小游戏源代码。
55 5
|
2月前
|
移动开发 HTML5
HTML5实现手机端红包下落抢红包特效源码
HTML5实现手机端红包下落抢红包特效源码是一款手机移动端的抢红包小游戏源码下载。红包像下雪一样,点击抓我呀,可以抢红包,需要此款代码的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
55 4
|
3月前
|
Web App开发 移动开发 JavaScript
HTML 音频(Audio)详解
HTML5通过`&lt;audio&gt;`元素为网页音频播放提供了丰富支持。本文将介绍其基本用法、属性(如`controls`、`autoplay`)、事件监听、格式兼容性(MP3、OGG、WAV、AAC),并提供JavaScript控制示例。此外,还将讨论优化技巧,如使用CDN、懒加载及提升用户体验的方法。
|
3月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
147 1
|
4月前
|
移动开发 JavaScript 前端开发
HTML5 Audio(音频)详解
HTML5 通过 `&lt;audio&gt;` 标签简化了网页音频嵌入。本文详细介绍其基本语法与常用属性(如 `controls`、`autoplay`),并通过示例代码展示如何使用 JavaScript 控制音频播放及处理音频事件。此外,还提供了关于浏览器兼容性、自适应设计及无障碍访问的注意事项,助您优化音频体验。
|
5月前
|
存储 移动开发 JavaScript
html5手机Web单页应用实践--起点移动阅读
html5手机Web单页应用实践--起点移动阅读
|
8月前
|
存储 JSON 小程序
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法
本文档介绍了DWG数据库中图层的存储结构及MxCAD库对图层的操作。图层信息存储于图层层表McDbLayerTable()中,每个记录对应一个图层,包含颜色、线型等属性,且有一个不可删除的默认"0"层。主要操作包括:通过MxCpp.getCurrentMxCAD()获取图层表,使用addLayer()添加图层,遍历图层,以及删除图层。此外,还展示了如何修改图层的关闭、冻结、锁定状态及颜色。提供了在线示例以演示这些功能。
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法