实现背景音乐的jquery代码

本文介绍如何使用jQuery JPlayer插件为网页添加背景音乐,并提供多种音乐切换及暂停功能。通过简单的代码示例,展示了如何设置播放器样式、加载音乐文件等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如果网站需要加入背景音乐,可以参照下面的代码进行修改,注意代码中需要引入的文件:

//首页背景音乐,只需在页面添加一个id为jplayer的div元素即可。

    $("#jplayer").jPlayer({
        swfPath: "Jplayer.swf",    //播放器地址
        ready: function () {
            $(this).jPlayer("setMedia", {
                 mp3: "BeautifulLove.mp3"   //背景音乐文件路径
            });
             $(this).jPlayer('play');
         },
         supplied: "mp3"
      });


//以下代码可以加多个歌曲,并且支持暂停
<img class="pull-right" id="bg_music_img" alt="背景音乐控制" style="margin:29px 0;" title="" src="" onclick="toggle()">
<div id="jplayer"></div>
<script src="jquery.jplayer.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var music_on=true;
    var musics=new Array();
    musics[0]="安妮的仙境.mp3";
    musics[1]="初雪.mp3";
    musics[2]="但愿如此.mp3";
    musics[3]="回家.mp3";
    musics[4]="加勒比海蓝.mp3";
    musics[5]="梁祝.mp3";
    musics[6]="誓言.mp3";
    musics[7]="天空之城.mp3";
    musics[8]="童年.mp3";
    musics[9]="雨中漫步.mp3";
    var index;
    var $jplayer;
    $(document).ready(function(){              
        //背景音乐
            $jplayer = $("#jplayer").jPlayer({
                swfPath: "Jplayer.swf",
                ready: function () {
                    toggle();
                },
                ended: function () {
                    $(this).jPlayer("play");
                },
                supplied: "mp3"
            });
    });

    function toggle(){
        if(music_on){//开启
            $("#bg_music_img").attr({ src: "on.png", title: "关闭背景音乐" });
            //背景音乐
            index=Math.round(Math.random()*9);
            $jplayer.jPlayer("setMedia", {
                        mp3:musics[index]
                    }).jPlayer('play');
            music_on=false;
        }else{//停止
            $("#bg_music_img").attr({ src: "off.png", title: "开启背景音乐" });
            $("#jplayer").jPlayer("pause");
            music_on=true;
        }
    }   
</script>

代码中引用的文件点此下载:http://download.youkuaiyun.com/download/qq_30152271/9087759

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值