您当前的位置:首页  > 代码教程  > 多个html背景音乐代码网站首页日记


正文阅读

多个html背景音乐代码

发布时间:2017-12-16 17:02 Saturday编辑:BOSS

    



    以下两种网页背景音乐实现方法:

    第一个简洁,无显示,自动播放。


    <audio id="bgaudio" src="./media/bg-music.mp3" loop="loop"></audio>  
        <script type="text/javascript">  
                document.getElementById('bgaudio').play();  
        </script> 

    第二个有样式,可暂停,图标旋转,如下:

    <style type="text/css">
    .btnAudio{ width:36px; height:36px; position:absolute; right:30px; top:18px; overflow:hidden; background:url("http://pan.cccyun.cc/view.php/7a1a6d1c1426c7ce866712f1c058b69d.png") left top no-repeat; z-index:100;}
    .rotate1circle{-webkit-animation:rotate1circle 1s linear infinite;}
    @-webkit-keyframes rotate1circle {
            0% {
                    -webkit-transform-origin:center center;
                    -webkit-transform:rotate(0deg);
            }
            100% {
                    -webkit-transform-origin:center center;
                    -webkit-transform:rotate(360deg);
            }
    }
    </style>
     
    <section class="u-audio hidden" data-src="http://wap.gx.10086.cn/xhtml/images/healthassist/bgmusic.mp3"></section>
    <div class="btnAudio" id="btnAudio"></div>
     
    <script>
    var bg_audio_val = true;
    var bg_audio = new Audio();
    function audio_init(){
            var options_audio = {
                    loop: true,
                    preload: "auto",
                    src: $('.u-audio').attr('data-src')
            }
            for (var key in options_audio) {
                    bg_audio[key] = options_audio[key];
            }
            bg_audio.load();
            audio_addEvent();
            bg_audio.play();
    }
    function audio_addEvent(){
            $("#btnAudio").on('click', audio_control);
            $(bg_audio).on('play',function(){
                    bg_audio_val = false;
                    $('#btnAudio').addClass('rotate1circle');
            })
            $(bg_audio).on('pause',function(){
                    $('#btnAudio').removeClass('rotate1circle');
            })
    }
    function audio_control(){
            if(!bg_audio_val){
                    bg_audio.pause();
                    bg_audio_val = true;
            }else{
                    bg_audio.play();
            }
    }
    audio_init();
    </script>


关键字词HTML

版权所有:《BOSS》 => 《多个html背景音乐代码
本文地址:https://www.qqeg.cn/jiao/21.html
除非注明,文章均为 《QQ易学堂》 原创,欢迎转载!转载请注明本文地址,谢谢。


阅读本文后,您的心情是:
 
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注

发表评论: