移动端 h5 ios不能自动播放音乐的问题：

verano 发布于2019-08-23 14:14 / 1959人阅读

摘要：如果我们想要在一个页面自动播放背景音乐或是其他音频，比如是没办法调用事件直接调用，非得添加手动点击事件才可以。接下来就说说我在项目里遇到的困难和解决办法情况我们知道安卓是可以直接调用音频的事件的，不行。

如果我们想要在一个页面自动播放背景音乐或是其他音频，比如ios是没办法调用audio.play()事件直接调用，非得添加手动点击事件才可以。接下来就说说我在项目里遇到的困难和解决办法.
情况1、我们知道安卓是可以直接调用音频的play事件的，ios不行。如是在多带带的h5页面，无路由，这种情况就必须加个引导按钮点击它，或是在页面全局设置一个点击事件one，当用户第一次且仅第一次碰到页面就播放。这里用vue距举例：



methods: {
    playBgMusic () {
        let isiOS = !!navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (isiOS) this.bgMusic.play();
    }
}
mounted(){
      this.bgMusic = new Audio();
      this.bgMusic.loop = true;
      this.bgMusic.src = require("xxx.mp3");
      this.bgMusic.load();
      this.bgMusic.play();
}

情况2、如果是当用户使用hash或者有路由跳转的情况，可以使用在跳转页添加全局audio对象的方式来控制。这里使用vue举例：首先可在router/index.js里设置window.audio=null,在跳转前的页面new一个video 并将此对象赋予window.audio，然后即可在下一个页面使用audio对象。代码：

/*router/index.js*/
window.bgMusic=null;

/*跳转页面 router/beforeGo.js 跳转事件*/
跳转到自动播放音乐的页面

methods: {
    goTo () {
        const audio = new Audio();
        audio.addEventListener("canplay", () => {audio.play()});
        audio.loop = true;
        audio.src = mathBgVoice;
        audio.load();
        bgMusic = audio;
        this.$router.replace("自动播放音乐的页面路由")  
    }
}

情况3：如果你的业务主要是在微信上，那么可以使用以下代码，可实现在微信浏览器中iOS和安卓设备中自动播放音频的效果：

var play = function() {
        document.removeEventListener("WeixinJSBridgeReady", play);
    document.removeEventListener("YixinJSBridgeReady", play);
    audioCtx.play();
};
document.addEventListener("WeixinJSBridgeReady",play, false);
document.addEventListener("YixinJSBridgeReady", play, false);

这样处理以后，在跳转页面先寻找播放时机，等跳转到播放音乐的页面即可实现‘自动播放背景音乐’的功能。

海外云主机服务器托管 h5页面视频自动播放 ios音乐播放器移动端webrtc h5 webrtc不能自动播放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100301.html

css前端初始化

摘要：初入前端，若有不足欢迎指正头部初始化标签问题一般要添加背景音乐的话，我们的第一反应就是使用标签，但是这里有一个坑。前言当下移动端横行，平常我们做一些移动端的项目，接触最多的就是H5，虽然做移动端不用兼容IE，但是我们要兼容微信、app、ios、android... 今天就给写几个平常开发经常会遇到的问题以及解决办法。初入前端，若有不足欢迎指正！头部初始化 ...

mikyou 2019-08-29 16:19 评论0 收藏0
css前端初始化

摘要：初入前端，若有不足欢迎指正头部初始化标签问题一般要添加背景音乐的话，我们的第一反应就是使用标签，但是这里有一个坑。前言当下移动端横行，平常我们做一些移动端的项目，接触最多的就是H5，虽然做移动端不用兼容IE，但是我们要兼容微信、app、ios、android... 今天就给写几个平常开发经常会遇到的问题以及解决办法。初入前端，若有不足欢迎指正！头部初始化 ...

宠来也 2019-08-02 11:09 评论0 收藏0
「前端早读君006」移动开发必备：那些玩转H5的小技巧

摘要：今日励志语录有志者自有千计万计，无志者只感千难万难。三动画技术越来越不陌生，使用门槛也渐渐降低，而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光今日励志语录有志者自有千计万计，无志者只感千难万难。文章原出处：腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...

LittleLiByte 2019-08-30 15:55 评论0 收藏0
「前端早读君006」移动开发必备：那些玩转H5的小技巧

摘要：今日励志语录有志者自有千计万计，无志者只感千难万难。三动画技术越来越不陌生，使用门槛也渐渐降低，而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光今日励志语录有志者自有千计万计，无志者只感千难万难。文章原出处：腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...

liuyix 2019-08-23 14:23 评论0 收藏0