背景音乐自动播放,兼容ios

背景音乐自动播放,兼容ios

<audio id="myAudio" autoplay loop>
    <source src=" bgMusic.mp3" type="audio/mp3">
    您的浏览器不支持 audio 标签。
</audio>

//背景音乐播放
function an(){
    var audio = document.getElementById(‘myAudio‘);
    if(audio.paused){
        $(".music").removeClass("musicClose");
        audio.play();// 播放
    }
    else{
        $(".music").addClass("musicClose");
        audio.pause();// 暂停
    }
};

document.addEventListener(‘DOMContentLoaded‘,function (){
    function audioAutoPlay(){
        var audio_ = document.getElementById(‘myAudio‘);
        audio_.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio_.play();
        }, false);
    }
    audioAutoPlay();
});
try{
    wx.ready(function(){
        document.getElementById(‘myAudio‘).play();
    });
}catch(e){
    document.getElementById(‘myAudio‘).play();
}

原文地址:https://www.cnblogs.com/fanmiaolan/p/9869249.html

时间: 2024-11-11 04:07:09

背景音乐自动播放,兼容ios的相关文章

微信h5,背景音乐自动播放

移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio src="../audio/one.mp3" id="audioPlay"></audio> js: wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: data.con

audio标签的自动播放(ios)

0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.controls属性 有了它,就会显示控制条. 图1 chrome默认audio样式 图2 ie默认audio样式 图3 firefox默认audio样式 图4  ios的微信端(iphone6,系统版本11.4,微信使用内置Safari): 2.autoplay属性 autoplay指的是自动播放,

微信的audio无法自动播放的问题

一.问题 最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去. 1.在audio标签里引入了autoplay属性: 经过测试发现Android上可以自动播放,ios上无法自动播放. <audio id="audio" src="1.mp3" autoplay="autoplay"></audio> 2.在js文件中执行audio.pl

h5中嵌入视频自动播放的问题

在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 好在之前看过公司前辈的项目,正好用到了视频,并且可以自动播放,爽!!! 赶紧copy过来,记录一下.这里主要监听了canplaythrough事件,然后自己去让视频play(),在这个过程中还发现,ios和安卓不一样,安卓上需要设置muted才能自动播放,ios没这个限制,还有就是有时候视频也可能有问题,导致不能自动播放,之

背景音乐的自动播放(兼容 ios 和 android)

ios 为了节省用户流量,对于 audio 和 video标签的 preload 和 autopaly 标签 会自动拦截, 除非用户手动点击 交互才会执行 . 但是对于背景音乐,又必须加载的时候就要执行,怎么办,直接调用js 来自动触发. <audio id="bgaudio" src="./media/bg-music.mp3" loop="loop"></audio> <script type="tex

解决ios下的微信打开的页面背景音乐无法自动播放

后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监听这个事件来触发的.那有个坑就是 如果微信已经ready了,但还没执行到你监听这个ready事件的代码,那么你的监听是没用的,所以最理想的情况是,监听的js放在head前面(放在css外链之前),确保最新执行,切记!切记!. ·另一个坑就是,本文的解决方案只适合一开始就播放的背景音乐.如果你是做那种

iOS背景音乐不自动播放

iOS 内置浏览器safari不允许自动播放音乐.我们需要通过WeixinJSBridgeReady()函数实现自动触发 document.addEventListener("WeixinJSBridgeReady", function () { $('audio').play(); }, false); 但是加了上面的代码后在平常开发中还是会偶发这个现象 解决办法:加载完后添加以下逻辑,重新播放一下 wx.ready(function () { $("audio"

H5中背景音乐无法自动播放问题

苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载视频流,甚至不会下载该视频流. 除非用户物理点击一次屏幕,其实现在不能苹果手机,其他的安卓手机和部分App有时也存在背景音不能自动播放的问题. 背景音不能自动播放的场景及解决办法 解决方案:监听WeixinJSBridgeReady事件.DOMContentLoaded事件 微信的JS API建立在微信壳浏览

关于html5 audio 标签在ios系统上不能正常自动播放的解决办法

由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. 这个坑相信大家都已经踩过了, 在 iOS 9 没出现以前, 这样的 hack 方案还是妥妥的.但 iOS 9 出现后, 发现这个方案"失效"了. 没有办法, 看来是时候升级一下 hack 方案了, 于是仔细看了下 audio 的事件. 对于能够自动播放时事件的顺序如下loadstart -