实现背景音乐的jquery代码

最新推荐文章于 2021-10-10 18:35:41 发布

原创最新推荐文章于 2021-10-10 18:35:41 发布 · 4.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #背景音乐

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用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>