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>


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


相关文章
|
API 数据安全/隐私保护 开发者
企业微信自动加好友软件,导入手机号批量添加微信好友,python版本源码分享
代码展示了企业微信官方API的合规使用方式,包括获取access_token、查询部门列表和创建用户等功能
|
存储 移动开发 JavaScript
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `&lt;audio&gt;` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
|
JavaScript
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码,是一款可配置奖品抽奖的jQuery大转盘抽奖代码,可实现点击按钮转轮旋转实现抽奖功能,效果逼真自然,代码里面有详细的注释,可以修改文字或者二次开发都可以
572 11
|
Web App开发 移动开发 iOS开发
HTML5 Audio(音频)
HTML5 Audio 标准允许网页直接播放音频文件,无需依赖插件。通过 `&lt;audio&gt;` 标签,开发者可以在网页中嵌入音频,支持多种格式如 MP3、WAV 和 Ogg。主流浏览器如 IE9+、Firefox、Chrome、Safari 和 Opera 均支持此功能,但不同浏览器对音频格式的支持存在差异。使用 `&lt;source&gt;` 标签可指定多个源文件,确保兼容性。
|
移动开发 HTML5
HTML5实现手机端红包下落抢红包特效源码
HTML5实现手机端红包下落抢红包特效源码是一款手机移动端的抢红包小游戏源码下载。红包像下雪一样,点击抓我呀,可以抢红包,需要此款代码的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
440 4
|
Web App开发 移动开发 JavaScript
HTML 音频(Audio)详解
HTML5通过`&lt;audio&gt;`元素为网页音频播放提供了丰富支持。本文将介绍其基本用法、属性(如`controls`、`autoplay`)、事件监听、格式兼容性(MP3、OGG、WAV、AAC),并提供JavaScript控制示例。此外,还将讨论优化技巧,如使用CDN、懒加载及提升用户体验的方法。
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
4197 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
移动开发 JavaScript 前端开发
HTML5 Audio(音频)详解
HTML5 通过 `&lt;audio&gt;` 标签简化了网页音频嵌入。本文详细介绍其基本语法与常用属性(如 `controls`、`autoplay`),并通过示例代码展示如何使用 JavaScript 控制音频播放及处理音频事件。此外,还提供了关于浏览器兼容性、自适应设计及无障碍访问的注意事项,助您优化音频体验。
|
vr&ar 图形学 UED
电子沙盘VR模型大屏平板手机微信使用方案
数字孪生电子沙盘和VR模型被广泛应用在房地产等行业,为不同设备定制不同版本的模型是常见做法。然而,通过实时云渲染技术,可以将PC端的VR模型转化为网页版,使用户能够在平板或手机上流畅浏览详细信息,无需开发多个版本。这不仅提升了用户体验,还简化了模型提供商的工作流程,降低了成本。尤其在新楼盘发布时,可通过公众号或广告链接快速吸引潜在客户。成本主要取决于并发用户数及显卡性能要求,但该技术显著提高了跨设备访问的便利性。
500 1
|
移动开发 HTML5
自适应手机端青蛙吃蚊子小游戏html源码
HTML5青蛙吃蚊子游戏源码分享,音乐可以改的,自己在目录替换一下音乐就可以了训练手速和眼力的时候到了!
381 0
自适应手机端青蛙吃蚊子小游戏html源码