关于移动端音乐没有自动播放的问题

遇到了微信场景在移动端无法播放的bug，换了音乐文件，尝试重新使用audio标签autoplay来进行自己播放，未果。之后在网上百度了一些方法来解决这个问题。

function audioAutoPlay(id){<span style="white-space:pre">   </span>var audio = document.getElementById(id),play = function(){audio.play();document.removeEventListener("touchstart",play, false);};audio.play();document.addEventListener("WeixinJSBridgeReady", function () {//微信play();}, false);document.addEventListener('YixinJSBridgeReady', function() {//易信play();}, false);document.addEventListener("touchstart",play, false);
}
audioAutoPlay('myaudio');

这是一个在微信和易信确定监听是否页面加载的方法，下面直接调用函数，参数填写audio标签的id名，这是一个简单的原生js代码，用来解决少数手机没法在页面打开的时候加载的问题。在其中定义play()的时候，使用了监听函数touchstart，这是为了模拟出来直接加载的方法，在移动端上，用户会习惯的来进行触摸屏幕来看页面，touchstart就是通过这点来完成对这方面的模拟。注意这里用audio的autoplay属性只有少数量的手机不能够支持，因为移动端的机型类型繁多，这里就是为了解决这种类型的bug才有这样的代码的，通常是用不到的。

同时，还有看到有一种方法

function toggleSound() {var music = document.getElementByIdx_x_x("audio");//获取IDif (music.paused) { //判读是否播放music.play(); //没有就播放}
}

这小段js是获取到audio标签，然后判断是否播放，如果没有播放就执行下面的audio方法进行播放。这一小段函数可以加在用户的touch事件中，如果加在onload的时间中不一定能解决无法播放的问题。

在百度的时候发现了这样的内容：

为了防止不必要的自动播放浪费流量，手机网页访问带有audio的页面是不会自动播放的。Safari屏蔽了autoplay，必须由用户交互事件触发，因为autoplay在移动网络环境下可能会造成用户流量费剧增
下面是引自Safari Reference：
In Safari on iPhone OS (for all devices, including iPad), where the
user may be on a cellular network and be charged per data unit,
autobuffering and autoplay are disabled. No data is loaded until the
user initiates it. This means the JavaScript play() and load() methods
are also inactive until the user initiates playback, unless the play()
method is triggered by user action.

可以看到安卓和ios其实是有关注这个问题，他们不想让用户来造成过多的流量，禁止了自动播放的功能。他们认为这是一种不友好的行为，希望默认是禁止的，而我们开发的时候为了产品的宣传去增加自动播放的音乐，在客户不之情的情况下就开始了音乐的加载和播放。看到这段话，我也不禁想问，自动播放的音乐真的对用户是友善的吗，网络流量现在真的已经不是手机网络访问的限制了吗，这都值得我们之后再去探讨。

关于移动端音乐没有自动播放的问题相关推荐

python构建智能机器人系列博文---借助于python实现QQ，微信消息的自动发送，音乐的自动播放
目录一.写在前面: 二.系统实现: 三.总结反思: Author:qyan.li Date:2022.6.3 Topic:借助于python自动化技术实现指定音乐的播放和QQ,微信消息发送一.写在 ...
uni-app IOS 音乐无法自动播放
uni-app IOS H5音乐无法自动播放 (前端小白有什么说得不对的,别怼太凶2333333) (一)对W3C的了解小编也是一个开发不久的前端小白,在对音乐和视频这些多媒体应用中也踩了一些坑在 ...
解决苹果ios端微信无法自动播放H5页面背景音乐
最近做微信H5页面开发的时候,在页面加入背景音乐,并且设置自动播放. 在PC端模拟手机时是可以正常显示播放的,在安卓端微信上也可以正常播放,然后到苹果端微信就不能正常播放了. 找了许久的原因是苹果io ...
HTML5中的audio在手机端和微信端的不能自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的通常解决方法是给一个交互事件: 标签: <audio loop ...
ios设置音乐audio自动播放
因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...
网页设置MP4背景，解决html音乐无法自动播放
前言之前写的大都是偏向于长篇大论的技术文章,很多人看完心中毫无波澜,甚至还觉得有点浪费时间.于是我痛定思过,决心写一些贴近生活.有意思.篇幅短的文章. 有心栽花花不开,无心栽柳柳成荫,这不,有个小姐 ...
解决iPhone手机音乐不能自动播放问题
在做h5开发的时候需要插入背景音乐,使用 html 的 audio 标签可以实现,但是在开发过程中发现iPhone手机打开h5页面时音乐并不会自动播放,而是要点一下屏幕才会自动播放,上网找了半天,各 ...
关于微信H5页面开发中音乐不自动播放的解决方法
我想应该有很多人在做H5场景应用.H5微刊.H5微杂志的时候加入背景音乐吧(客户需求),相信很多人一定碰过不能自动播放的时候,即使是相同的iPhone 5s也有不播放的时候,很蛋疼吧!? 之前我的解决 ...
实现html5音乐的自动播放,html5中audio实现播放列表和自动播放
var count = 43; //一共多少MP3文件 var index = '18.mp3'; // 初始化播放那个文件 window.onload = function(){ var audio ...

关于移动端音乐没有自动播放的问题

关于移动端音乐没有自动播放的问题相关推荐

最新文章

热门文章