mjs
/
index.html

<!DOCTYPE html>
<html lang="en">

<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>DEMO测试</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/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>
    <button><a href="demo.html">另一个demo</a></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>
</body>
<script src="src/mjs.min.js?v=2019/12/25"></script>
<script>
    let musiclist = {};
    // 获取歌单json
    $.ajax({
        url: 'http://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>

</html>