layui实现一个调用kugou api搜索歌曲带歌词播放效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：layui实现一个调用kugou api搜索歌曲带歌词播放效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>歌词</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="referrer" content="no-referrer" />

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

</head>
<style>
    *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
    .main{position:relative;width:100%;height:100%;}
    .main-layout,.main-title{position:absolute;left:50%;margin-left:-270px;width:460px;text-align:center}
    .main-layout{top:15%;height:374px;background:#f1f3f4}
    .main-title{top:15%;overflow:hidden;margin-top:-44px;height:44px}
    .song-name{display:inline-block;margin-left:-12px;height:inherit;line-height:44px}
    .main-panel{position:relative;clear:both;overflow:hidden;height:inherit}
    .loading{position:absolute;top:50%;left:50%;margin-top:-15px;margin-left:-15px;height:inherit}
    .bt-spinner{width:30px;height:30px;border:2px solid #ddd;border-radius:50%;background-color:transparent;border-top-color:#e4007e;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}
    .lrc-panel{position:absolute;width:448px;transition:top .5s}
    .lrc-panel p{overflow:hidden;width:100%;height:34px;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:34px;transform: scale(1)}
    .current-play{color:#e4007e;font-size:17px!important; transition: all 0.6s;}
    .scroll{position:absolute;top:0;right:0;width:8px;height:100%}
    .scroll-drag{position:relative;height:61px;border-radius:8px;background:#0c0c0c;cursor:pointer}
    .main-audio{text-align:center}
    .main-audio audio{outline:0}
    .main-search{height: 50px;background-color: rgb(22, 154, 243);cursor: pointer;}
    .search-btn{line-height: 50px;color: #fff}
    @keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}
        to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
    }
</style>

<body>

    <div class="main">
        <div class="main-title">
            <h2 class="song-name"></h2>
        </div>
        <div class="main-layout">
            <div class="main-panel">
                <div class="loading" style="display: none;">
                    <div class="bt-spinner"></div>
                </div>
                <div class="lrc-panel">
                </div>
                <div class="scroll">
                    <div class="scroll-drag"></div>
                </div>
            </div>
            <div class="main-audio"></div>
            <div class="main-search">
                <h2 class="search-btn">搜索歌曲播放</h2>
            </div>
        </div>
    </div>

    <script>
        var userAgent = function(){ //检测浏览器
        let ua = navigator.userAgent.toLowerCase();
        return {
            isWebkit: /webkit|khtml/.test(ua),
            isOpera: ua.indexOf('opera') > -1,
            isFirefox: ua.indexOf('firefox') > -1,
            isIE6: ua.indexOf('msie 6') > -1,
            isIE7: ua.indexOf('msie 7') > -1,
            isIE8: ua.indexOf('msie 8') > -1,
            isIE9: ua.indexOf('msie 9') > -1
        }
    }
    var mw = (function () {
        let mousewheel = function(){}
        mousewheel.prototype.init=function(el, fn, capture){
            var type = (userAgent().isFirefox) ? "DOMMouseScroll" : "mousewheel";
            if(window.addEventListener){
                return function(){
                    el.addEventListener(type,fn,capture);
                }
            }else if(window.attachEvent){
                return function(){
                    el.attachEvent("on" + type, fn);
                }
            }
        }
        mousewheel.prototype.stopEvent=function(event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            }else {
                event.cancelBubble = true;
            }
            if(event.preventDefault) {
                event.preventDefault();
            }else {
                event.returnValue = false;
            }
        }
        mousewheel.prototype.wheelevent=function(ele,fn){
            var ev,_this = this,delta = 0;
            _this.init(ele,function(e){
                ev = window.event || e;
                _this.stopEvent(ev);
                delta = ev.wheelDelta ? (ev.wheelDelta / 120) : (- ev.detail / 3);
                try{
                    fn(delta);
                }catch(er){
                    return;
                }
            },false)();
        }
        mousewheel.prototype.zoomIn=function(ele,fn){
            this.wheelevent(ele,function(value){
                if(value > 0){fn(value);return;}
            });
        }
        mousewheel.prototype.zoomOut=function(ele,fn){
            this.wheelevent(ele,function(value){
                if(value < 0){fn(value);return;}
            });
        }
        return function () {
            return new mousewheel();
        }
    })();
    (function () {
        var hashArray = [{
            hash: "0FDCF4BFC05BAE2642BB04EE63D3FB1E",
            album_id: "42382026"
        }, {
            hash: "D933554D46F08A59EB7961CF3160BD04",
            album_id: "43287006"
        }, {
            hash: "E2B856A0B7EC0D077663618E9B3E8A3F",
            album_id: "4011672"
        }, {
            hash: "A35D4B31FA86896F3FD55941D1EC1C4E",
            album_id: "547706"
        }, {
            hash: "A1633088C6DFB1252FB742533357DA55",
            album_id: "37381533"
        }, {
            hash: "02680A6BE748445FF7B72176BEFBDCCA",
            album_id: "37381533"
        }, {
            hash: "3D8B43295563D03798AED866DB89C60D",
            album_id: "502506"
        }, {
            hash: "E156C472DDBA29823F2954AC1BA8F44A",
            album_id: "974086"
        }, {
            hash: "9335F2CF99AF6F43170BF4F7BC88F843",
            album_id: "542774"
        }, {
            hash: "C0E681AD93F5F2556E13F88C840F5A82",
            album_id: "970369"
        }];
        let config = {
            audio: document.createElement("audio"),
            lyrics: "",
            intemIndex: 0,
            mouse: false,
            clicked: false,
            lrc_txt: [],
            lrc_time: [],
        };
        let kg = {
            createEle:function(){
                config.audio.autoplay = true;
                config.audio.controls = true;
                document.querySelector(".main-audio").appendChild(config.audio);
                kg.init(hashArray[0]);
            },
            init:function (ob) {
                $.ajax({
                    type: "get",
                    url: "https://wwwapi.kugou.com/yy/index.php?r=play/getdata&dfid=3L1ohu2LTuxm40GcPn067YsP&mid=24b248dc04a81b61bd00da425d7bbf65&platid=4&_=1629899045374",
                    data:{hash:ob.hash,album_id:ob.album_id},
                    dataType: "jsonp",
                    beforeSend:function(){
                        $(".lrc-panel").html("");
                        $(".loading").fadeIn();
                    },
                    success: function(d){
                        if(d.status == 1){
                            $(".song-name").text(d.data.audio_name);
                            setTimeout(function () {
                                config.lyrics = d.data.lyrics;
                                config.audio.src = d.data.play_url;
                                $(".loading").hide();
                                kg.play();
              .........完整代码请登录后点击上方下载按钮下载查看