mgtv - 素材

当前位置:Gxlcms > 播放器 > jQuery多功能音乐播放器代码

jQuery多功能音乐播放器代码

时间:2021-07-01 10:21:17 帮助过:0人阅读

jQuery多功能音乐播放器代码 jQuery多功能音乐播放器代码是一款基于json动态调用带歌词的音乐播放器循环播放。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery多功能音乐播放器代码 - mgtv素材</title>

<script src="src/jquery.min.js"></script>

<style>
	button {
		background-color: #4CAF50;
		border: none;
		color: white;
		padding: 10px 20px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 12px;
	}
</style>

</head>
<body>

<button id="play">播放</button>
<button id="stop">暂停</button>
<button id="xia">下一首</button>
<button id="shang">上一首</button>
<br /><br />
<button id="da">放大声音</button>
<button id="xiao">减小声音</button>
<br /><br />
<button id="order">随机循环</button>
<button id="order2">单曲循环</button>
<button id="order3">列表循环</button>
<br /><br />
<button id="kaitou">到开头</button>
<button id="zhongjian">到中间</button>
<button id="mowei">到末尾</button>
<br /><br />
<button id="jiakuai">加快</button>
<button id="zhengchang">正常</button>
<button id="bianman">变慢</button>
<br />
<br /><span id="songname"></span>
<br /><span id="pic"></span>
<br /><span id="times"></span>
<p id="lyctext"></p>

<script src="src/mjs.min.js?v=2019/12/25"></script>
<script>
    let musiclist = {};
    // 获取歌单json
    $.ajax({
        url: 'https://mjs.uquhu.cn/api.php?lyc=1',
        type: 'get',
        async: false,
        data: {},
        success: function (data) {
            musiclist = data;
        },
        fail: function () {
            alert('歌单获取失败!');
        }
    });


    // 实例化mjs类库
    let music = new mjs();

    // 歌词显示的回调函数,写在init函数调用前面
    music.lycCallback = (lycText) => {
        $('#lyctext').html(lycText);
    };

    // 切歌的回调,写在init函数调用前面
    music.switchCallback = (attr) => {
        music.autoPlay(); // 可以在这里写 自动播放
        $('#songname').html(attr.title + "-" + attr.author);
        $('#pic').html('<img src="' + attr.pic + '" width="100">');
    };

    music.playVolume(0.5); // 初始音量,写在init函数调用前面

    music.orderMusic(1); // 定义初始循环方式,写在init函数调用前面, 0为列表循环,1为随机循环,2为单曲循环
    
    // 传入歌曲json,初始化
    // json为多维json
    //[{'title':'歌曲名称','author':'作者','pic':'歌曲封面','url':'播放直链地址'}]
    music.init(musiclist);

    // 获取当前歌曲的播放时间和进度的回调,写在init函数后面
    music.timeCallback = (music) => {
        $('#times').html(music.nowtime + "" + music.alltime);
    };

    // 播放
    $("#play").click(function () {
        music.autoPlay();
    });
    // 暂停
    $("#stop").click(function () {
        music.stopPlay();
    });

    // 随机循环
    $("#order").click(function () {
        music.orderMusic(1);
        alert('开启随机循环成功');
    });

    // 单曲循环
    $("#order2").click(function () {
        music.orderMusic(2);
        alert('开启单曲循环成功');
    });

    // 列表循环
    $("#order3").click(function () {
        music.orderMusic(0);
        alert('开启列表循环成功');
    });

    // 下一首
    $("#xia").click(function () {
        music.nextMusic(function (music) {
            // 播放下一首的事件回调
        });
    });

    // 上一首
    $("#shang").click(function () {
        music.prevMusic(function (music) {
            // 播放上一首的事件回调
        });
    });

    // 放大音量
    $("#da").click(function () {
        let num = 1;
        music.playVolume(num, function (num) {
            console.log('放大音量' + num);
        });
    });

    // 缩小音量
    $("#xiao").click(function () {
        music.playVolume(0.3, function (num) {
            console.log('缩小音量' + num);
        });
    });

    // 跳到开头
    $("#kaitou").click(function () {
        music.playProgress(1);
    });

    // 跳到中间
    $("#zhongjian").click(function () {
        music.playProgress(50);
    });

    // 跳到结尾
    $("#mowei").click(function () {
        music.playProgress(98);
    });


    // 加快速度,最大为200
    $("#jiakuai").click(function () {
        music.playRate(200);
    });

    // 正常速度
    $("#zhengchang").click(function () {
        music.playRate(100);
    });

    // 减慢速度
    $("#bianman").click(function () {
        music.playRate(50);
    });
</script>


</body>