请选择 进入手机版 | 继续访问电脑版

微信audio标签禁止自动播放解决

发表于 2017-12-29 16:52 显示全部楼层 9 82

本帖最后由 欧水萍 于 2017-12-29 16:52 编辑

微信audio标签禁止自动播放解决


        最近制作《我们单纯的小美好》h5页面时候发现两个坑,现在分享出来,如果下次有童鞋遇到相关需求,需要使用swiper制作h5页面或许有需要用到哦~~~

        第一个坑就是swiper结合animate.css一起使用的时候,如果用到flip相关的动画效果,ios版本的浏览器就会出现闪屏现象,所以后续的话如果是移动端项目尽量使用其他效果代替这个效果。另外还有一个坑,因为手机端经常使用流量查看网页,所以微信对audio标签做了限制,就是audio音乐不能自动播放,解决办法是要用js添加微信事件监听去控制,详细代码如下:


这是音乐图标和音频结构:

<span class="iconfont icon-music-on" id="mymusic"></span>

<audio src="music/music.mp3" autoplay loop id="myaudio"></audio>




音乐图标样式:

.icon-music-on{ font-size: 34px;position:absolute; right: 10px; top: 10px; z-index:10001; color:#fff;}

.icon-music-on.play{ animation:zhuan 3s linear infinite; -webkit-animation:zhuan 3s linear infinite;}

音乐图标添加了animation动画旋转效果,图标带有play这个类名则有旋转动画,没有这个类名音乐图标则不旋转



以下是详细的js代码:

    //获取音频图标和音频标签

    var mymusic = document.getElementById("mymusic");

    var myaudio = document.getElementById("myaudio");


    //音频自动播放函数封装

    function audioAutoPlay(id) {

        var audio = document.getElementById(id);


        audio.load();

        audio.play();


        $("#myaudio").on("play", function () {

            mymusic.className = "iconfont icon-music-on play";

        });


        document.addEventListener("WeixinJSBridgeReady", function () {

            audio.play();

            mymusic.className = "iconfont icon-music-on play";

        }, false);


        document.addEventListener('YixinJSBridgeReady', function () {

            audio.play();

            mymusic.className = "iconfont icon-music-on play";

        }, false);


    }


    //微信自动播放音频

    audioAutoPlay('myaudio');


    //点击播放音频

mymusic.ontouchstart = function(){

if(myaudio.paused==true){

myaudio.play();

            mymusic.className = "iconfont icon-music-on play";

// mymusic.style.animationPlayState = "running";

}else{

myaudio.pause();

            mymusic.className = "iconfont icon-music-on";

// mymusic.style.animationPlayState = "paused";

}

};



最后,奉上《我们单纯的小美好》页面欣赏,看看最后大合照有没有自己呢?


http://www.520it.com/mobile/zt/christmas/?from=timeline&isappinstalled=0





回复 使用道具
举报
pcatzj

发表于 01-20 04:29 显示全部楼层

回复 支持 反对 使用道具
举报

回复 支持 反对 使用道具
举报
寒雪飘影

发表于 01-11 04:21 显示全部楼层

无需回复的,我们保持沉默,如需回复的,就回21个字!

回复 支持 反对 使用道具
举报
益达月饼

发表于 01-05 17:51 显示全部楼层

我思故我在,我在我就回

回复 支持 反对 使用道具
举报
窗枝猫

发表于 01-03 18:05 显示全部楼层

回复 支持 反对 使用道具
举报
哥哥在哪儿

发表于 2017-12-30 09:30 显示全部楼层

前排支持!!

回复 支持 反对 使用道具
举报
莨上指

发表于 2017-12-29 18:05 显示全部楼层

路过,支持一下

回复 支持 反对 使用道具
举报
Eileen

发表于 2017-12-29 16:57 显示全部楼层

回复 支持 反对 使用道具
举报
东风玖哥

发表于 2017-12-29 16:55 显示全部楼层

祝愿小码哥越来越红火!!红红火火恍恍惚惚!

回复 支持 反对 使用道具
举报

发表新文章
欧水萍

小码哥名师团队

0

学分

1732

学币

1902

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1902
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育