首页 > HTML5 > html5源码 > 微信公众号平台网页音乐js自动播放代码下载支持暂停播放

微信公众号平台网页音乐js自动播放代码下载支持暂停播放

上一篇 下一篇
1、效果演示:

2、具体代码如下:(可以支持暂停和继续播放噢 !)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>微信公众号平台网页音乐js自动播放代码下载</title>
    <style>
        /* audio */
        .u-audio{position:absolute;left:85%;top:5%;width:30px;height:30px;background:url(music/music.png) right 0 no-repeat; -webkit-background-size: 30px 30px;background-size: 30px 30px;z-index:998;}
        .u-play{
            background-image: url(music/music.png);
            -webkit-animation:reverseRotataZ 1.2s linear infinite;
            animation:reverseRotataZ 1.2s linear infinite;
        }
        /* reverseRotataZ */
        @-webkit-keyframes reverseRotataZ{
            0%{-webkit-transform:rotateZ(0deg);}
            100%{-webkit-transform:rotateZ(-360deg);}
        }
        @keyframes reverseRotataZ{
            0%{transform:rotateZ(0deg);}
            100%{transform:rotateZ(-360deg);}
        }
    </style>
</head>
<body>
<div class="u-audio">
    <audio id="yy" autoplay preload src="music/bjyy.mp3" loop></audio>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    var bjyy=document.getElementById("yy");
    function autoPlayAudio() {
        wx.config({
            debug: false
        });
        wx.ready(function() {
            bjyy.play();
        });
    }
    $(".u-audio").click(function(){
        if($(this).attr("class")=="u-audio"){
            bjyy.play();
            $(".u-audio").addClass("u-play");
        }else if($(this).attr("class")=="u-audio u-play"){
            bjyy.pause();
            $(".u-audio").removeClass("u-play");
        }
    });
    $(".u-audio").trigger("click");
    autoPlayAudio();
</script>
</body>
</html>

备注:音乐图标调整坐标只需要修改.u-audio{position:absolute;left:85%;top:5%;  例如left和top 百分比即可,一定要用百分比,否者音乐图标不能自适应了呢。

模板简介:该模板名称为【微信公众号平台网页音乐js自动播放代码下载支持暂停播放】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【html5源码】栏目查找您需要的精美模板。

  • 下载密码 lanrenmb
  • 下载次数 40,101次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 08-08
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
  • 倒计时
  • ui套件
  • 个人
  • 单页
  • 后台管理
  • 404页面
  • html5源码
  • 热门推荐 更多 >
    响应式 微信公众平台 企业网站 微信素材 自适应 html5 微信文章 微信图片 微信模板 单页式简历模板
    您可能会喜欢的其他模板