How to add music playback on H5 page

        When making web pages, we often encounter scenes with music playing. There is an audio button in the upper right corner of the work, which will play music. Click to switch play and pause. Let’s talk about how to add music playback on h5 web pages.

        It's actually very simple, and it only takes a few simple steps to complete.

1. Add the HTML code. Because it is bound to the upper right corner of each page (or other location), fixed is used for positioning. Add the HTML code before the /body at the bottom of the page.

<span id="musicControl">
        <a id="mc_play" class="on" οnclick="play_music();">
            <audio id="musicfx" loop="loop" autoplay="autoplay">
                <source src="mp3/Dreams.mp3" type="audio/mpeg">
            </audio>
        </a>
 </span>

The audio link corresponding to the source tag here is replaced with your own audio connection.

2. Next set the css style

/* music */
@-webkit-keyframes reverseRotataZ{
    0%{-webkit-transform: rotateZ(0deg);}
    100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
    0%{-webkit-transform: rotateZ(0deg);}
    100%{-webkit-transform: rotateZ(360deg);}
}
#musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
#musicControl a { display:inline-block;width:25px;height:25px;overflow:hidden;background:url('../img/play.png') no-repeat;background-size:100%;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:left bottom;}
#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}

An H5 animation rule for inverting the icon is added here. The icon is as follows

3. Next add the <script> code

<!-- music -->
<script>
    function play_music(){
        if ($('#mc_play').hasClass('on')){
            $('#mc_play audio').get(0).pause();
            $('#mc_play').attr('class','stop');
        }else{
            $('#mc_play audio').get(0).play();
            $('#mc_play').attr('class','on');
        }
        $('#music_play_filter').hide();
        event.stopPropagation(); //阻止冒泡
    }
    function just_play(id){
        $('#mc_play audio').get(0).play();
        $('#mc_play').attr('class','on');
        if (typeof(id)!='undefined'){
            $('#music_play_filter').hide();
        }
        event.stopPropagation(); //阻止冒泡
    }
    function is_weixn(){
        return false;
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
        } else {
            return false;
        }
    }
    var play_filter=document.getElementById('music_play_filter');
    play_filter.addEventListener('click', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchstart', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchend', function(){
        just_play(1);
    });
    play_filter.addEventListener('touchmove', function(){
        just_play(1);
    });
    play_filter.addEventListener('mousedown', function(){
        just_play(1);
    });
    play_filter.addEventListener('mouseup', function(){
        just_play(1);
    });
    play_filter.addEventListener('mousemove',function(){
        just_play(1);
    });
    window.οnlοad=function(){
        if (!is_weixn()){
            just_play();
        }
    }

Note: There is also a method added here to determine whether it is opened in WeChat. If it is not opened in WeChat, it will play automatically. In WeChat, you need to click the button to change to the playing state. If you do not need this function, just comment out the following code.

/*window.οnlοad=function(){
        if (!is_weixn()){
            just_play();
        }
    }*/

The above code can realize a music player. Isn't it very simple? Come and try it.