网页添加背景音乐

css代码

#audio1{width: 0.75rem; height: 0.75rem; background:#434343; border-radius: 50%; position: fixed;top:0.46875rem;left: 50%;margin-left: 3.75rem; z-index: 999;}
/*播放按钮*/
#audio1 .play,#audio1 .pause{width: 0.75rem; height: 0.75rem; cursor: pointer; float: left; }
#audio1 .play{background: url(images/play.svg);-webkit-background-size: 100%;background-size: 100%;}
/*暂停按钮*/
#audio1 .pause{background: url(images/pause.svg);-webkit-background-size: 100%;background-size: 100%;}

html代码

<audio src="images/yy.mp3" loop="loop" id="audio2"></audio>
<div id="audio1">
        <div id="play" class="pause"></div>
</div>

js自动播放代码

$(function() {
    var audio2=$("#audio2")[0];
    var play=$("#play");
    play.click(function(event) {
        if(audio2.paused){
            //play.className="pause";
            $(this).attr('class', 'pause');
            audio2.play();
        }else{
            //play.className="play";
            $(this).attr('class', 'play');
            audio2.pause();
        }
    });
    function audioAutoPlay(id) {
        var audio3 = document.getElementById(id),
            play = function() {
                audio3.play();
                document.removeEventListener("touchstart", play, false);
            };
        audio3.play();
        document.addEventListener("WeixinJSBridgeReady", function() {
            play();
        }, false);
        document.addEventListener('YixinJSBridgeReady', function() {
            play();
        }, false);
        document.addEventListener("touchstart", play, false);
    }
    audioAutoPlay('audio2');
});

2个播放与暂停图片

点击下载:play.zip