<html>

&nbsp; <head>
&nbsp;&nbsp;&nbsp; <title>按钮控制播放音乐</title>
&nbsp;&nbsp;&nbsp;&nbsp; <script src="http://wuover.qiniudn.com/jquery.js"></script>
&nbsp; </head>
<style type="text/css">
    .pause {background-position: 0 bottom;}
    .mscBtn {height: 50px;
    background: #fff url(http://cctv2.qiniudn.com/musicbtn.png) no-repeat;
    display: block;}
</style>
<script type="text/javascript">
$(function(){
    var music = document.getElementById("bgMusic");
    $("#audioBtn").click(function(){
    if(music.paused){music.play();
    $("#audioBtn").removeClass("pause").addClass("play");
    }else{music.pause();
    $("#audioBtn").removeClass("play").addClass("pause");}});
    });
</script>
<body>
    <a class="mscBtn" id="audioBtn" style="cursor:pointer;"></a>
    <audio id="bgMusic" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay"></audio>
</body>
<html>

解决ios不自动播放

<a class="mscBtn" id="audioBtn" style="cursor:pointer;"><i class="forbid"></i></a>
<audio id="bgMusic" src="audio/home.mp3" loop></audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    var $music = $('.mscBtn');

    var audio = document.getElementById('bgMusic');

    function audioAutoPlay(audio) {

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

            audio.play();

        }, false);

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

            audio.play();

        }, false);

    }

     audioAutoPlay(audio);

     $music.on('click', function () {

        if ($music.hasClass('pause')) {

            $music.removeClass('pause').addClass('play');

        } else {

            $music.removeClass('play').addClass('pause');

        }

         if (audio.paused) {

            audio.play();

            return

        }

        audio.pause();

    });

</script>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注