• 日期: 2024-11-18 22:18:07
  • 标签: 常规

这是一款基于 Meting API 的音乐播放器，支持网易云音乐、QQ音乐、酷狗音乐、虾米音乐、酷我音乐等平台，可播放单曲、歌单、专辑，支持歌词显示、循环播放、随机播放、音量调节等功能，方便您在线听歌。

以下代码展示了如何使用该播放器：

let server = 'netease'; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
let type = 'playlist'; //song: 单曲; playlist: 歌单; album: 唱片
let id = '961612751'; //封面 ID / 单曲 ID / 歌单 ID
let mode = 'order'; //单曲循环：'loop'; 顺序播放：'order'; 随机播放：'random'

$.ajax({
    url: 'https://api.mizore.cn/meting/api.php?server=' + server + '&type=' + type + '&id=' + id,
    type: 'GET',
    dataType: 'JSON',
    success: function (data) {
        const ap = new APlayer({
            container: document.getElementById('aplayer'),
            order: 'random',
            preload: 'auto',
            listMaxHeight: '336px',
            volume: '0.5',
            mutex: true,
            lrcType: 3,
            audio: data,
        });

        /* 底栏歌词 */
        setInterval(function () {
            $('#lrc').html('<span id='The_music' class='lrc-show' style='position: relative;top: 15px;'>' + $('.aplayer-lrc-current').text() + '</span><img src='image/f806913b91e44645b1451768f8fbf737.png' style='width: 64%;height: 64%;border-bottom-left-radius: 20px;position: relative;top: 74px;left: -720px;'>');
        }, 500);

        /* COPY底栏歌词 */
        setInterval(function () {
            $('#copylrc').html('<span id='The_music' class='lrc-show' style='position: relative;top: 15px;'>' + $('.aplayer-lrc-current').text() + '</span><img src='image/ylnwkTd9ZesTNEibo6IGSxl2MPQqPicgnR47uaV6nzAxiahpVuic42QJVw.jpg' style='width: 100%;border-radius: 20px;position: absolute;top: -320px;right: -270px;'><div style='width: 100%;text-align: center;position: absolute;top: -80px;right: -270px;'><div class='vavatar'><img src='https://q4.qlogo.cn/headimg_dl?dst_uin=1957860834&spec=640' style='width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;pointer-events:none;'><div class='vicon'></div></div><span style='margin-left: 10px;'>Hey 是柯佑鸭<br><font size='2px'>正在播放(' + $('#music-name').text() + ')</font></span></div>');
        }, 500);

        /* 音乐通知及控制 */
        ap.on('play', function () {
            music = $('.aplayer-title').text() + $('.aplayer-author').text();
            iziToast.info({
                timeout: 4000,
                icon: 'fa-solid fa-circle-play',
                displayMode: 'replace',
                message: music
            });
            $('#play').html('<i class='fa-solid fa-pause'>');
            $('#music-name').html($('.aplayer-title').text() + $('.aplayer-author').text());
            if ($(document).width() >= 990) {
                $('.power').css('cssText', 'display:none');
                $('#lrc').css('cssText', 'display:block !important');
                $('.copypower').css('cssText', 'display:none');
                $('#copylrc').css('cssText', 'display:block !important');
            };
            // Notification.requestPermission().then(res => {
            //     console.log(res)
            // });
            // new Notification('音乐通知', {
            //     body: '正在播放：' + music,
            //     tag: 1
            // });
        });

        ap.on('pause', function () {
            $('#play').html('<i class='fa-solid fa-play'>');
            if ($(document).width() >= 990) {
                $('#lrc').css('cssText', 'display:none !important');
                $('.power').css('cssText', 'display:block');
                $('#copylrc').css('cssText', 'display:none !important');
                $('.copypower').css('cssText', 'display:block');
            }
        });

        $('#music').hover(function () {
            $('.music-text').css('display', 'none');
            $('.music-volume').css('display', 'flex');
        }, function () {
            $('.music-text').css('display', 'block');
            $('.music-volume').css('display', 'none');
        })

        /* 一言与音乐切换 */
        $('#open-music').on('click', function () {
            $('#hitokoto').css('display', 'none');
            $('#music').css('display', 'flex');
        });

        $('#hitokoto').hover(function () {
            $('#open-music').css('display', 'flex');
        }, function () {
            $('#open-music').css('display', 'none');
        })

        $('#music-close').on('click', function () {
            $('#music').css('display', 'none');
            $('#hitokoto').css('display', 'flex');
        });

        /* 上下曲 */
        $('#play').on('click', function () {
            ap.toggle();
            $('#music-name').html($('.aplayer-title').text() + $('.aplayer-author').text());
        });

        $('#last').on('click', function () {
            ap.skipBack();
            ap.play();
            $('#music-name').html($('.aplayer-title').text() + $('.aplayer-author').text());
        });

        $('#next').on('click', function () {
            ap.skipForward();
            ap.play();
            $('#music-name').html($('.aplayer-title').text() + $('.aplayer-author').text());
        });

        window.onkeydown = function (e) {
            if (e.keyCode == 32) {
                ap.toggle();
            }
        }

        /* 打开音乐列表 */
        $('#music-open').on('click', function () {
            if ($(document).width() >= 990) {
                $('#box').css('display', 'block');
                $('#row').css('display', 'none');
                $('#more').css('cssText', 'display:none !important');
            }
        });

        //音量调节
        $('#volume').on('input propertychange touchend', function () {
            let x = $('#volume').val();
            ap.volume(x, true);
            if (x == 0) {
                $('#volume-ico').html('<i class='fa-solid fa-volume-xmark'></i>');
            } else if (x > 0 && x <= 0.3) {
                $('#volume-ico').html('<i class='fa-solid fa-volume-off'></i>');
            } else if (x > 0.3 && x <= 0.6) {
                $('#volume-ico').html('<i class='fa-solid fa-volume-low'></i>');
            } else {
                $('#volume-ico').html('<i class='fa-solid fa-volume-high'></i>');
            }
        });

        //添加播放模式
        $('#mode').on('click', function () {
            if (mode == 'loop') {
                mode = 'order';
                ap.order('list');
                $('#mode-ico').html('<i class='fa-solid fa-sort-numeric-up'></i>');
            } else if (mode == 'order') {
                mode = 'random';
                ap.order('random');
                $('#mode-ico').html('<i class='fa-solid fa-random'></i>');
            } else {
                mode = 'loop';
                ap.order('list');
                $('#mode-ico').html('<i class='fa-solid fa-redo-alt'></i>');
            }
        });

        //播放结束后自动切换下一首歌
        ap.on('ended', function () {
            if (mode == 'loop') {
                ap.skipForward();
            } else if (mode == 'order') {
                if (ap.list.index == ap.list.audios.length - 1) {
                    ap.list.switch(0);
                    ap.pause();
                    $('#play').html('<i class='fa-solid fa-play'></i>');
                } else {
                    ap.skipForward();
                }
            } else {
                let random = Math.floor(Math.random() * ap.list.audios.length);
                ap.list.switch(random);
            }
            ap.play();
            $('#music-name').html($('.aplayer-title').text() + $('.aplayer-author').text());
        }); 
    },
    error: function () {
        setTimeout(function () {
            iziToast.info({
                timeout: 8000,
                icon: 'fa-solid fa-circle-exclamation',
                displayMode: 'replace',
                message: '音乐播放器加载失败'
            });
        }, 3800);
    }
});

该代码实现了一个功能完整的音乐播放器，您可以根据自己的需求进行修改和扩展。

网易云音乐、QQ音乐、酷狗音乐、虾米音乐、酷我音乐播放器 - 在线听歌神器

原文地址: https://www.cveoy.top/t/topic/oTiZ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录